함수 — 선언·표현식·화살표

함수는 코드의 기본 단위입니다. JS 에서 함수를 만드는 방법은 크게 3가지 — 함수 선언문, 함수 표현식, 화살표 함수. 셋은 거의 같은 일을 하지만 미묘하게 다릅니다. 8편은 셋의 차이와 매개변수의 모든 변형(기본 인자·rest·구조 분해)을 정리합니다.

함수 선언문 — 호이스팅 되는 클래식

// 어디서든 호출 가능 — 호이스팅
greet("준성");

function greet(name) {
  console.log(`안녕, ${name}!`);
  return `Hi, ${name}`;
}

가장 전통적인 형태. 파일 어느 위치에서 선언하든 최상단으로 끌어올려진 것처럼 동작합니다 — 그래서 선언 전 호출도 됩니다. 가독성을 위해 보통은 사용처보다 먼저 두지만요.

함수 표현식 — 변수에 담는 함수

// 변수 선언만 호이스팅 (값은 안 됨) — 선언 전 호출 불가
// greet("준성");   // ❌ ReferenceError

const greet = function (name) {
  return `Hi, ${name}`;
};

// 이름 있는 함수 표현식 (디버깅 스택에 표시)
const greet = function greetImpl(name) { ... };

const 와 함께 쓰면 "함수를 재할당 못함" 이 안전장치가 됩니다. 함수 안에서 자기 자신을 부르려면(재귀) 이름이 필요한 경우가 있어, 가끔 명명 함수 표현식을 씁니다.

화살표 함수 — 가장 현대적인 형태

// 기본형
const greet = (name) => {
  return `Hi, ${name}`;
};

// 한 표현식만 반환 — 중괄호와 return 생략
const greet = (name) => `Hi, ${name}`;

// 매개변수 1개 — 괄호도 생략 (취향)
const greet = name => `Hi, ${name}`;

// 매개변수 없음 — 빈 괄호 필수
const now = () => Date.now();

// 객체 리터럴 반환 — 괄호로 감싸기 (블록과 구분)
const make = name => ({ name, createdAt: Date.now() });

매개변수의 모든 변형

기본값

function greet(name, greeting = "안녕") {
  return `${greeting}, ${name}!`;
}
greet("준성");                   // "안녕, 준성!"
greet("준성", "헬로");           // "헬로, 준성!"

// 기본값 표현식도 OK
function log(msg, ts = Date.now()) { ... }

rest 파라미터 — 가변 인자

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2);              // 3
sum(1, 2, 3, 4, 5);     // 15

// 다른 매개변수와 함께 (rest 는 항상 마지막)
function tag(first, ...rest) {
  console.log(first);    // 첫 인자
  console.log(rest);     // 나머지 배열
}
tag("a", "b", "c", "d");

구조 분해 매개변수 — 객체로 받기

// 매개변수가 4개 넘어가면 객체로 받는 게 깔끔
function createUser({ name, age, email, role = "user" }) {
  return { name, age, email, role };
}

createUser({ name: "준성", age: 39, email: "[email protected]" });
// role 은 기본값 "user"

// 호출 시 순서 신경 안 써도 됨
createUser({ email: "[email protected]", name: "준성", age: 39 });

return — 명시 vs 암묵

// 명시
function add(a, b) {
  return a + b;
}

// 화살표 한 표현식 — return 암묵
const add = (a, b) => a + b;

// return 없으면 undefined 반환
function silentLog(x) {
  console.log(x);
  // return 없음 → undefined
}
const r = silentLog(5);   // r = undefined

3가지 형태 — 한 표