이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌3 - ECMAScript - 2년 전 등록 / 일 년 전 수정

ES2015(ES6) Object(객체)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

 안녕하세요, 이번 시간에는 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을 빼고 이름(매개변수) { 내용 } 이렇게 쓸 수 있도록 했습니다.

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

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

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

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

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