JavaScript/함수/Lesson 08
화살표 함수 — *짧고 강력한* 문법
30분·theory
이 챕터
2/4
화살표 함수 — *짧고 강력한* 문법
🎯 이 lesson 을 읽고 나면
이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.
- ▸✅ arrow function 의 this 바인딩 (lexical scope)
- ▸✅ function 키워드를 반드시 써야 하는 경우
- ▸✅ implicit return + 한 줄 표현
학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.
화살표 함수 5가지 문법
핵심 한 줄
화살표 함수 = ES6 (2015) 부터 추가된 짧은 함수 문법. 단순한 함수 표현에서는 훨씬 깔끔 합니다.
5가지 문법 변형
마지막 함정 — 객체 리턴 시 반드시 괄호 로 감쌉니다. 안 그러면 블록 으로 오해.
화살표가 못 하는 것
가장 큰 가치 — this 묶기
옛 JS 에서 가장 짜증나던 함정:
이 패턴 하나 때문에 React·Vue 같은 모던 프레임워크가 화살표 함수를 적극 사용.
콜백에서의 깔끔함
함수형 프로그래밍 패턴이 훨씬 읽기 좋아짐. 이게 모던 JS 가 간결한 이유.
한 번 정리
- ▸화살표 함수 = 짧은 함수 표현
- ▸자체 this 없음 — 주변 사용 (대부분 원하는 동작)
- ▸클래스 메서드·생성자엔 일반 함수
- ▸콜백·체이닝엔 화살표
⚡ 직접 해보기 — 화살표 함수 함정 (객체 리턴)
객체 리턴 시 ( ) 로 감싸야 하는 이유. 안 감싸면 undefined!
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가
🤖 AI 에게 이렇게 요청해보세요
이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.
- ▸"이 function 선언을 arrow function 으로 바꾸고 this 바인딩 차이 점검해줘"
- ▸"이 함수를 순수 함수로 리팩토링 (부수효과 제거) 해줘"
- ▸"이 함수에 적절한 매개변수 기본값 + 구조분해 적용해줘"
왜 이게 토큰을 줄이나
개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.