function으로 선언한 함수화 화살표 함수의 차이점

자바스크립트에서는 다음과 같이 객체 안에 함수를 선언할 수 있다. 출력으로는 '멍멍!'이 나온다. 

 

이 함수를 화살표 함수로 바꾸면 어떻게 될까? 바로 위처럼 오류가 발생한다. 오류 메시지는 'Cannot read propoerty 'sound' of undefined' 이다. 

그 이유는 function 키워드로 함수를 선었했을 때 'this'는 자신이 속해있는 객체를 가리키는데

화살표 함수에서는 'this'를 자신이 속해있는 객체를 가리키지 않기 때문이다. 

 

간단한 예를 들어보자

출력은 다음과 같다.

cat.say = dog.say → 객체 cat 안에  say()라는 함수를 등록해주는 역할, 'this'가 cat를 가리키게 된다.

 

하나 더 기억해야 할 것은 

다음과 같은 코드는 오류가 발생한다. cat 객체에 속해 있는 say() 함수를 밖으로 꺼내게 되면

'this'가 가리키는 대상이 없어져 오류가 발생하는 것이다.