var person = {
name: 'Lee',
sayHello: function() {
console.log(`Hello my name is ${this.name}.`);
}
}; // 세미콜론 필수 !
ES6에서 추가된 객체 리터럴의 확장 기능
1. 프로퍼티 축약 표현
- 프로퍼티 값으로 변수를 사용하는 경우,
변수 이름과 프로퍼티 키가 동일할 때 생략 가능 -> 변수 이름으로 키 자동 생성let x = 1, y = 2; const obj = {x, y}; console.log(obj); // {x: 1, y:2}
2. 계산된 프로퍼티 이름
- 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 키 동적 생성 가능
ES5의 경우, 객체 리터럴 외부에서 대괄호 표기법을 사용해야 했었음const prefix = 'prop' let i = 0; const obj = {[`${prefix}-${++i}`]: i, ... };
3. 메서드 축약 표현
- 메서드를 정의할 때
function
키워드 생략 가능const obj = { name: 'Lee', // ES5 sayHi: function() { ... } // ES6 sayHi() { ... } };
new
연산자를 붙여서 실행인스턴스 생성 과정
function Circle(radius) { //1. 인스턴스 생성과 this 바인딩 // 암묵적으로 빈 객체가 생성되고 this에 바인딩 된다. // 2. 인스턴스 초기화 // this에 바인딩되어 있는 인스턴스를 초기화 한다. this.radius = radius // 3. 인스턴스 반환 // 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다. }
new.target (메타 프로퍼티)
- 함수 내부에서 new 연산자와 생성자 함수로서 호출했는지 확인 가능function Circle(radius) { // 이 함수가 new 연산자와 함께 호출되지 않았다면, // new.target은 undefined 이다. if(!new.target) { // new 연산자와 함께 생성자 함수를 재귀 호출하여 생성된 인스턴스 반환 return new Circle(radius); } this.radius = radius; } // new 연산자 없이 생성자 함수를 호출하여도 // new.target을 통해 생성자 함수로서 호출됨 const circle = Circle(5);
delete
연산자: 객체의 프로퍼티 삭제var person = {
name: 'Lee'
};
console.log(person['name']); // "Lee"
console.log(person[name]); // ReferenceError