JavaScript - 문제 미리보기
문제 586
hard
다음 코드에서 regular function과 arrow function의 `this` 바인딩 차이에 대한 올바른 설명은?
```javascript
// Regular Function
let regular = function() {
console.log("Regular:", this);
}
// Arrow Function
let arrow = () => {
console.log("Arrow:", this);
}
window.addEventListener("load", regular);
window.addEventListener("load", arrow);
document.getElementById("btn").addEventListener("click", regular);
document.getElementById("btn").addEventListener("click", arrow);
```
정답: C
이것이 Arrow Function의 핵심적인 특징입니다:
1) Regular Function: `this`는 함수를 호출한 객체에 따라 달라집니다. window에서 호출하면 window 객체를, 버튼에서 호출하면 버튼 객체를 참조합니다.
2) Arrow Function: `this`는 함수가 정의된 시점의 상위 스코프(여기서는 전역 스코프)의 `this`를 그대로 사용합니다. 따라서 누가 호출하든 항상 같은 객체(보통 window)를 참조합니다.
이러한 특성 때문에 Arrow Function은 객체 메서드 정의에는 적합하지 않고, 콜백 함수나 이벤트 핸들러에서 `this` 바인딩을 유지하고 싶을 때 유용합니다.
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.