[js] 객체안에 함수넣기

[js] 객체안에서 함수를 사용하는 방법, 조심해야할 점

 

1. 객체안에서 함수를 사용하는 4가지 방법

  const buttonData = [
    {
      btnBlue: "로그인",
      active: function test() {
        console.log("파란색 로그인버튼 눌림!");
      },
    },  
    {
      btnBlue: "검색",
      active: function () {
        console.log("파란색 검색버튼 눌림!");
      },
    },
    {
      btnWhite: "로그인",
      active() {
        console.log("하얀색 로그인 버튼 눌림!");
      },
    },
    {
      btnWhite: "검색",
      active: () => {
        console.log("하얀색 검색버튼 눌림!");
      },
    },    
  ];
  
  buttonData[0].active();
  buttonData[1].active();
  buttonData[2].active();
  buttonData[3].active();

 

위 buttonData 배열안의 네 객체 안에서 함수는 모두 정상적으로 동작한다.

 

출력값

파란색 로그인버튼 눌림!
파란색 검색버튼 눌림!
하얀색 로그인 버튼 눌림!
하얀색 검색버튼 눌림!

 

2. 조심해야할 점

  const buttonData = [
    {
      btnBlue: "로그인",
      active: function test() {
        console.log(`파란색 ${this.btnBlue}버튼 눌림!`);
      },
    },
    {
      btnBlue: "검색",
      active: function () {
        console.log(`파란색 ${this.btnBlue}버튼 눌림!`);
      },
    },
    {
      btnWhite: "로그인",
      active() {
        console.log(`파란색 ${this.btnWhite}버튼 눌림!`);
      },
    },
    {
      btnWhite: "검색",
      active: () => {
        console.log(`파란색 ${this.btnWhite}버튼 눌림!`);
        //"TypeError: Cannot read property 'btnWhite' of undefined." 에러 출력
      },
    },    
  ];
  
  buttonData[0].active();
  buttonData[1].active();
  buttonData[2].active();
  buttonData[3].active();

1. buttonData[0].active(), buttonData[1].active(), buttonData[2].active()는 정상동작한다.
2. buttonData[3].active()는 정상적으로 동작하지 않는다.

3. 이유는 function 키워드를 사용하는 것이 아니라 화살표 함수를 사용하게 되면 this가 무엇인지 알지못한다.

4. function으로 만들었을때 this는 자신이 속해있는 곳을 가리키게 되는데, 화살표함수에서는 this를 자신이 속해있는 곳으로 연결하지 않는다.
5. 따라서 제대로 동작하지 않고 출력값은 아래와 같다.

 

출력값

파란색 로그인버튼 눌림!
파란색 검색버튼 눌림!
파란색 로그인버튼 눌림!
파란색 undefined버튼 눌림!

예)

const sayHi = {
  word: "hi",
  say() {
    console.log(this.word);
  }
};

const sayHello = {
  word: "hello"
};

sayHello.say = sayHi.say; // sayHello.say에 sayHi.say를 연결
console.log(sayHello)// { word: "hello", say: [Function: say] } 출력
sayHello.say(); // "hello" 출력

const say = sayHello.say; // say에 sayHello.say를 연결
console.log(say) // [Function: say] 출력
say(); // undefined 출력

 

sayHello.say에 등록된 함수에서 this는 hello을 가리키기 때문에 this.word는 "hello"가 되고, "hello"가 출력된다.

{ word: "hello", say: [Function: say] }
"hello"

 

say는 연결되어 있는 객체가 존재하지 않고, 호출 시 this가 존재하지 않아 undefined가 되고 에러가 발생한다.

[Function: say]
undefined