게시글

5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭
강좌3 - ECMAScript - 8년 전 등록 / 4년 전 수정

ES2015(ES6) Object(객체)

 안녕하세요, 이번 시간에는 Object(객체)가 어떻게 바뀌었는지 알아보겠습니다!

일반적인 Object에 해당하는 내용입니다. 객체 리터럴 같은 거요. 아래의 두 코드 중 위의 코드가 예전 코드고 아래 코드가 새로 바뀐 코드입니다. 내용은 같습니다.

var sayYeah = function() {
  alert('Yeah');
};
var a = 1;
var b = 'Wow';
var object = {
  sayHello: function() {
    alert('hello');
  },
  sayYeah: sayYeah
};
object[a + 3] = 'four';
object['say' + b] = function() {
  alert('Wow');
};
const a = 1;
const b = 'Wow';
const sayYeah = () => {
  alert('Yeah'); 
};
const object2 = {
  sayHello() {
    alert('hello');
  },
  sayYeah,
  [a + 3]: 'four', // 4: 'four'
  ['say' + b]() {
    alert('Wow');
  }  // sayWow() { alert('Wow') }
};

위의 sayYeah와 a, b 상수를 선언한 부분을 제외하고 객체만 봐도 확실히 짧아졌죠? 사용자들이 편하도록 문법이 바뀌었습니다.

일단 메소드를 줄여쓸 수 있게 되었습니다. 객체의 메소드는 원래 항상 이름: function(매개변수) { 내용 } 이런 형식이었죠? 굳이 의미없는 function이 계속 들어가 있었습니다. 그래서 ES2015에서는 function을 빼고 이름(매개변수) { 내용 } 이렇게 쓸 수 있도록 했습니다.

다만 완전히 똑같은 것은 아닙니다. 줄여쓴 메서드는 생성자로 쓸 수는 없습니다(new를 붙일 수는 없습니다)

그리고 참조하는 변수의 이름과 속성의 이름이 같은 경우 (위에서 sayYeah) { 이름: 이름 } 대신 { 이름 } 한 번 만 써도 되게 바뀌었습니다. 아래의 sayYeah를 보세요. 한 번만 쓴 것을 볼 수 있습니다. 기존에 { data: data, result: result, object: object } 이렇게 코딩을 해야 하는 경우가 많았는데요. 이제는 { data, result, object } 이렇게 한 번만 써도 됩니다.

또 하나 편해진 것은 동적 속성 생성입니다. 기존에는 속성의 이름에 변수의 값이 사용될 때, 자체적으로 계산하지 못했습니다. 그래서 객체를 선언할 때 바로 추가하지 못하고, 계산한 후에 속성을 따로 추가해주어야 했는데요. 위의 예시의 object[a+3] 이 그것입니다. ES2015에서는 그냥 키 값으로 [a + 3] 을 해주면 자동으로 4로 계산해줍니다. 어마어마하죠? 함수도 마찬가지입니다. 위에서 살펴본 메소드를 줄여쓰는 방법과 같이 사용할 수 있습니다. ['say' + b] 를 보세요. 살짝 이질적인 느낌이 들지만 제대로 작동합니다.

다음 시간은 function(함수) 차례입니다. 함수는 어떤 점이 바뀌었나 같이 살펴보죠!

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.
5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭

댓글

3개의 댓글이 있습니다.
6년 전
ES6 알면알수록 좋은기능이 너무 많네요...
6년 전
JavaScript에 대한 설명 잘 보고 있습니다~
바뀐 코드의 3번째줄에 () => 는 특별한 의미가 있는 것인가요?
공부를 하다 새로운 키워드?가 나오니 기존의 생각들이 섞이게 되네요
6년 전
() => {}는 기존 function과는 기능이 살짝 다릅니다. this와 arguments에 한해서요. 예제에서는 새 기능을 사용하지는 않지만, 그냥 ES2015에 새로 추가된 문법이라 저렇게 사용한 것입니다.
7년 전
안녕하세요. 두 번째 코드 보다가 궁금한 점이 있어서 댓글을 남깁니다. a와 b의 값이 할당은 되어야 [a+3], ['say'+b]가 각각 [4]와 ['sayWow']가 될 수 있을 것 같은데요. 두 번째 코드가 혹시 첫 번째 코드와 이어지는 것인가요? 크롬 콘솔에 두 번째 블럭의 코드만 긁어서 object2를 출력해 보려고 했는데, a가 정의되어 있지 않다고 에러가 출력되네요.
7년 전
이어지는 코드입니다. 헷갈릴 여지가 있으니 수정하겠습니다!
7년 전
그렇군요. 답변 감사합니다. :-)