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 문법에서는 객체 리터럴 안에 동적 속성을 선언해도 됩니다. newObject 안에서 [es + 6]가 속성명으로 바로 사용되고 있습니다.
객체 리터럴에 추가된 문법은 코딩의 편의성을 향상시키고자 만들어진 것이라는 느낌이 강합니다. 따라서 익숙해지면 코드의 양을 많이 줄일 수 있습니다.