3 enhanced object literals

이번에 다뤄볼 주제는 번역해보면 향상된 객체 리터럴(?) 이렇게 번역 될 듯 한데, 간단히 말하자면 객체를 만드는데에 있어서 조금 더 가독성 좋고 짧은 형태로 만들 수 있게끔 해주는 것입니다.

흔히 javascript를 사용할 때 데이터타입 종류를 신경쓰지 않는데 사실 이러한 new 연산자를 통해서 데이터 타입을 부여하는 것으로 시작을 해야하죠 이런 식으로요

//숫자
var num = new Number();
//문자열
var str = new String();
//객체
var obj = new Object();

그치만 보통은 이렇게 new 연산자를 사용하지 않고 바로 변수에 값을 담는게 일반적입니다. 

//숫자
var num = 1
//문자열
var str = "hello"
//객체
var obj = {"key":"value"}

이런 방식을 지원하는 것을 리터럴 표기법을 지원한다고 하는데 물론 이는 es6 이전에도 지원되던 형태입니다. 서두에서 말한 것은 더 향상된 객체 리터럴 이라고 하였죠?

그럼 어떤식으로 바꼈는지 코드로 직접 살펴보겠습니다.

(출처 : https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d)

(https://poiemaweb.com/es6-enhanced-object-property)

[프로퍼티 축약 표현]

//ES5
function getLaptop(make, model, year) {
    return {
        make: make,
        model: model,
        year: year
     }
}
getLaptop("Apple", "MacBook", "2015");// {make: "Apple", model: "MacBook", year: "2015"}

1 2 3 4 5 6 7 8

//ES6 function getLaptop(make, model, year) {     return {         make,         model,         year     } } getLaptop("Apple", "MacBook", "2015"); // {make: "Apple", model: "MacBook", year: "2015"}

cs

엄청 큰 변화는 아니지만, 초기화 하려는 객체의 key와 매개변수가 동일한 이름일 시에 한 번만 써주면 됩니다. 

[ 메소드 축약 표현 ]

//ES5
function getLaptop(make, model, year) {
    return {
        sayModel : function() {
            return model;
        }
    }
}
getLaptop("Apple", "MacBook", "2015").sayModel(); //"MacBook"

1 2 3 4 5 6 7 8 9

//ES6 function getLaptop(make, model, year) {     return{         sayModel() {             return model;         }     } } getLaptop("Apple", "MacBook", "2015").sayModel(); //"MacBook"

cs

둘 다 객체를 리턴하고 있는데 ES5에서는 key와 key value 를 일일이 정의해주고 있기 때문에 function 선언자를 쓰게 됩니다. 하지만 ES6에서는 보시면 기존에 알고있던 객체 표기법과는 달리 key 뒤에 괄호를 쓰면서 바로 함수를 표현해버리죠.

[ 프로퍼티 키 동적 생성 ]

// ES5
var i = 0;
var obj = {};
 
obj[++i] = i;
obj[++i] = i;
obj[++i] = i;
 
console.log(obj); // {1: 1, 2: 2, 3: 3}

// ES6
let i = 0;
const obj = {
  [++i]: i,
  [++i]: i,
  [++i]: i
};
 
console.log(obj); // {1: 1, 2: 2, 3: 3}

ES5에서는 객체의 프로퍼티 키를 동적으로 생성하고 싶은 경우, 객체 리터럴 외부에서 대괄호 표기법을 사용해야 했는데, ES6에서는 객체 내부에서도 대괄호 표기법을 사용해 프로퍼티 키를 동적으로 생성 가능합니다.

[ __proto__ 프로퍼티에 의한 상속 ]

// ES5
var parent = {
  name: 'parent',
  hello: function() {
    console.log('Hello! ' + this.name);
  }
};
 
// 프로토타입 패턴 상속
var child = Object.create(parent);
child.name = 'child';
 
parent.hello(); // Hello! parent
child.hello();  // Hello! child

// ES6
var parent = {
  name: 'parent',
  hello() {
    console.log("Hello! "+this.name)
  }
};
 
// child 객체의 프로토타입 객체에 parent 객체를 바인딩하여 상속을 구현한다.
const child = {
    __proto__: parent,
    name: 'child'
};
parent.hello(); // Hello! parent
child.hello();  // Hello! child

ES5에서는 객체 외부에서 Object.create를 통해 상속을 구현하고 내부의 프로퍼티 또한 외부에서 값을 설정해줬는데, ES6에서는 상속받는 child 객체 내부에서 상속관계와 내부의 프로퍼티 값 또한 설정이 가능합니다.