notes

12장. 함수

2025-08-11수정 2026-09-267 min read

모던 JS Deep Dive — 함수 선언·호출·스코프와 일급 객체 핵심 정리.

Kim mr.

프론트엔드 · 기술 블로그

참고: 이웅모 《모던 자바스크립트 Deep Dive》 12장 · [MDN Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)

함수를 실행 버튼으로만 보다가 콜백으로 넘기는 순간 막혔다. 정의·호출·반환이 값으로 흐른다.

flowchart LR
  DEF[정의] --> FN[함수 객체]
  FN --> CALL[호출]
  CALL --> RET[반환값]
  FN --> PASS[인자/변수로 이동]

12.1–12.2 함수란 / 왜 쓰나

반복 제거, 의도 이름, 추상화. 긴 절차를 동사로.

12.3 함수 리터럴

함수도 값. 변수에 담김.

12.4 함수 정의

선언문

function foo() {} — 호이스팅되어 선언 전 호출 가능(같은 스코프).

표현식

const foo = function() {} — 할당 전 호출 불가.

생성 시점 / 호이스팅

선언문은 평가 단계에 함수 객체 생성. 표현식은 실행 흐름이 닿을 때.

Function 생성자

스코프·성능 이슈. 피한다.

화살표

렉시컬 this. 콜백에 강함(26·22).

console.log(add(2, 3));
function add(a, b) { return a + b; }

const sub = (a, b) => a - b;

12.5 함수 호출

매개변수=지역 변수. 인수 부족→undefined, 초과→ignore(또는 rest). return 없으면 undefined.

참조와 외부 상태

객체 인자 변이 주의(11).

12.6–12.7 다양한 형태

IIFE, 재귀, 중첩, 콜백, 순수/비순수.

(function () {
  const secret = 1;
})();

[1, 2, 3].map((n) => n * 2);

예제

function once(fn) {
  let done = false;
  let result;
  return function (...args) {
    if (!done) {
      done = true;
      result = fn.apply(this, args);
    }
    return result;
  };
}

헷갈리던 장면 / 함정

선언/표현식 호이스팅 혼동
화살표 메서드
arguments 의존
과한 부수효과

표

질문 → 자답

Q. 언제 화살표? A. 콜백·렉시컬 this. 메서드·생성자는 일반/축약.

Q. 순수함수만? A. I/O는 비순수 필요. 경계를 그린다.

웹 보강 메모

MDN Functions guide. 콜백 hell → Promise/async(45–46).

실무로 바로

작은 함수·좋은 이름
옵션 객체
순수 기본, 변이 명시
테스트하기 쉬운 단위

여기서 잠깐 💁‍♂️

이후 스코프·this·클로저가 함수 위에 쌓인다.

연습·복습 체크리스트

[ ] 이 장 핵심 표를 백지에 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 관련 페이지 북마크
[ ] 실무 코드에서 같은 패턴 검색·리팩터 후보 표시
[ ] 앞뒤 장과 한 줄로 연결해 보기

일기 보강

처음엔 용어가 추상적으로 들렸다. 책을 덮고 한 줄 정의를 내 말로 다시 쓰고, 예제를 최소 세 개 쳐 보니 문제 유형이 보이기 시작했다. “외운 문장”이 아니라 “다시 설명 가능한 문장”이 남을 때까지 표를 줄였다 늘렸다. 원문 복붙 없이 왜 이렇게 동작하나만 남겼다.