✒️ Enhanced Object Literal
1. 단축 속성 (shothand property)
- 객체 생성 이전에 식별자를 제공할 경우 이를 프로퍼티 이름으로 지정한다.
- 이후 해당 식별자를 프로퍼티 값을 가져올 위치를 식별하는데 모두 사용한다.
- 특정 변수의 이름과 값을 key, value로 가지는 객체를 만들 수 있다.
- 굳이 프로퍼티에 대한 값을 적지 않고, 속성의 이름만 적어도 괜찮다.
const name = "Baik Gwangin";
const major = "Computer Science";
const age = 25;
const person = {
name: name,
major: major,
age: age,
};
const person = {
name,
major,
age,
};
2. 객체에 메서드 추가하기
- ES6 이후부터 객체에 함수를 추가할 경우,
function
키워드를 생략할 수 있다.
- 화살표 함수도 사용이 가능하나. 이때는
this
가 상위 스코프에 바인딩된다.
const name = "Baik Gwangin";
const major = "Computer Science";
const age = 25;
const person = {
name,
major,
age,
greet() {
console.log(`Hello, ${this.name}`);
},
hello: () => console.log(`Hi!`),
};
person.greet();
person.hello();
- 이렇게 생성된 메서드의 경우 생성자 함수로 사용이 불가하다.
- 또한 prototype 프로퍼티가 없고, super 키워드를 사용할 수 있다.
const person = {
getGreeting() {
return "Hello";
}
};
const friend = {
getGreeting() {
return super.getGreeting() + ", hi!";
}
};
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting());
3. 계산된 속성 이름 (computed property name)
- ES6부터는 객체를 생성함과 동시에 동적으로 프로퍼티를 정의할 수 있다.
- 객체 정의 시, 대괄호
[]
를 사용하여 프로퍼티 정의가 가능해졌다.
const key = "name";
const person = {
[key]: "Baik Gwangin",
};
console.log(person.name);