3-1. Object
1) 객체
- 자바스크립트는 객체 기반 프로그래밍 언어
- 객체
- 0개 이상의 프로퍼티로 구성 된 집합.
- 프로퍼티는 키와 값으로 구성
- 프로퍼티 값이 함수일 경우 method로 부름
2) 객체 생성 방법
- 리터럴로 객체 생성
- 객체 리터럴에 프로퍼티를 포함시켜 객체를 생성함과 동시에 프로퍼티를 만들 수 있음
- 객체를 생성한 이후에 프로퍼티를 동적으로 추가 가능
var student = {
// 프로퍼티 : 객체의 상태를 나타내는 값(data)으로 키-값 쌍으로 구성
name : '유관순',
age : 16,
// 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)
getInfo : function(){
return `${this.name}(은)는 ${this.age}세 입니다.`
}
};3-2. Property
속성 이라는 뜻, 객체 내부의 속성
1) property
- 프로퍼티 키
- 문자열이므로 따옴표를 사용하지만 식별자 네이밍 규칙을 따르는 경우 사용하지 않아도 되며 식별자 네이밍 규칙을 따르지 않을 경우 따옴표를 반드시 사용해야 한다
var obj = { normal : 'normal value', '@ s p a c e @' : 'space value', //특수문자 사용시에는 '' 사용 '' : '', //빈 문자열 키는 오류 발생하지 않지만 권장하지 않음 0 : 1, //숫자 키는 내부적으로 문자열로 변환 var : 'var', //예약어 키는 오류 발생하지 않지만 권장하지 않음 normal : 'new value' //이미 존재하는 키를 중복 선언하면 나중에 선언한 프로퍼티로 덮어 씀 };
- 문자열이므로 따옴표를 사용하지만 식별자 네이밍 규칙을 따르는 경우 사용하지 않아도 되며 식별자 네이밍 규칙을 따르지 않을 경우 따옴표를 반드시 사용해야 한다
- 프로퍼티 값
- 자바스크립트에서 사용할 수 있는 모든 값
2) method
- 자바스크립트의 함수는 객체
- 함수는 값으로 취급할 수 있고, 프로퍼티 값으로도 사용할 수 있다.
- 객체 안에 함수를 선언하면, 그 프로퍼티 함수는 method로 정의
- 외부에 함수를 선언하고, 객체안에서 함수를 참조하면 method가 아님.
var dog = {
name : '뽀삐',
// 메소드 - 객체 내부에 정의 된 함수
eat : function(food){
console.log(`${this.name}(은)는 ${food}를 맛있게 먹어요.`);
}
};3) property access
- 마침표 표기법(dot notation)
console.log(dog.name);
dog.eat('고구마');- 대괄호 표기법(square bracket notation)
//프로퍼티 키는 반드시 따옴표로 감싼 문자열을 사용한다.
console.log(dog['name']);var obj = {
'dash-key' : 'dash-value',
0 : 1
};
console.log(obj["dash-key"]);
// 식별자의 네이밍 규칙을 준수하지 않았을 경우 반드시 대괄호 표기법을 사용해야만 값을 가져올 수 있음
// console.log(obj.dash-key);
// console.log(obj.'dash-key');
// console.log(obj[dash-key]);
// 프로퍼티 키가 숫자로 이루어진 문자열인 경우 대괄호 표기법에서 따옴표를 생략할 수 있음.
console.log(obj[0]);4) property change and remove
var dog = {
name : '뽀삐'
};
// 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.
dog.name = '두부';
console.log(dog.name);
// 프로퍼티 동적 추가
// 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성 되어 추가 되고 프로퍼티 값이 할당된다.
dog.age = 3;
console.log(dog);
// 프로퍼티 삭제
// delete 연산자는 객체의 프로퍼티를 삭제하며, 만약 존재하지 않는 프로퍼티를 삭제하면 에러 없이 무시된다.
delete dog.age;
delete dog['age'];
console.log(dog);3-3. ES6
1) property value shorthand
- 프로퍼티 값 단축 구문
- ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.
var id = 'p-00001';
var price = 30000;
var product2 = {id, price}; // 프로퍼티 키는 변수 이름으로 자동 생성
console.log(product2);2) computed property name
- 계산된 프로퍼티 이름
- ES5에서는 계산 된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 객체 리터럴 외부에서 대괄호 표기법을 사용해야 한다.
var prefix = 'key';
var index = 0;
var obj = {};
obj[prefix + ' - ' + index++] = index;
obj[prefix + ' - ' + index++] = index;
obj[prefix + ' - ' + index++] = index;- ES6에서는 객체 리터럴 내부에서도 계산 된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.
var obj2 = {
[`${prefix} - ${index++}`] : index,
[`${prefix} - ${index++}`] : index,
[`${prefix} - ${index++}`] : index,
};3) method shortcut
- 메소드 단축
- ES5에서 메소드를 정의하려면 프로퍼티의 값으로 함수를 할당한다.
var dog = {
name : '뽀삐',
eat : function(food){
return `${this.name}(은)는 ${food}를 맛있게 먹어요.`
}
};- ES6에서 메소드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.
var dog2 = {
name : '뽀삐',
eat(food){
console.log(`${this.name}(은)는 ${food}를 맛있게 먹어요.`);
}
};3-4. Additional Operator
1) in operator(in 연산자)
- in 연산자를 통해 프로퍼티 존재 여부를 확인 할 수 있다.
var student = {
name : '유관순',
age : 16,
test : undefined
};
console.log(student.name === undefined); //false - 존재
console.log(student.height === undefined); //true - 존재하지 않음
console.log(student.test === undefined); //true - 존재하지만 존재하지 않음으로 판단 됨
//프로퍼티 값이 undefined 일 뿐 프로퍼티는 존재하지만 존재하지 않는다고 판별 될 수 있는 문제가 있다.
// in 연산자로 판단하기
console.log("name" in student);
console.log("height" in student);
console.log("test" in student);2) for in
- for in 반복문을 이용해 객체의 모든 키를 순회할 수 있다.
- var 변수명 in 객체명(for in 반복문에서는 키 값만을 가져오기 때문에 var 변수명을 꼭 key로 설정하지 않아도 됨)
- key 값에 해당하는 값이 반복을 통해 변한다면, 대괄호 표기법만 사용 가능.
var student = {
name : '유관순',
age : 16,
getInfo(){
return `${this.name}(은)는 ${this.age}세 입니다.`
}
};
console.log(student);
console.log();
console.log(student.getInfo());
for(var key in student){
console.log(`key : ${key}`); //프로퍼티 키 값
console.log(`student[key] : ${student[key]}`); //프로퍼티 키에 해당하는 값
}
DREAM STARTER