<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var obj = { // 객체 리터널로 객체 생성
name:'홍길동',
score:90
};
console.log(obj.valueOf()); // obj 에는 valueOf가 없지만 동작함. valueOf()는 상위 객체에서 물려 받음
console.dir(obj);
console.log(obj.__proto__ === Object.prototype);
// __proto__ : 객체의 부모를 나타내는 프로토타입으로 부모에게 물려 받은 정보를 가지고 있음
// prototype : 자신의 프로토 타입 객체로 하위로 물려줄 프로토 타입 정보를 가지고 있음
// --------------------------------
function User(name) {
this.name = name;
}
var u = new User('이자바'); // 객체를 생성
console.dir(User);
console.dir(u);
</script>
</head>
<body>
<h3>프로토 타입</h3>
</body>
</html>
- 객체는 JavaScript 언어만이 가지고 있는 특징을 기초로 이루는 자료형으로, 데이터를 저장하고 있는 프로퍼티(property) 및 프로퍼티에 저장된 데이터에 조작을 가할 수 있는 method의 집합으로 구성된다.
- 객체는 '이름(key) : 값(value)' 형태의 프로퍼티들을 저장하는 컨테이너이다. 기본 타입은 하나의 값만을 가지지만 참조 타입인 객체는 여러 개의 프로퍼ㅣ들을 포함할 수 있으며, 이러한 객체의 프로퍼티들은 기본 타입의 값을 포함하거나 다른 객체를 가리킬 수 있다.
- null 과 undefined 를 제외한 모든 원시 타입도 객체로 취급된다. 이러한 원시 타입들에도 프로퍼티가 추가될 수 있고, 모두 객체로서의 특징을 갖는다. (숫자, 문자열, 배열, 함수, 정규 표현식 등)
- 객체를 사용할 때는 속성 (property) 이름을 이용해서 속성 값을 읽거나 쓸 수 있다.
- 자바스크립트에선, 실행 시점에 특정 객체에 속성을 추가하거나 제거할 수 있다.
프로토타입(prototype) 기반 언어
- 자바스크립트는 클래스 기반이 아닌 프로토타입(prototype)을 기반으로 하는 객체 기반 언어이다.
- 프로토타입 기반 언어는 프로토타입 객체라는 개념이 있으며, 새로운 객체의 초기 속성을 가져오는 템플릿(template)으로 사용되는 객체이다. 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들며, 생성된 객체는 또 다른 객체의 원혀이 될 수 있다.
- 프로토타입 언어는 클래스 없이(Class-less)객체를 생성할 수 있다. ECMAScript 6에서 클래스가 추가 되었다.
- 모든 객체는 객체를 만들거나 런타임에 고유한 속성을 지정할 수 있다.
- 모든 객체를 다른 객체의 프로토타입으로 연결하여 두 번째 객체가 첫 번째 객체의 속성을 공유할 수 있다.
- 프로토 타입 객체를 참조하는 prototype 속성과 객체 멤버인 _proto_ 속성이 참조하는 숨은 링크가 있다.
_proto_ : 상위에서 물려 받은 객체의 프로토타입에 대한 정보(prototype link)
prototype : 자신의 프로토타입 객체로, 하위로 물려줄 프로토 타입의 정보(prototype object)
특징
- 모든 객체는 다른 객체로부터 상속을 받는다.
- 생성자 함수를 이용하여 객체 세트를 정의하고 생성할 수 있다.
- class와 마찬가지로 new 연산자로 하나의 객체(인스턴스)를 생성할 수 있다.
- 하나의 객체를 생성자 함수와 결합된 프로토타입에 할당함으로써 객체의 계층구조를 생성한다.
- 프로토타입 체인에 따라 속성을 상속받는다.
- 생성자 함수 혹은 포로토타입은 초기 속성들을 명시한다. 개별 객체 혹은 전체 객체 세트에 동적으로 속성을 추가, 삭제할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 생성자 함수를 이용한 객체 생성
// 생성자 함수 작성 - 생성자는 대문자로 시작한다.
function User(name, age) {
this.name = name;
this.age = age;
this.state = function() {
return this.age >= 19 ? "성인":"미성년자";
}
this.msg = function() {
var s = this.name + "님은 " +this.state()+"입니다.";
console.log(s);
}
}
// 생성자 함수를 이용한 객체 생성
var obj = new User('홍길동', 20);
console.log(obj.name);
obj.msg();
// Object.create()메소드를 이용한 객체 생성
var Book = {
subject:'자바',
msg: function() {
return '좋아하는 과목은 '+this.subject+'입니다.';
}
};
var b1 = Object.create(Book);
var b2 = Object.create(Book);
b1.subject = 'HTML';
b2.subject = 'CSS';
console.log(Book.msg());
console.log(b1.msg());
console.log(b2.msg());
</script>
</head>
<body>
<h3>객체 생성</h3>
</body>
</html>
생성자 함수를 이용한 객체 생성 특징
- 객체 타입을 정의하는 생성자 함수명의 첫 글자는 일반적으로 대문자로 시작한다.
- 생성자에 매개변수가 없으면 생성자를 호출할 때 전달인자 목록과 괄호를 생략할 수 있다. var o = new Object;
- 생성자를 호출하면 생성자의 프로토타입 속성을 상속받은 새로운 빈 객체가 생성된다. 생성자 함수는 객체를 초기화하고 새로 생성된 이 객체는 호출 컨텍스트로 사용된다.
- 생성자는 새로 생성된 객체를 this 키워드로 참조할 수 있다.
- 생성자 함수는 보통 return 키워드를 사용하지 않는다. 일반적으로 생성자 함수는 새 객체를 초기화하고 생성자 함수 몸체의 끝에 이르면 암시적으로 그 객체를 반환한다.
- 만약 생성자가 return 문을 사용하여 명시적으로 어떤 객체를 반환하면, 반환된 객체가 생성자 호출 표현식의 값이 되며, 생성자가 반환 값 없이 return 구문만을 사용하거나 원시 형식 값을 반환하면, 그 반환 값은 무시되고 새로 생성된 객체가 호출 표현식 값으로 사용된다.
this 키워드
- 자바스크립트에서 함수를 호출할 때 기존 매개변수로 전달되는 인자 값에 더해 arguments 객체 및 this 인자가 함수 내부로 암시적으로 전달된다.
- 현재 객체를 참조할 때 this키워드 사용하며, 일반적으로 this는 메소드에서 호출하는 객체를 참조한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 객체의 메소드를 호출할 때 메소드 내부 코드에서 사용한 this : 해당 메소드를 호출한 객체
var obj = { // 객체 생성. 일회성. 주로 속성값 보존을 위해 사용
name : '김자바',
msg : function() {
console.dir(this);
console.log(this.name); // this는 msg() 메소드를 호출한 객체
}
};
obj.msg();
// 생성자 함수를 호출할 때의 this : 새로 생성되는 객체
function Test(arg) {
this.name = arg;
this.getName = function() {
return this.name;
};
}
var obj2 = new Test('자바');
console.log( obj2.getName() );
// 함수를 호출할 때의 this
var userName = '스프링'; // 전역 변수. 전역변수는 자동으로 window의 속성이 된다.
// console.log(userName); // 스프링
console.log(window.userName); // 스프링
// sayUser()를 호출할 때 this는 전역 객체(window)에 바인딩
var sayUser = function() {
console.log( this.userName, userName, window.userName );
}
sayUser();
</script>
</head>
<body>
<h3>객체- this</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 객체의 메소드를 호출할 때 메소드 내부 코드에서 사용한 this : 해당 메소드를 호출한 객체
var obj = { // 객체 생성. 일회성. 주로 속성값 보존을 위해 사용
name : '김자바',
msg : function() {
console.dir(this);
console.log(this.name); // this는 msg() 메소드를 호출한 객체
}
};
obj.msg();
// 생성자 함수를 호출할 때의 this : 새로 생성되는 객체
function Test(arg) {
this.name = arg;
this.getName = function() {
return this.name;
};
}
var obj2 = new Test('자바');
console.log( obj2.getName() );
// 함수를 호출할 때의 this
var userName = '스프링'; // 전역 변수. 전역변수는 자동으로 window의 속성이 된다.
// console.log(userName); // 스프링
console.log(window.userName); // 스프링
// sayUser()를 호출할 때 this는 전역 객체(window)에 바인딩
var sayUser = function() {
console.log( this.userName, userName, window.userName );
}
sayUser();
</script>
</head>
<body>
<h3>객체- this</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
/*
- 생성자 함수에 추가하는 프로퍼티나 메소드 : 프로토타입에 추가하므로 생성자를 통해 생성된 모든 다른 객체에 적용
- 프로토타입
객체는 부모 객체의 프로퍼티나 메소드를 상속 받아 사용할 수 있으며,
이러한 부모 객체를 프로토 타입 객체 또는 프로토타입이라 함
*/
function User(name) {
this.name = name;
this.age = 20; // 기본값을 가질 수 있음
this.state = function() {
return this.age >= 19 ? '성인':'미성년자';
};
}
console.dir(User);
var obj = new User('홍길동');
console.log(obj.name, obj.state() );
</script>
</head>
<body>
<h3>생성자 함수에 추가하는 프로퍼티나 메소드</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10,20];
console.log( arr1.length ); // 2
console.log( arr1 ); // [10,20]
// 뒤에 하나의 요소를 추가
arr1[2] = 30;
console.log( arr1.length ); // 3
console.log( arr1 ); // [10,20,30]
arr1[4] = 50;
console.log( arr1.length ); // 5
console.log( arr1 ); // [10,20,30,empty,50], 콘솔에서는 undefined는 empty로 표시
console.log( arr1[3] ); // undefined
arr1[arr1.length] = 60; // 가장 뒤에 요소 추가
console.log(arr1.join()); // join() : 배열의 모든 요소를 연결 하나의 문자열로 만듦
// 10,20,30,,50,60
arr1[3] = 30; // 특정 요소의 값 변경
console.log(arr1.join());
// push() : 가장 뒤에 새로운 요소 추가
var arr2 = [10,20];
arr2.push(30); // 뒤에 새로운 요소를 하나 이상 추가하고 길이 반환
console.log(arr2.join()); // 10,20,30
arr2.push(40, 50);
console.log(arr2.join()); // 10,20,30,40,50
// unshift() : 가장 앞에 새로운 요소 추가
var arr3 = [30,40];
var len = arr3.unshift(10, 20); // 맨 앞에 새로운 요소를 하나 이상 추가하고 길이 반환
console.log("길이:" + len);
console.log(arr3.join());
</script>
</head>
<body>
<h3>배열 - 요소 추가(가장 앞, 가장 뒤)</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10,20,30];
/*
- splice(start [, deleteCount[, item1, item2]])
start : 변경을 시작할 배열 위치
deleteCount : start 부터 deleteCount 개수만큼 원소 삭제
item1, item2, ... : start 인덱스에 item을 추가
*/
// 가장 앞에 추가
arr1.splice(0, 0, 'a', 'b');
console.log(arr1.join()); // a,b,10,20,30
// 뒤에 추가
var arr2 = [10,20,30];
arr2.splice(arr2.length, 0, 'a', 'b');
console.log(arr2.join()); // 10,20,30,a,b
// 중간에 추가
var arr3 = [10,20,30];
arr3.splice(1, 0, 'a', 'b');
console.log(arr3.join()); // 10,a,b,20,30
// 삭제하고 추가
var arr4 = [10,20,30,40,50];
arr4.splice(1, 2, 'a', 'b');
console.log(arr4.join()); // 10,a,b,40,50
</script>
</head>
<body>
<h3>배열 : 요소 추가(중간)</h3>
</body>
</html>
3. delete() 첨자에 해당되는 요소를 삭제하고, 그 첨자에 공간에는 undefined를 할당. 길이는 줄어들지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var arr1 = [10,20,30,40,50];
console.log(arr1.join());
// length 속성을 이용한 마지막 요소 삭제
arr1.length = arr1.length - 1;
console.log(arr1.join());
//length 속성을 이용한 모든 요소 삭제
arr1.length = 0;
console.log(arr1.length);
console.log(arr1.join());
// pop() 메소드를 이용한 마지막 요소 삭제
var arr2 = [10,20,30,40,50];
var a = arr2.pop(); // 마지막 요소를 삭제하고 삭제된 요소를 반환 길이도 줄어듬
console.log(arr2.length); // 4
console.log(arr2.join()); // 10,20,30,40
console.log(a); // 50
// shift() 메소드를 이용한 처음 요소 삭제
var arr3 = [10,20,30,40,50];
var b = arr3.shift(); // 처음 요소를 삭제하고 삭제된 요소를 반환. 길이도 줄어듬
console.log( arr3.length ); // 4
console.log( arr3.join() ); // 20, 30, 40,50
console.log(b); // 10
// delete() 메소드를 이용한 요소 값 없애기
var arr4 = [10,20,30,40,50];
delete(arr4[1]); // arr4[1]의 요소의 값을 없애고 undefined를 할당. 배열의 길이는 줄지 않음
console.log(arr4.length);
console.log(arr4[1]); // undefined
</script>
</head>
<body>
<h3>배열 - 삭제</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var now = new Date();
var y = now.getFullYear(); // 년도
var m = now.getMonth() + 1; // 월(getMonth() : 0~11)
var d = now.getDate(); // 일자
var w = now.getDay(); // 요일(0(일)~6(토))
var hr = now.getHours();
var mn = now.getMinutes();
var sc = now.getSeconds();
var ms = now.getTime(); // 1970-01-01 00:00:00 부터 경과 시간 (단위 : ms)
var s = y + '-' + m + '-' + d + ' ' + hr + ":" + mn + ":" + sc;
console.log(s, w);
console.log(ms);
</script>
</head>
<body>
<h3>내장객체 - Date</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var y, m, d, s;
var date;
// 2021-12-25 로 Date() 객체 생성
// date = new Date(); // 현재 컴퓨터시스템의 날짜로 객체 생성
date = new Date(2021, 12-1, 25);
y = date.getFullYear();
m = date.getMonth() + 1;
d = date.getDate();
s = y + "-" + m + "-" + d;
console.log(s);
// 2021-09-31 로 Date() 객체 생성 - 9월 31일은 10월 1일로 설정
date = new Date(2021, 9-1, 31);
y = date.getFullYear();
m = date.getMonth() + 1;
d = date.getDate();
s = y + "-" + m + "-" + d;
console.log(s);
// 날짜를 50일로 설정
date.setDate(50);
y = date.getFullYear();
m = date.getMonth() + 1;
d = date.getDate();
s = y + "-" + m + "-" + d; // 2021-11-19
console.log(s);
</script>
</head>
<body>
<h3>내장객체 - Date</h3>
</body>
</html>
