javascript - 화살표 함수

nuxt.js 코드를 작성하다가 화살표 함수를 자주 사용하긴 하는데 일반 함수와 차이점을 크게 두지 않고 사용하는 것 같아 정리 해보려고한다.

사실 nuxt 3 composition api 에서는 this를 사용하지 않기 때문에 더욱더 신경을 안쓰고 작업을 하게 되는데 기본 자바스크립트를 항상 잊어버리면 안된다…프레임워크에 빠지지 말 것

화살표 함수

1. 화살표 함수란 기존의 함수 표현방식인 function을 생략하여 화살표로만 표현이 가능한 함수로 보다 간략하게 작성이 가능하다.
2. 하지만 가장 큰 차이점은 this의 유무이다.
   1. 일반함수는 함수가 호출될 때 this에 바인딩할 객체가 동적으로 결정된다
   2. 화살표함수는 함수를 선언할 때 this에 바인딩 되는 객체가 정적으로 결정된다

⇒ 즉, 일반함수는 동적으로 this가 바인딩 되는 반면 화살표 함수는 항상 상위 스코프의 this를 가리키게된다.

그렇기 때문에 bind방식으로 this를 변경하는 것 역시 불가능 하다

 

화살표 함수를 사용하면 안되는 경우

1. 메소드 정의

     해당 함수 선언 시점의 this를 참고하므로 함수 선언 시점의 상위 스코프인 전역객체 가리키게 된다.

const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); //undefined error를 발생시킴

해당 에러를 발생시킴

const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this}`)
};

person.sayHi(); //output: hi undefined 가 출력된다

 

2. prototype에 할당하는 경우도 1번과 동일한 문제가 발생된다

 

3. 생성자 함수로 사용 불가능

     생성자 함수는 prototype 프로퍼티를 가지는 데 화살표 함수는 prototype 프로퍼티를 가지고 있지않기 때문에 사용 불가능

 

4. addEventListener 함수의 콜백함수에서 화살표함수를 사용하게되면 상위 객체인 window를 가리키게되므로 사용 불가능

     addEventListener는 callback을 자신의 this로 바인딩한다. 이미 this의 값이 정해져있기 때문에 화살표 함수를 사용하게 되면 기  존의 바인딩값이 사라지고 상위 스코프에 바인딩 되기 때문에 기대한 바와 다른 결과값이 나올 수 있기 때문

 

기존 자바스크립트의 this가 문제점이 많다보니 nuxt 이러한 this의 문제점을 상쇄시키기 위해서 this를 아예 없앤 것 같기도하다.

개발하는 입장으로써는 굉장히 편하게 개발이 가능했지만 기본 자바스크립트를 계속 까먹으니 ㅜㅜ 이것도 문제다