[FE] Deep Dive - 10장 객체 리터럴

10. 객체 리터럴

객체란?

• 객체란? JavaScript에서 원시(Primitive) 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체(Object)이다.
• 원시 타입의 값은 변경 불가능한 값(immutable value)이지만, 객체는 변경 가능한 값(mutable value)이다.
• 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다.
• JS에서 사용할 수 있는 모든 값은 프로퍼티 값(value)이 될 수 있다.
  • JS의 함수는 일급 객체이르모 값으로 취급할 수 있다.
  • 프로퍼티 값이 함수일 경우, 메서드(method)라 부른다.

var person = {
    name: 'Lee',
    age: 20,
    increase: function() {
        this.age++;
    }
};

 

객체 리터럴에 의한 객체 생성

• C++나 Java 같은 클래스 기반 객체지향 언어와 달리, JavaScript는 프로토타입 기반 객체지향 언어이다.
• C++의 new 연산자를 쓰는 것과 달리, JavaScript에서는 일반적으로 객체 리터럴을 사용한다.
• 객체 리터럴이란 객체를 생성하기 위한 표기법이다.

var person = {
    name: 'Lee',
    age: 20,
};

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

const empty = {};
console.log(typeof empty); // object

• 객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다.
• 객체 리터럴은 값으로 표현되는 표현식이기 때문에, 닫는 중괄호 뒤에 세미콜론을 붙인다.

 

프로퍼티

프로퍼티에 접근하는 방법은 두 가지다.

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

var person = { name : 'Lee'};
console.log(person.name); // dot notation
console.log(person['name']); // braket notation

대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다!

var person = {
  'last-name' : 'Lee',
  1 : 10
};
person['last-name'];
person.'last-name'; // SyntaxError : Unexpected string
person.last-name; // 브라우저 환경 : NaN
                  // Node.js 환경 : ReferenceError : name is not defined

person.1; // x
person.'1'; // x
person[1]; // o
person['1']; // o

• 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않을 경우, 대괄호 표기법(braket notation)을 사용해야 한다.
• 숫자로 프로퍼티 키가 선언 될 경우 문자열로 반환되어 저장된다.
  • 이 경우에도 식별자 네이밍 규칙을 준수하지 않았기 때문에 대괄호 표기법(braket notation)을 사용해야 된다.
  • 다만 따옴표를 사용하지 않아도 된다는 예외가 있다.

`person.last-name`은 실행 환경에 따라 다른 에러를 발생시킨다.  
Node.js와 브라우저 환경 모두 `person.last` - `name` 이라는 두 개의 식별자로 인식하는 것은 동일하다. 브라우저 환경의 경우 name이라는 전역 변수가 존재하기 때문에 `NaN`을 출력한다. 하지만 Node.js 환경의 경우 name이라는 식별자가 존재하지 않기 때문에 `ReferenceError`를 발생시킨다.

프로퍼티 값 갱신

var person = { name : 'Lee'};
person.name = 'Kim';
console.log(person); // {name : "Kim"}

프로퍼티 동적 생성

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

프로퍼티 삭제

var person = { name : 'Lee'};
delete person.name;
console.log(person); // {}

 

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

ES6에서는 객체 리터럴의 확장 기능을 제공한다.

 

프로퍼티 축약 표현

객체 리터럴의 프로퍼티는 키(key)와 값(value)으로 구성된다. ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일할 때, 프로퍼티 키를 생략할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.

let x = 1, y = 2;
const obj = {x, y};
console.log(obj) // {x: 1, y: 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
var prefix = 'prop';
var i = 0;

// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
cont obj = {
  [`${prefix}-${++i}`] : i,
  [`${prefix}-${++i}`] : i,
  [`${prefix}-${++i}`] : i
}
console.log(obj); // {prop-1 : 1, prop-2 : 2, prop-3 : 3}

ES6의 경우 템플릿 리터럴을 사용하면 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 생성이 가능하다.

메서드 축약 표현

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

ES6에서 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

 

※ 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다.