C
JavaScript/함수/Lesson 08

화살표 함수 — *짧고 강력한* 문법

30분·theory
이 챕터
2/4

화살표 함수 — *짧고 강력한* 문법

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ✅ arrow function 의 this 바인딩 (lexical scope)
  • ✅ function 키워드를 반드시 써야 하는 경우
  • ✅ implicit return + 한 줄 표현

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

화살표 함수 5가지 문법

핵심 한 줄

화살표 함수 = ES6 (2015) 부터 추가된 짧은 함수 문법. 단순한 함수 표현에서는 훨씬 깔끔 합니다.

5가지 문법 변형

javascript
// 1️⃣ 인자 1개 — 괄호 생략 가능 (두 줄은 완전히 동일)
const square   = x => x * x;
const squareP  = (x) => x * x;
console.log(square(4));    // 16
console.log(squareP(4));   // 16

// 2️⃣ 인자 0개 또는 2개 이상 — 괄호 필수
const greet = () => "hi";
const add   = (a, b) => a + b;
console.log(greet());       // "hi"
console.log(add(2, 3));     // 5

// 3️⃣ 표현식 한 줄 — return 자동
const doubleShort = x => x * 2;
console.log(doubleShort(5));   // 10

// 4️⃣ 블록 — { } 쓰면 return 명시 필수
const doubleBlock = x => {
    return x * 2;
};
console.log(doubleBlock(5));   // 10

// 5️⃣ 객체 리턴 — *괄호로 감싸기* 가 핵심!
const makeOk  = () => ({ name: "홍" });   // ✅ ( ) 로 감쌈 → 객체 반환
const makeBad = () => { name: "홍" };     // ❌ { } 가 블록으로 해석됨 → undefined

console.log(makeOk());    // { name: "홍" }
console.log(makeBad());   // undefined   ← 🙀 객체 아닌 "빈 블록" 으로 인식

마지막 함정 — 객체 리턴 시 반드시 괄호 로 감쌉니다. 안 그러면 블록 으로 오해.

화살표가 못 하는

javascript
// 1. this 자체 보유 X
const obj = {
    name: "홍",
    greet: () => console.log(this.name)   // undefined (주변 this)
};

// 2. 생성자 X
const Foo = () => {};
new Foo();   // TypeError

// 3. arguments X
const fn = () => console.log(arguments);   // ReferenceError
// 대신: const fn = (...args) => console.log(args);

가장 큰 가치 — this 묶기

옛 JS 에서 가장 짜증나던 함정:

javascript
// ❌ 옛 방식 — setTimeout 안의 this 가 다름
class Counter {
    constructor() {
        this.count = 0;
    }
    start() {
        setTimeout(function() {
            this.count++;     // this = window/undefined
        }, 1000);
    }
}

// ✅ 화살표 — this 가 *Counter 인스턴스* 그대로
class Counter {
    constructor() {
        this.count = 0;
    }
    start() {
        setTimeout(() => {
            this.count++;     // this = Counter 인스턴스 ✅
        }, 1000);
    }
}

이 패턴 하나 때문에 React·Vue 같은 모던 프레임워크가 화살표 함수를 적극 사용.

콜백에서의 깔끔함

javascript
// 옛 방식
const oldWay = [1, 2, 3].map(function(n) { return n * 2; });
console.log(oldWay);   // [2, 4, 6]

// 화살표 — 압도적으로 짧음 (같은 결과)
const newWay = [1, 2, 3].map(n => n * 2);
console.log(newWay);   // [2, 4, 6]

// 체이닝 — filter → map → sort
const users = [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 15 },
    { name: "Charlie", age: 22 }
];

const adultNames = users
    .filter(u => u.age >= 18)   // ① 성인만 (Alice, Charlie)
    .map(u => u.name)           // ② 이름만 뽑기
    .sort();                    // ③ 알파벳 순

console.log(adultNames);   // ["Alice", "Charlie"]

함수형 프로그래밍 패턴이 훨씬 읽기 좋아짐. 이게 모던 JS 가 간결한 이유.

한 번 정리

  • 화살표 함수 = 짧은 함수 표현
  • 자체 this 없음 — 주변 사용 (대부분 원하는 동작)
  • 클래스 메서드·생성자엔 일반 함수
  • 콜백·체이닝엔 화살표

⚡ 직접 해보기 — 화살표 함수 함정 (객체 리턴)

객체 리턴 시 ( ) 로 감싸야 하는 이유. 안 감싸면 undefined!
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가

🤖 AI 에게 이렇게 요청해보세요

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

  • "이 function 선언을 arrow function 으로 바꾸고 this 바인딩 차이 점검해줘"
  • "이 함수를 순수 함수로 리팩토링 (부수효과 제거) 해줘"
  • "이 함수에 적절한 매개변수 기본값 + 구조분해 적용해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

먼저 읽으면 좋은 개념: 함수 기초
다음 추천: 스코프와 클로저
화살표 함수 - JavaScript