객체리터럴 2

객체리터럴

---

프로퍼티 접근

• 접근 방법: 1) 마침표 표기법(') 2) 대괄호 표기법([])
• 대괄호 표기법은 프로퍼티 키를 따옴표로 감싸야 함 -> 안하면 엔진이 식별자로 해석
  • 프로퍼티 키가 숫자로 이뤄진 문자열일 경우 생략 가능
  • 객체에 존재하지 않는 프로퍼티 접근 시 undefined 반환(에러 없이 무시됨)
• 이미 존재하는 프로퍼티에 값 할당 시 값이 갱신됨
• 존재하지 않는 프로퍼티에 값 할당 시 값이 동적 생성
• delete 연산자로 프로퍼티를 삭제할 수 있음. delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 함.
  • 존재하지 않는 프로퍼티 삭제 시 무시됨

ES6의 객체 리터럴 확장 기능

• 프로퍼티 값으로 변수 사용 시 변수 이름과 키가 동일한 이름일 때 키 생략 가능함
• 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있음
  • 계산된 프로퍼티 이름: 문자열이나 문자열로 타입 변환 가능한 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적 생성. 이때 표현식은 대괄호로 감싸야 함

// 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}

• 메서드 축약 표현: 메서드 정의 시 function 키워드 생략 가능. 이렇게 정의된 메서드는 프로퍼티에 할당한 함수와 다르게 동작함

// ES5
var obj = {
  sayHi: function() {
    console.log('hello world');
  }

// ES6
const obj = {
  sayHi() {
    console.log('hello world');
  }
}

}