[JS] 자바스크립트: ES6 객체 리터럴 기능 3가지

# ES6 : 새로운 객체 리터럴 기능

ES6부터 '객체 리터럴' 방식으로 객체 생성시, 아래의 기능이 추가되었다.

 

첫째, 프로퍼티 key 이름을 계산해서 사용할 수 있다.

둘째, 프로퍼티/메서드 생성 시, 변수만 설정해주면 된다.(key:value 불필요)

셋째, 메서드 생성 시, key값이나 function 키워드 없이 바로 메서드를 생성할 수 있다.

 

각각에 대해 쉬운 코드와 함께 정리해 본다.

 

▼객체 생성 방법 자체에 대한 내용은 아래글 참고.

[JS] 자바스크립트 객체 생성, 접근 방법

 

 

1. 프로퍼티 key에 계산식 사용

객체 내부에서 프로퍼티의 key를 [계산식] 로 사용할 수 있다.

var num_01 = 1;
var num_02 = 2;
var strHello = 'hello';


var newObj = {

    [1 + 1]: 'first',
    [num_01 + num_02]: 'second',
    [strHello + num_01]: num_02,
    [`${strHello} - ${num_01 + num_02}`]: 'fourth'
    
};

console.log(newObj);
//{ '2': 'first', '3': 'second', hello1: 2, 'hello - 3': 'fourth' }

첫번째 key값으로 사용된 [1 + 1]  은 '2'로 사용된다.

두번째 [num_01 + num_02]는 1+2가 되어 '3'으로 사용된다.

세번째 [strHello + num_01]은 'hello' + '1'이 되어 'hello1'로 사용된다(자동 형변환)

네번째 [`${strHello} - ${num_01 + num_02}`] 은 '템플릿 리터럴' 방식을 사용한 것으로 'hello - 3'가 key가 된다. 

▼템플릿 리터럴 사용법 참고

[JS] 자바스크립트 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법

 

 

 

2. 변수만으로 프로퍼티/메서드 생성

변수의 이름과 값을 프로퍼티의 key, value로 사용할 경우, 그냥 변수만 넣어주면 된다.

 

<기존 코드> : 기존에는 객체 생성시, 프로퍼티의 key와 value를 명시적으로 선언해 주어야 했다.

//(기존방식)'key':value 선언 필요
var x = 10;
var y = 20;
var hello = function(){return 'hello';};

var exObj = {
    'x' : x,  // 'x'는 key, x는 value
    'y' : y,
    'hello' : hello
};

console.log(exObj);  // { x: 10, y: 20, hello: [Function: hello] }

처음 'x'는 key이고, 다음 x는 value 이다.

value인 x에는 변수 x의 값이 할당되어 있다.

 

 

<ES6 코드> : 변수를 그대로 프로퍼티로 만들 경우, 변수만 지정해주면 된다.

//(ES6) 변수만으로 프로퍼티 생성
var x = 10;
var y = 20;
var hello = function(){return 'hello';};

var newObj = {
    x,  // 프로퍼티
    y,  // 프로퍼티
    hello  // 메서드
};

console.log(newObj);  // { x: 10, y: 20, hello: [Function: hello] }

 

프로퍼티의 key는 '변수 이름'으로, 프로퍼티의 value는 '변수 값'으로 생성된걸 알 수 있다

이 방식은 프로퍼티 뿐만 아니라, 메서드에서도 동일하게 사용된다.

 

 

 

3. 메서드 생성 방식 간소화

ES6부터 객체의 메서드 생성시, key값과 function 키워드를 생략할 수 있다.

 

<기존 방식의 코드> : 'key:value' 구조로 function 키워드 사용

//(기존) key:value구조, function키워드 사용
var exObj = {
    hello : function(){return `Hello World!`}
};

메서드 생성 시, "key: function( ... ){ ... }" 방식을 사용하고 있다.

 

 

<ES6 방식의 코드> : key생략, function키워드 생략

// (ES6) key생략, function키워드 생략
var newObj = {
    hello(){return `Hello World!`;}
};

console.log(newObj);  // { hello: [Function: hello] }

군더더기 없이, "메서드명( ... ){ ... }" 방식으로 메서드를 생성하고 았다.

 

 

<주의 사항>

ES6 방식으로 생성한 메서드는 기존 방식으로 생성한 메서드와는 다른 부분이 있다.

 

1. 생성자 함수로 사용 불가

2. prototype 프로퍼티 없음

3. super 키워드 사용 가능

 

보통 Java 같은 언어들의 '메서드'는 생성자(constructor)로 사용되지 않는다.

그러나 기존의 자바스크립트는 메서드를 생성자처럼 사용해 인스턴스를 만들어낼 수 있었다.(new 연산자 사용)

//(기존방식) 객체 생성
var exObj = {
    hello : function(){return `Hello World!`}  // hello 메서드 생성(기존 방식)
};

// hello메서드로 객체 생성 시도
var objFromEx = new exObj.hello();

// 객체가 만들어졌다!
console.log(objFromEx); // hello {}

 

 

ES6부터 도입된 '메서드' 생성 방식은 이런 작동을 허용하지 않는다.

//(ES6방식)객체 생성
var newObj = {
    hello(){return `Hello World!`;} // hello 메서드 생성(ES6방식)
};

// hello메서드로 객체 생성 시도
var objFromNew = new newObj.hello();  // TypeError: newObj.hello is not a constructor

ES6방식으로 생성된 메서드는 생성자로 작동하지 않는다.

'메서드' 본연의 기능에 충실하도록 설계된 것이 아닐까 생각된다.

 

 

이러한 연유로(?) ES6방식의 메서드는 prototype 프로퍼티도 없다.

객체를 생성할 수 없으므로 prototype 프로퍼티가 있을 이유가 없는 것이다.

//(ES6)의 메서드는 prototype프로퍼티가 없다.
var newObj = {
    hello(){return `Hello World!`;}
};

console.log(newObj.hello.hasOwnProperty('prototype')); //false


//(기존방식)의 메서드는 prototype프로퍼티를 갖는다.
var exObj = {
    hello : function(){return `Hello World!`}
};

console.log(exObj.hello.hasOwnProperty('prototype'));  // true

 

 

대신 '진짜 메서드(?)' 처럼 super 키워드 사용이 가능하다.

// newObj객체 생성
var newObj = {
    name : '카레유',
    hello(){return `Hello World!`;}
};


// (ES6)babyObj 객체 생성
var babyObj = {
    __proto__ : newObj,  // __proto__에 newObj지정__
    sayHello(){return super.name + super.hello();}  // super는 __proto__에 지정된 newObj를 참조
};


// babyObj의 sayHello메서드 호출
console.log(babyObj.sayHello());  // 카레유Hello World!


// (기존)oldBabyObj 객체 생성
var oldBabyObj = {
    __proto__ : newObj,

    sayHello: function(){return super.name + super.hello();}
    // SyntaxError: 'super' keyword unexpected here
};

ES6 방식의 메서드는 super키워드 참조가 가능하지만,

기존 방식의 메서드에선 super 키워드 사용이 불가능한 걸 알 수 있다.

 

ES6 부터는 자바스크립트에도 클래스(class)가 도입되었는데, 이와 맞물린 메서드 사용방식이 아닐까 싶다.