13. 화살표 함수

2026년 4월 10일

자바스크립트

1. 기본 문법 (Basic Syntax)

화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 함수를 생성합니다.

let func = (arg1, arg2, ...argN) => expression;

위 코드는 아래 함수 표현식과 본질적으로 동일합니다.

let func = function(arg1, arg2, ...argN) {
  return expression;
};

2. 인수에 따른 표기법 변화

매개변수의 개수에 따라 문법을 더 축약할 수 있습니다.

인수 개수	문법 형태	예시
0개	반드시 빈 괄호`()` 사용	`() => alert('Hi')`
1개	괄호 생략 가능	`n => n * 2`
2개 이상	괄호 필수	`(a, b) => a + b`

3. 본문 형태에 따른 차이 (중요)

본문이 한 줄인지, 여러 줄인지에 따라 return 지시자의 사용 여부가 결정됩니다.

① 본문이 한 줄인 경우 (Implicit Return)

별도의 중괄호 없이 작성하며, 우측의 표현식을 평가한 결과가 자동으로 반환됩니다.

예: let sum = (a, b) => a + b;

② 본문이 여러 줄인 경우 (Explicit Return)

중괄호 {}를 사용하여 본문을 감싸야 하며, 값을 반환하고 싶다면 반드시 return을 명시해야 합니다.

let sum = (a, b) => {
  let result = a + b;
  return result; // 중괄호를 쓰면 return 생략 불가
};

4. [추가 정보] 화살표 함수의 핵심 특징 (Deep Dive)

제공된 텍스트 외에, 실무와 면접에서 반드시 알아야 할 화살표 함수만의 특징을 추가해 드립니다.

자체적인 this가 없음 (Lexical this): 일반 함수와 달리 화살표 함수는 자신만의 this를 가지지 않습니다. 대신 화살표 함수가 선언된 외부 스코프의 this를 그대로 물려받아 사용합니다. (객체의 메서드나 생성자 함수로 쓰기에 부적합한 이유입니다.)
arguments 객체 없음: 일반 함수에서 사용 가능한 매개변수 정보 객체인 arguments를 지원하지 않습니다.
생성자로 사용 불가: new 키워드와 함께 호출하여 객체를 생성할 수 없습니다.

🎙️ 기술 면접 대비 (Interview Questions)

Q1. 일반 함수와 화살표 함수의 가장 큰 차이점은 무엇인가요? (중급)

답변: 가장 큰 차이는 this 바인딩 방식입니다. 일반 함수는 호출 방식에 따라 this가 동적으로 결정되지만, 화살표 함수는 함수가 선언된 시점의 상위 스코프 this를 고정적으로 가리키는 '렉시컬(Lexical) this' 특성을 가집니다. 또한 생성자 함수로 사용할 수 없다는 점도 큰 차이입니다.

Q2. 화살표 함수에서 중괄호 `{}`를 사용할 때 주의할 점은 무엇인가요? (기초)

답변: 본문을 중괄호로 감싸게 되면 자바스크립트 엔진은 이를 '코드 블록'으로 인식합니다. 따라서 한 줄짜리 표현식이더라도 중괄호를 쓰는 순간 자동 반환(Implicit return)이 작동하지 않으므로, 값을 반환하려면 반드시 명시적으로 return 지시자를 작성해야 합니다.

Q3. 콜백 함수로 화살표 함수를 자주 사용하는 이유는 무엇인가요? (중급)

답변: 우선 문법이 간결하여 코드의 가독성이 좋아집니다. 또한, 비동기 작업이나 이벤트 핸들러 내에서 콜백을 사용할 때 상위 스코프의 this를 그대로 유지할 수 있어, bind(this)를 별도로 호출하거나 별도의 변수에 this를 저장할 필요가 없기 때문입니다.

💡 기억해야 할 중요한 내용

간결함이 전부는 아닙니다. this가 고정된다는 특성 때문에 객체의 메서드를 정의할 때는 화살표 함수보다 일반 함수가 안전합니다.
한 줄 요약: "동작이 단순하고 상위 스코프의 컨텍스트를 유지해야 하는 콜백 함수에 최적화된 문법"이라고 이해하시면 완벽합니다.