면접-JavaScript #03 | 향상된 객체 리터럴

📚 개념 요약

📌 객체 리터럴

클래스 기반의 객체지향 언어(C++, JAVA, …)는 클래스를 사전에 정의하고 new 연산자(생성자)를 호출하여 인스턴스(클래스에 의해 생성되어 메모리에 저장된 실체)를 생성하는 방식으로 객체를 생성한다.

반면에 JS는 프로토타입 기반 객체지향 언어로써 다양한 객체 생성 방법을 지원한다. [객체 리터럴, Object생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6)] 이 중에서 가장 간단한 방법은 객체 리터럴을 사용하는 방법이다.

// 객체 리터럴을 통한 객체 생성
var person = {
  name: "Lee", //[프로퍼티] key: value
  sayHi: function(){} //[메서드] key: function
} 

📌 향상된 객체 리터럴

향상된 객체 리터럴이란 ES6에서 제공하는 더욱 간편하고 표현력 있는 객체 리터럴의 확장 기능이다.

1. 프로퍼티 축약 표현

   // ES5
   var x = 1, y = 2;
   var obj = {
     x: x,
     y: y,
   }
   
   // ES6
   let x = 1, y = 2;
   const obj = {x, y}

   프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.

2. 계산된 프로퍼티 이름

   //ES5
   var prefix = 'prop';
   var obj = {};
   var i = 1;
   obj[prefix + '-' + i] = i;
   
   //ES6
   const prefix = 'prop';
   let i = 0;
   const obj = {
     [`${prefix}-${i}`]: i,
   };

   기존에는 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 외부에서 대괄호 표기법을 이용해야 했지만

   ES6부터는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.

3. 메서드 축약 표현

   //ES5
   var obj = {
     sayHi: function(){ 코드 작성 }
   }
   
   //ES6
   const obj = {
     sayHi() { 코드 작성 }
   }

   위와 같이 function키워드를 생략한 축약 표현이 가능하다.

   하지만 ES6의 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다. 26.2절의 “메서드”에서 알아보자.

💡 질문

❓ 향상된 객체 리터럴이란

향상된 객체 리터럴은 ES6에서 제공하는 기능으로 기존보다 더 간편하고 표현력 있는 객체 리터럴의 확장 기능을 제공합니다. 3가지 정도를 예로 들 수 있는데

첫번째는 객체 리터럴의 각 프로퍼티내의 키의 변수이름과 값의 변수이름이 동일한 이름일 경우 프로퍼티 키를 생략하는 기능이고,

두번째는 프로퍼티 키의 변수로 계산된 이름을 사용할 때 대괄호 표기법과 템플릿 리터럴을 동시 사용해서 객체 리터럴 안에서 프로퍼티 키를 동적 생성할 수 있도록 하는 기능입니다.

세번째는 객체 리터럴 안에서 function키워드를 생략한 축약 표현 기능입니다.