const person = {
name: "Mung",
age: 28,
speech: function () {
console.log(`빨리 취업하고 싶다`);
},
};
그래서 함수를 왜 굳이 객체로 선언하는데?
중복을 피하기 위해서!
앞서 업로드한 prototype의 개념과 유사하다.
#ES6 : 새로운 객체 리터럴 기능
1. 프로퍼티 key 에 계산식 사용
객체 내부에서 프로퍼티의 key를 [계산식] 으로 사용할 수 있다.
const one = 1;
const two = 2;
const strHi = "hi";
const strMung = "mung";
const newObj = {
[1 + 1]: "first",
[one + two]: "second",
[strHi + strMung]: "third",
[`${strHi} - ${one + two}`]: "fourth",
};
console.log(newObj);
2. 변수만으로 프로퍼티 / 메서드 생성
변수의 이름과 값을 프로퍼티의 key, value 로 사용할 경우, 변수만 넣어주면 된다.
기존에는 객체를 생성할 때, 프로퍼티의 key와 value를 명시적으로 선언해줘야 했다.
const name = "mung";
const age = 28;
const speach = function () {
return "빨리 취업하고 싶어욧..";
};
const person = {
name: name,
age: age,
speach: speach,
};
console.log(person);
ES6 에선 변수만 지정해주면 된다.
const name = "mung";
const age = 28;
const speach = function () {
return "빨리 취업하고 싶어욧..";
};
const person = {
name,
age,
speach,
};
console.log(person);
동일하게 출력된다.
3. 메서드 생성 방식 간소화
객체의 메서드 생성시, key값과 function 키워드를 생략할 수 있다.
기존에는 'key' : 'value' 구조로 function 키워드를 사용했다.
const hope = {
hope: function () {
return `취업하고파욧..`;
},
};
console.log(hope);
ES6 에선 key 와 function 을 생략할 수 있다.
const hope = {
hope() {
return `취업하고파욧..`;
},
};
console.log(hope);
'JS skills' 카테고리의 다른 글
9. HTML templating (0) | 2021.08.27 |
---|---|
8. method chaining (0) | 2021.08.27 |
6. prototype 과 this 를 통한 함수 재활용 (0) | 2021.08.26 |
5 . property : getter & setter (0) | 2021.08.19 |
4. window.location.reload() (0) | 2021.08.18 |