#19. 자바스크립트(javascript) - 객체 안에 함수 넣기

 

객체 안에 함수 넣기

이번에는 객체 안에 함수를 넣어보도록 하겠습니다.

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  say: function say() {
    console.log(this.sound);
    // 여기서 this는 객체 자체를 의미한다.
    // 따라서 this.sound는 dog.sound 라고 볼 수 있다.
  }
};

먼저 dog라는 객체를 만들어 줍니다.  객체 내부에서 함수를 정의할 때는 아래와 같이 정의합니다.

key: function function_name() {
}

이 부분은 간소화가 가능합니다. 간소화 방법은 아래와 같습니다.

1. say: function say() {}
2. say: function() {}
3. say() {}

위의 dog라는 객체의 say() 함수를 출력해보도록 하겠습니다.

dog.say();

다음으로는 this의 기능을 알기 위해 cat이라는 함수를 만들도록 하겠습니다.

const cat = {
  name: '야옹이',
  sound: '야옹~',
};

cat.say = dog.say;
cat.say();

dog.say에 있는 함수 say()에는 console.log(this.sound); 라는 객체.key 값을 출력하는 부분이 존재합니다. 여기서 this는 객체 자체 dog를 가리키는 것으로, 결국 console.log(dog.sound);가 되는 것입니다.

이를 cat 객체에도 적용시킬 수 있습니다.  cat.say = dog.say; 로 함수 say() 자체를 cat 객체에 say라는 key에 할당합니다. 따라서 cat.say = dog.say;를 하는 순간 cat 객체 안에 dog 객체에 있던 say: function say() {} 가 cat 객체 안으로 들어오게 됩니다. 이때 cat 객체의 say 함수 안에 있는 this는 cat을 가리키고, cay.say(); 를 출력하면 console.log(cat.sound);를 실행하게 됩니다.

위 코드의 실행 결과

아래 코드와 같이 dog.say; 를 객체에 직접 할당할 경우 'TypeError'가 발생합니다. 그 이유는 this와의 관계가 끊어지기 때문입니다. x_man();으로 함수를 불러오면 console.log(x_man.sound); 를 실행해야 하는데, x_man.sound는 정의된 값이 아니기 때문입니다.

const x_man = dog.say;
x_man();