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

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

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

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

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

    객체 리터럴에 추가된 문법은 코딩의 편의성을 향상시키고자 만들어진 것이라는 느낌이 강합니다. 따라서 익숙해지면 코드의 양을 많이 줄일 수 있습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.