함수 기초

함수 — 재사용 가능한 코드 블록

함수는 특정 작업을 수행하는 코드를 묶어 이름을 붙인 것입니다. 자바스크립트에서 함수는 일급 객체(First-class Object)입니다. 변수에 담고, 인수로 전달하고, 반환값으로 쓸 수 있습니다. 이 특성이 함수형 프로그래밍의 근간입니다.

함수 선언식 vs 함수 표현식

// 함수 선언식 (Function Declaration)
function add(a, b) {
  return a + b;
}

// 함수 표현식 (Function Expression)
const multiply = function(a, b) {
  return a * b;
};

// 핵심 차이: 호이스팅
console.log(add(2, 3));      // 5 — 선언 전 호출 가능 (호이스팅)
console.log(multiply(2, 3)); // 에러 — 표현식은 호이스팅 안 됨

// 이름 있는 함수 표현식 (재귀에 유용)
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

매개변수(Parameter)와 인수(Argument)

function greet(name, greeting) { // name, greeting이 매개변수
  return `${greeting}, ${name}!`;
}
greet("Kim", "안녕하세요"); // "Kim", "안녕하세요"가 인수

// 인수 부족 → undefined
greet("Kim"); // "undefined, Kim!" → greeting이 undefined

// 인수 초과 → 무시됨 (arguments 객체로는 접근 가능)
greet("Kim", "Hello", "extra"); // "extra" 무시

매개변수 기본값 (Default Parameter)

// ES6 이전 방식
function greet(name, greeting) {
  greeting = greeting || "안녕하세요"; // || 방식 (0, "" 문제)
  return `${greeting}, ${name}!`;
}

// ES6 기본값
function greet(name, greeting = "안녕하세요") {
  return `${greeting}, ${name}!`;
}
greet("Kim");            // "안녕하세요, Kim!"
greet("Kim", "Hello");   // "Hello, Kim!"
greet("Kim", undefined); // "안녕하세요, Kim!" (undefined도 기본값 사용)
greet("Kim", null);      // "null, Kim!" (null은 기본값 무시!)

// 기본값으로 함수 호출도 가능
function createId(prefix = generatePrefix()) { ... }

rest 파라미터 — 가변 인수

// 나머지 인수를 배열로 수집
function sum(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3);        // 6
sum(1, 2, 3, 4, 5);  // 15

// 일반 파라미터와 함께 사용 (rest는 반드시 마지막)
function log(level, ...messages) {
  console.log(`[${level}]`, ...messages);
}
log("INFO", "서버 시작", "포트:", 3000);
// [INFO] 서버 시작 포트: 3000

// arguments 객체 (구식 방법, 화살표 함수에서 사용 불가)
function oldStyle() {
  console.log(arguments); // Arguments [1, 2, 3, ...]
  // 배열이 아님! Array.from(arguments)로 변환 필요
}

반환값(Return)

// return 없으면 undefined 반환
function noReturn() {
  const x = 1 + 1;
}
console.log(noReturn()); // undefined

// 여러 값 반환 — 배열 또는 객체 활용
function getMinMax(arr) {
  return {
    min: Math.min(...arr),
    max: Math.max(...arr)
  };
}
const { min, max } = getMinMax([3, 1, 4, 1, 5, 9]);
console.log(min, max); // 1, 9

// 조기 반환
function divide(a, b) {
  if (b === 0) return null; // 조기 반환으로 방어
  return a / b;
}

순수 함수 (Pure Function)

같은 입력에 항상 같은 출력을 내고, 외부 상태를 바꾸지 않는 함수입니다. 테스트하기 쉽고 예측 가능합니다.

// 순수 함수 ✅
function add(a, b) {
  return a + b; // 외부 상태 변경 없음, 동일 입력 → 동일 출력
}

// 순수 함수가 아님 ❌ — 외부 상태에 의존
let count = 0;
function increment() {
  count++; // 외부 변수 변경 (Side Effect)
  return count;
}

// 순수 함수가 아님 ❌ — 랜덤/날짜 등 외부 요소
function getTimestamp() {
  return Date.now(); // 같은 입력이지만 출력이 달라짐
}

함수를 값으로 — 일급 객체

// 변수에 저장
const sayHello = function() { return "Hello!"; };

// 다른 함수에 인수로 전달 (콜백)
function runTwice(fn) {
  fn();
  fn();
}
runTwice(() => console.log("실행!")); // "실행!" 두 번

// 함수에서 함수 반환
function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}
const double = multiplier(2);
const triple = multiplier(3);
double(5);  // 10
triple(5);  // 15

// 배열에 함수 저장
const operations = [
  (x) => x + 1,
  (x) => x * 2,
  (x) => x ** 2,
];
operations.forEach(fn => console.log(fn(3))); // 4, 6, 9

함수 설계 원칙

// 1. 한 가지 일만 하기 (Single Responsibility)
// 나쁨: 여러 일을 한 함수에
function validateAndSaveAndNotify(user) { ... }

// 좋음: 각각 분리
function validateUser(user) { ... }
function saveUser(user) { ... }
function notifyUser(userId) { ... }

// 2. 10~20줄 이내로 유지
// 함수가 길어지면 분리를 고려

// 3. 함수명은 동사로 시작
// getUser, calculateTotal, validateEmail, handleClick

관련 검색어  ·  자바스크립트 함수, 함수 선언식 표현식 차이, rest 파라미터, 매개변수 기본값, 순수 함수란, 일급 객체