12장. 함수 (1)

참고: 이웅모 《모던 자바스크립트 Deep Dive》 12장

한 줄 요약

함수는 일급 객체라서 값처럼 전달·반환할 수 있고, 선언 방식(선언문/표현식/화살표)과 호출 방식에 따라 호이스팅·this·인자가 달라진다.

핵심 개념

주제	요약
정의 방식	함수 선언문, 함수 표현식, 화살표 함수 (Function 생성자는 비권장)
호출	()로 실행. 부족 인수는 undefined, 초과는 무시(또는 arguments)
반환	return 값. 없으면 undefined
일급 객체	변수에 할당, 인자로 전달, 반환 가능 → 콜백·고차 함수의 기반
형태	IIFE, 재귀, 중첩, 콜백

내가 이해한 동작 원리

함수 선언문은 스코프 전체에서 호이스팅되어 만들기 전에도 호출할 수 있는 것처럼 보인다. 함수 표현식은 변수 호이스팅 규칙을 따르므로 const f = function(){}는 TDZ 때문에 선언 전 호출이 에러다.

매개변수로 객체를 넘기면 참조가 전달되어 함수 안에서 프로퍼티를 바꾸면 바깥 상태가 변한다. 원시만 다루거나 새 객체를 반환하면 부작용을 줄일 수 있다.

화살표 함수는 짧은 콜백에 강하지만, 자체 this/arguments 동작이 일반 함수와 다르다. IIFE는 예전 모듈 패턴·스코프 격리에 쓰였고, 지금은 블록 + 모듈이 대체하는 경우가 많다.

짧은 예제 코드

console.log(add(2, 3)); // 5 — 선언문 호이스팅
function add(a, b) {
  return a + b;
}

const mul = function (a, b) {
  return a * b;
};

const double = (n) => n * 2;

function apply(n, fn) {
  return fn(n);
}
console.log(apply(10, double));

(() => {
  const secret = 1;
  console.log('iife', secret);
})();

function rename(user) {
  user.name = 'kim';
}
const u = { name: 'minsub' };
rename(u);
console.log(u.name); // kim

헷갈리기 쉬운 포인트 / 함정

선언문 vs 표현식 호이스팅 차이.
return 다음 줄 값 → ASI로 undefined.
화살표 함수를 메서드로 쓰면 this가 기대한 객체가 아닐 수 있다.
순수 함수를 지향하되 DOM·난수·현재시각이 들어가면 순수가 아님을 인지.

다음 장으로 이어지는 한 줄

함수와 변수가 어디까지 보이는지 — 스코프로 연결된다.