화살표 함수

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• 화살표 함수의 여러 가지 단축 표기법을 이해하고 올바르게 작성할 수 있습니다.
• 화살표 함수와 일반 함수의 this 바인딩 차이를 이해할 수 있습니다.
• 콜백 함수(Callback Function)의 개념을 이해하고 화살표 함수를 콜백으로 활용할 수 있습니다.
• 어떤 상황에서 화살표 함수를 쓰고, 어떤 상황에서 일반 함수를 써야 하는지 구분할 수 있습니다.

➡️ 화살표 함수란 무엇인가

이 섹션에서는 화살표 함수의 탄생 배경과 기본 문법을 살펴보겠습니다.

화살표 함수(Arrow Function)는 ES6(2015)에서 도입된 함수 표기법으로, 기존 함수 표현식을 더 간결하게 작성할 수 있는 문법입니다. => 기호를 사용하기 때문에 "화살표 함수"라고 부릅니다. 현대 자바스크립트 코드에서는 화살표 함수를 매우 광범위하게 사용하므로, 지금부터 배우는 모든 예제에서 자주 마주치게 됩니다.

// 일반 함수 표현식
const add1 = function(a, b) {
  return a + b;
};

// 화살표 함수로 변환 — 같은 기능
const add2 = (a, b) => {
  return a + b;
};

console.log(add1(3, 5));  // 8
console.log(add2(3, 5));  // 8 — 완전히 동일한 결과

화살표 함수는 function 키워드를 제거하고 매개변수 목록과 함수 본체 사이에 =>를 넣는 것이 기본 구조입니다. 그런데 화살표 함수에는 상황에 따라 코드를 더욱 줄일 수 있는 다양한 축약 규칙이 있습니다.

✂️ 화살표 함수의 단계별 축약

이 섹션에서는 화살표 함수를 더 간결하게 쓸 수 있는 세 가지 축약 규칙을 단계별로 살펴보겠습니다.

// 규칙 1: 함수 본체가 return 한 줄뿐이면 {} 와 return 생략 가능
const multiply = (a, b) => a * b;  // { return a * b; } 생략
console.log(multiply(4, 5));  // 20

// 규칙 2: 매개변수가 1개이면 괄호 생략 가능
const double = n => n * 2;   // (n) => n * 2 의 괄호 생략
console.log(double(7));  // 14

// 규칙 3: 매개변수가 없으면 빈 괄호 필수
const sayHello = () => "안녕하세요!";
console.log(sayHello());  // "안녕하세요!"

// 여러 줄 로직이 필요하면 {} 와 return 유지
const calcGrade = score => {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  return "F";
};
console.log(calcGrade(85));  // "B"

// 객체를 직접 반환할 때는 () 로 감싸야 함
// 그냥 {} 쓰면 함수 본체로 해석됨
const makeUser = (name, age) => ({ name, age });  // ({...}) 필수!
console.log(makeUser("홍길동", 25));  // { name: "홍길동", age: 25 }

단축 규칙들을 처음에는 헷갈릴 수 있지만, 실제 코드를 많이 읽다 보면 자연스럽게 익숙해집니다. 핵심만 기억하세요: 한 줄 반환이면 {}와 return을 생략할 수 있고, 매개변수가 하나면 괄호를 생략할 수 있습니다.

조건	일반 표현식	화살표 함수
매개변수 2개, 여러 줄	function(a,b){ ... }	(a, b) => { ... }
매개변수 2개, 한 줄 반환	function(a,b){ return a+b; }	(a, b) => a + b
매개변수 1개, 한 줄 반환	function(n){ return n*2; }	n => n * 2
매개변수 없음, 한 줄 반환	function(){ return 42; }	() => 42

🔗 콜백 함수와 화살표 함수

이 섹션에서는 함수를 다른 함수의 인수로 전달하는 콜백 함수 개념과 화살표 함수가 콜백에서 어떻게 활용되는지 살펴보겠습니다.

콜백 함수(Callback Function)는 다른 함수에 인수로 전달되어, 특정 시점에 호출되는 함수입니다. 자바스크립트에서 함수는 일급 객체(First-class Object)입니다. 변수에 저장하고, 다른 함수의 인수로 전달하고, 반환값으로 돌려줄 수 있습니다. 이 특성이 자바스크립트를 매우 유연하게 만드는 핵심입니다.

// setTimeout — 지정한 시간 후 콜백 실행
setTimeout(function() {
  console.log("1초 후 실행!");
}, 1000);

// 화살표 함수로 간결하게
setTimeout(() => {
  console.log("1초 후 실행!");
}, 1000);

// 콜백을 직접 만들어 사용
function repeat(count, callback) {
  for (let i = 0; i < count; i++) {
    callback(i);  // 전달받은 함수를 호출
  }
}

// 콜백으로 일반 함수 전달
repeat(3, function(n) {
  console.log(`반복 ${n}`);
});

// 화살표 함수로 더 간결하게
repeat(3, n => console.log(`반복 ${n}`));
// 반복 0, 반복 1, 반복 2

