함수 표현식

함수를 값처럼 변수에 할당하는 방식입니다. 함수 선언문과 달리 호이스팅되지 않습니다.

함수 선언문 vs 함수 표현식

// 함수 선언문
function greet(name) {
    return `Hello, ${name}`;
}

// 함수 표현식
const greet = function(name) {
    return `Hello, ${name}`;
};

호이스팅 차이

// 함수 선언문 - 호이스팅 O
sayHello();  // "Hello" (정상 동작)

function sayHello() {
    console.log("Hello");
}

// 함수 표현식 - 호이스팅 X
sayBye();  // ReferenceError

const sayBye = function() {
    console.log("Bye");
};

함수 표현식 종류

익명 함수 표현식

const add = function(a, b) {
    return a + b;
};

기명 함수 표현식

const factorial = function fact(n) {
    if (n <= 1) return 1;
    return n * fact(n - 1);  // 재귀 호출 시 내부 이름 사용
};

factorial(5);  // 120
fact(5);       // ReferenceError (외부에서 접근 불가)

화살표 함수 표현식

const add = (a, b) => a + b;

const greet = name => `Hello, ${name}`;

const process = () => {
    // 여러 줄
    return result;
};

함수 선언문 vs 함수 표현식

함수 표현식의 활용

콜백 함수

setTimeout(function() {
    console.log("1초 후");
}, 1000);

[1, 2, 3].map(function(x) {
    return x * 2;
});

조건부 함수 정의

let greet;

if (language === 'ko') {
    greet = function(name) {
        return `안녕하세요, ${name}님`;
    };
} else {
    greet = function(name) {
        return `Hello, ${name}`;
    };
}

즉시 실행 함수

const result = (function() {
    const secret = "비밀";
    return secret.length;
})();

고차 함수 반환

const createMultiplier = function(n) {
    return function(x) {
        return x * n;
    };
};

const double = createMultiplier(2);
double(5);  // 10

언제 뭘 쓰나?

// 일반적인 함수 → 선언문
function calculateTotal(items) { ... }

// 콜백, 변수 할당 → 표현식
const handleClick = function() { ... };
const handleClick = () => { ... };