본문 바로가기

JS skills

7. 객체 안에 함수 저장하기

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