Page 23 -

다음 코드는 oldObject 객체에 동적으로 속성을 추가하고 있습니다.

var sayNode = function() {
console.log('Node');
}; 2
var es = 'ES';
var oldObject = {
sayJS: function() {
console.log('JS'); 알아두어야 할 자바스크립트
},
sayNode: sayNode,
};
oldObject[es + 6] = 'Fantastic';
oldObject.sayNode(); // Node
oldObject.sayJS(); // JS
console.log(oldObject.ES6); // Fantastic

이 코드를 다음과 같이 다시 쓸 수 있습니다.

const newObject = {
sayJS() {
console.log('JS');
},
sayNode,
[es + 6]: 'Fantastic',
};
newObject.sayNode(); // Node
newObject.sayJS(); // JS
console.log(newObject.ES6); // Fantastic

oldObject와 newObject를 비교해보세요. sayJS 같은 객체의 메서드에 함수를 연결할 때 더는 콜론
(:)과 function을 붙이지 않아도 됩니다.

sayNode: sayNode처럼 속성명과 변수명이 동일한 경우에는 한 번만 써도 되게 바뀌었습니다.
자바스크립트에서 다음과 같은 경우가 많이 나오는데, 이때 코드의 중복을 피할 수 있어 편리합
니다.

{ name: name, age: age } // ES5
{ name, age } // ES2015

객체의 속성명은 동적으로 생성할 수 있습니다. 예전 문법에서는 ES6라는 속성명을 만들려면 객
체 리터럴(oldObject) 바깥에서 [es + 6]를 해야 했습니다. 하지만 ES2015 문법에서는 객체 리터

69

node_06.indd 69 2020-07-14 오전 11:02:01