콜백 함수를 화살표 함수로 작성하면 코드가 훨씬 간결해집니다. 배열 메서드(12~13강)에서 이 패턴을 매우 집중적으로 사용하게 됩니다. forEach, map, filter, reduce 등이 모두 콜백 함수를 받습니다.

고차 함수(Higher-Order Function)도 미리 알아두면 좋습니다. 고차 함수란 함수를 인수로 받거나 함수를 반환하는 함수를 말합니다. 위 repeat 함수가 고차 함수의 예입니다.

🔑 일반 함수 vs 화살표 함수 — this 바인딩 차이

이 섹션에서는 화살표 함수와 일반 함수의 가장 중요한 차이인 this 바인딩을 살펴보겠습니다.

화살표 함수가 일반 함수와 단순히 문법이 짧은 것만 아닙니다. 동작에서 결정적인 차이가 있습니다. 바로 this의 동작 방식입니다. this는 함수가 실행될 때 함수를 가리키는 주체를 참조하는 키워드입니다.

// 일반 함수의 this — 호출 방식에 따라 달라짐
const person = {
  name: "홍길동",
  greetNormal: function() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    // 여기서 this는 person 객체
  },
  greetArrow: () => {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    // 여기서 this는 바깥 스코프(여기서는 전역 객체)
    // 브라우저에서 전역 this.name은 undefined
  }
};

person.greetNormal();  // "안녕하세요, 저는 홍길동입니다."
person.greetArrow();   // "안녕하세요, 저는 undefined입니다." ← 문제!

// 타이머 + 객체 — 화살표 함수가 유리한 경우
const counter = {
  count: 0,
  start: function() {
    // 일반 함수: this가 바뀌어 버림
    // setInterval(function() { this.count++; }, 1000);  // ❌

    // 화살표 함수: 바깥 this(counter)를 그대로 사용
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);  // ✅
  }
};

화살표 함수는 자신만의 this를 가지지 않습니다. 대신 화살표 함수가 정의된 위치의 바깥 스코프의 this를 그대로 사용합니다. 이것을 렉시컬 this(Lexical this)라고 합니다.

이 특성 때문에 사용 규칙이 생깁니다. 객체의 메서드를 정의할 때는 일반 함수를 사용해야 합니다(화살표 함수를 쓰면 this가 원하는 객체를 가리키지 않습니다). 콜백 함수(이벤트 핸들러, 타이머, 배열 메서드 등)에서는 화살표 함수가 더 편리합니다(바깥 this를 그대로 유지합니다). 지금은 이 규칙만 기억하면 충분합니다.

⚠️ 화살표 함수를 쓰면 안 되는 경우

이 섹션에서는 화살표 함수가 적절하지 않은 상황을 살펴보겠습니다.

화살표 함수는 편리하지만 모든 상황에 쓸 수 있는 것은 아닙니다. 다음 세 경우는 반드시 일반 함수를 사용해야 합니다.

첫째, 객체 메서드입니다. 방금 살펴본 것처럼, 객체의 메서드가 this로 자기 객체를 참조해야 할 때는 일반 함수를 사용해야 합니다.

둘째, 생성자 함수입니다. 화살표 함수는 new 키워드로 인스턴스를 만드는 생성자 함수로 사용할 수 없습니다. 생성자 함수는 클래스 개념과 연결되는 심화 내용으로 이 강좌의 범위를 벗어나지만, 화살표 함수로는 만들 수 없다는 점만 알아두세요.

셋째, arguments 객체가 필요한 경우입니다. 일반 함수에는 함수에 전달된 모든 인수를 담은 arguments라는 특수 객체가 있습니다. 화살표 함수에는 이 객체가 없습니다. 가변 인수가 필요하면 9강에서 배운 나머지 매개변수(...args)를 사용하세요.

// 일반 함수의 arguments 객체 (화살표 함수에는 없음)
function showArgs() {
  console.log(arguments);  // Arguments 객체
}
showArgs(1, 2, 3);  // Arguments [1, 2, 3]

// 화살표 함수에서는 rest 파라미터 사용
const showArgsArrow = (...args) => {
  console.log(args);  // 일반 배열 [1, 2, 3]
};
showArgsArrow(1, 2, 3);

📝 핵심 요약

10강에서 배운 내용을 정리해 보겠습니다.

항목	일반 함수	화살표 함수
문법	function(a) { return a; }	a => a
this 바인딩	호출 방식에 따라 동적으로 결정	선언된 위치의 바깥 스코프 this 사용
arguments 객체	있음	없음 (rest 파라미터 사용)
생성자 사용	가능 (new 키워드)	불가
적합한 용도	객체 메서드, 생성자	콜백, 일회성 함수, 배열 메서드

• 한 줄 반환: => 뒤에 바로 표현식 (중괄호·return 생략)
• 매개변수 1개: 괄호 생략 가능
• 객체 반환 시: 반드시 ({ })로 감싸기

다음 강인 11강 — 배열 기초에서는 여러 개의 값을 순서대로 저장하는 배열 자료 구조를 배웁니다. 배열을 만들고, 값을 추가하고, 제거하고, 순회하는 방법을 익히면 지금까지 배운 모든 내용이 한데 결합되어 훨씬 풍부한 프로그램을 만들 수 있게 됩니다!