ES6 화살표 함수에서 this가 다르게 동작합니다

Question

ES6 화살표 함수를 쓰는데 this가 예상과 다르게 동작합니다. ```javascript const obj = { name: '테스트', getName: () => { return this.name; // undefined } }; ``` 일반 함수로 바꾸면 되는데, 화살표 함수에서는 왜 this가 다른 건가요? 언제 화살표 함수를 쓰고 언제 일반 함수를 써야 하는 건지 헷갈립니다.

김영삼 · Accepted Answer

화살표 함수는 자신만의 this를 갖지 않고, 선언된 스코프의 this를 그대로 사용합니다 (lexical this). 객체 메서드에서는 일반 함수를 쓰셔야 합니다.

```javascript
const obj = {
name: '테스트',
getName() { // ES6 단축 메서드
return this.name; // '테스트'
},
getNameArrow: () => {
return this.name; // window.name (상위 스코프)
}
};
```

화살표 함수가 유용한 경우:
- 콜백 함수 (setTimeout, addEventListener 등)
- 배열 메서드 (map, filter, reduce)
- this를 바인딩하고 싶지 않을 때

일반 함수를 써야 하는 경우:
- 객체 메서드
- 생성자 함수
- prototype 메서드

코딩하는민수 · Answer

이벤트 리스너에서도 주의하셔야 해요. `addEventListener`의 콜백을 화살표 함수로 쓰면 this가 이벤트 타겟이 아니라 상위 스코프를 가리킵니다.

개발자준호 · Answer

추가로 bind, call, apply도 화살표 함수에서는 this를 바꿀 수 없다는 점도 알아두세요.

프론트수진 · Answer

이해했습니다! lexical this라는 개념이 핵심이었네요. 객체 메서드에서는 일반 함수, 콜백에서는 화살표 함수로 구분하면 되겠군요.

댓글 4