화살표 함수
AI
qwen-3-235b-a22b
화살표 함수 (Arrow Function)
개요
화살표 함수(Arrow Function)는 ECMAScript 2015(ES6)에 도입된 새로운 함수 표현 방식으로, 기존 함수 표현식의 단점을 보완하고 더 간결한 문법을 제공합니다. 특히 this 키워드의 렉시컬(lexical) 바인딩과 간결한 구조로 인해 콜백 함수나 배열 메서드와 같은 상황에서 널리 사용됩니다.
기본 문법
1. 기존 함수 표현식과 비교
// 전통적인 함수 표현
function add(a, b) {
return a + b;
}
// 화살표 함수
const add = (a, b) => a + b;
2. 다양한 문법 형태
| 형태 | 설명 | 예시 |
|---|---|---|
| 매개변수 없음 | () 필요 |
() => console.log('Hello') |
| 단일 매개변수 | () 생략 가능 |
x => x * 2 |
| 복수 매개변수 | () 필수 |
(a, b) => a + b |
| 객체 반환 | ()로 감싸야 함 |
() => ({ name: 'Alice' }) |
렉시컬 this 바인딩
1. this의 동작 차이
- 기존 함수:
this가 호출 시점에 결정되는 동적 스코프(Dynamic Scope)를 따름 - 화살표 함수: 상위 스코프의
this를 상속받는 렉시컬 스코프(Lexical Scope)를 사용
const user = {
name: 'Alice',
greet: () => {
console.log(`Hello, ${this.name}`); // this는 상위 스코프(Window)를 가리킴
}
};
user.greet(); // "Hello, undefined" 출력
2. 실용 예시
// 콜백 함수에서의 this 유지
const timer = {
seconds: 0,
start() {
setInterval(() => {
this.seconds++; // 화살표 함수로 인해 timer 객체의 this 유지
}, 1000);
}
};
주요 사용 사례
1. 배열 메서드와의 결합
const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]
2. 콜백 함수 단축
setTimeout(() => console.log('3초 후 실행'), 3000);
3. 체이닝 구조 최적화
fetch('/data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
한계점과 주의사항
1. 사용 불가능한 상황
-
생성자 함수:
new키워드 사용 불가const Person = (name) => this.name = name; const alice = new Person('Alice'); // TypeError: Person is not a constructor -
arguments 객체: 화살표 함수 내부에서
arguments접근 불가const logArgs = () => console.log(arguments); // ReferenceError // 해결: rest parameters 사용 const logArgs = (...args) => console.log(args);
2. 객체 메서드와의 호환성
const obj = {
value: 42,
method: () => {
console.log(this.value); // this는 전역 객체(Window)를 가리킴
}
};
obj.method(); // undefined
최적의 사용법
1. 추천 사용 상황
-
단일 표현식:
return키워드 생략 가능const double = x => x * 2; -
this의 안정적 사용: 이벤트 리스너, 콜백 등
document.addEventListener('click', () => { console.log('클릭 이벤트 발생'); });
2. 피해야 할 상황
- 프로토타입 메서드:
this의 동적 바인딩 필요 시 - 생성자 함수: 객체 생성 시
참고 자료
- MDN 화살표 함수 문서
- 관련 문서:
- ES6의 클래스
- this 키워드
- 배열 메서드 ```
이 문서는 JavaScript 개발자들이 화살표 함수의 핵심 개념, 활용 방법, 제한사항을 체계적으로 이해할 수 있도록 구성되었습니다. 코드 예시와 표를 통해 시각적 이해를 돕고, 실제 프로젝트 적용 시 고려해야 할 사항을 명확히 제시합니다.
AI 생성 콘텐츠 안내
이 문서는 AI 모델(qwen-3-235b-a22b)에 의해 생성된 콘텐츠입니다.
주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.