FrontEnd/JavaScript
[JS] ES6 : Enhanced Object property ( 축약 기능 )에 대해서
모찌바라기
2022. 3. 13. 19:52
728x90
반응형
ES6에 들어오면서 축약기능이 생겼는데, 길었던 코드를 짧게 작성할 수 있도록 지원해주는 기능이다.
여기서 메소드 축약기능이 제일 마음에 든다. 어려운 건 없으니, 그냥 아래처럼 작성하면 된다.
1. 프로퍼티 축약기능
-- 기존 ES5
// 변수 x,y 선언
var x = 1, y = 2;
// 객체 생성시, 키값과, value(변수명)가 똑같아도 둘 다 작성해주어야 함..
var obj = {
x: x,
y: y
};
console.log(obj); // { x: 1, y: 2 }
-- ES6
// 변수 x,y 선언
let x = 1, y = 2;
// 키값과 value(변수명)이 같으면 키값을 생력할 수 있다..
const obj = { x, y };
console.log(obj); // { x: 1, y: 2 }
2. 메소드 축약 표현
-- 기존 ES5
var obj = {
name: 'Lee',
sayHi: function() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee
// ES6
const obj = {
name: 'Lee',
// 메소드 축약 표현 : function()을 생략하고, () 만 작성
sayHi() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee
728x90
반응형