객체 리터럴

객체란?

원시 값: 변경 불가능한 값 (immutable value)

객체 값: 변경 가능한 값 (mutable value)

 

프로퍼티: 객체의 상태를 나타내는 값.

메서드: 프로퍼티를 참조하고 조작할 수 있는 동작. (프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부름)

 

 

 

프로퍼티 접근

• 마침표 프로퍼티 접근연산자(.)를 사용하는 마침표 표기법
• 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법

var person = {
	name: 'Lee'
}

//마침표 표기법에 의한 프로퍼티 접근
console.log(person.name);

//대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']);

 

 

person.last-name 에서 Node.js 환경과 브라우저 환경 값이 다르게 나오는 이유

var person = {
  'last-name': 'Lee',
  1: 10
};

person.'last-name';  // -> SyntaxError: Unexpected string
person.last-name;    // -> 브라우저 환경: NaN
                     // -> Node.js 환경: ReferenceError: name is not defined
person[last-name];   // -> ReferenceError: last is not defined
person['last-name']; // -> Lee

// 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.
person.1;     // -> SyntaxError: Unexpected number
person.'1';   // -> SyntaxError: Unexpected string
person[1];    // -> 10 : person[1] -> person['1']
person['1'];  // -> 10

 

person.last-name을 실행할 때 자바스크립트 엔진은 먼저 person.last를 평가한다.

person 객체에는 프로퍼티 키가 last인 프로퍼티가 없기 때문에 person.last는 undefined로 평가된다.

따라서 person.last는 undefined - name과 같다.

다음으로 자바스크립트 엔진은 name이라는 식별자를 찾는데 이때 name은 프로퍼티 키가 아니라 식별로 해석된다.

 

Node.js환경에서는 name이라는 식별자 선언이 없으므로 "ReferenceError: name is not defined" 에러가 발생한다.

그런데 브라우저 환경에서는 name이라는 전역변수(전역 객체 window의 프로퍼티)가 암묵적으로 존재한다.

전역변수 name은 window의 이름을 가리키며, 기본값은 빈 문자열이다.

따라서 person.last-name은 undefined - '' 과 같으므로 NaN이 된다.

 

 

프로퍼티 값 갱신

var person = {
  name: 'Lee'
};

// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';

console.log(person);  // {name: "Kim"}

 

 

프로퍼티 동적 생성

var person = {
  name: 'Lee'
};

// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;

console.log(person); // {name: "Lee", age: 20}

 

프로퍼티 삭제

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

 

 

ES6에서 추가된 객체 리터럴의 확장 기능

 

1.프로퍼티 축약 표현

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

 

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}

 

3.메서드 축약 표현

// ES5
var obj = {
  name: 'Lee',
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }
};
obj.sayHi(); // Hi! Lee


// ES6
const obj = {
  name: 'Lee',
  // 메서드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};
obj.sayHi(); // Hi! Lee