TIL(Today I Learned) 🧑🏻💻
10. 객체 리터럴(2)
10.5 프로퍼티 접근
- 프로퍼티에 접근하는 방법은 다음과 같이 두 가지이다.
마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
대괄호 프로퍼티 접근 연산자([ ... ])를 사용하는 대괄호 표기법
var person = {
name: 'Lee'
}
// 마침표 표기법에 의한 프로퍼티 접근
console.log(perosn.name); //Lee
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); //Lee- 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.
var person = {
name: 'Lee'
}
console.log(person[name]); //ReferenceError: name is not defined-
객체에 존재하지 않는 프로퍼티에 접근하면
undefined를 반환한다. (ReferenceError가 발생하지 않는데 주의하자.) -
프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름이 아니라면 반드시 대괄호 표기법을 사용해야한다. (단, 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.)
10.6 프로퍼티 값 갱신
var person = {
name: 'Lee'
}
// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';
console.log(person); // {name: "Kim"}10.7 프로퍼티 동적 생성
- 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.
var person = {
name: 'Lee'
}
// person 객체는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); // {name: "Lee", age:20}10.8 프로퍼티 삭제
var person = {
name: 'Lee'
}
//프로퍼티 동적 생성
person.age = 20;
// person 객체의 age 프로퍼티가 존재한다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다.
delete person.age;
// person 객체에 address 프로퍼티가 존재하지 않는다.
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이떄 에러가 발생하지 않는다.
delete person.address;
console.log(person); // {name: "Lee"}10.9 ES6에서 추가된 객체 리터럴의 확장 기능
10.9.1 프로퍼티 축약 표현
- ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.
// ES5
var x = 1, y = 2;
var obj = {
x: x,
y: y
};
console.log(obj); // {x: 1, y: 2}// ES6
let x = 1, y = 2;
const obj = { x, y };
console.log(obj); // {x: 1, y: 2}10.9.2 계산된 프로퍼티 이름
- 문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다.
// ES5
var prefix = 'prop';
var i = 0;
var obj = {};
// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}// ES6
const prefix = 'prop';
let i = 0;
// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성
const obj = {
[`${prefix}-${++i}`] = i,
[`${prefix}-${++i}`] = i,
[`${prefix}-${++i}`] = i
};
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}10.9.3 메서드 축약 표현
- 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다.
// ES5
var obj = {
name: 'Lee',
sayHi: function() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee// ES6
var obj = {
name: 'Lee',
// 메서드 축약 표현
sayHi() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee새로운 용어 정리
참고 문헌
* 모던 자바스크립트 Deep Dive ( 자바스크립트의 기본 개념과 동작 원리 ) / 이웅모 지음
developer junior