안녕하세요, 이번 시간에는 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(함수) 차례입니다. 함수는 어떤 점이 바뀌었나 같이 살펴보죠!
익명
