함수 선언식과 함수 표현식은 언제 호출할 수 있을까
빠른 답
- 함수 선언식은 실행 전 평가 단계에서 함수 객체까지 준비되어, 선언 위치보다 앞에서도 호출할 수 있습니다.
- 함수 표현식은 변수에 함수 값이 할당된 뒤에 호출할 수 있습니다.
const와let함수 표현식은 초기화 전 접근 시 TDZ 때문에ReferenceError가 발생합니다.- 공통 유틸 함수는 선언식이 읽기 쉽고, 콜백·조건부 할당·함수 조합에는 표현식이 잘 맞는 경우가 많습니다.
목차
한눈에 비교
시간 흐름으로 이해하기
함수 선언식과 함수 표현식의 차이는 단순히 “호이스팅된다, 안 된다”로만 설명하면 조금 흐려집니다. 관찰 가능한 차이는 이름이 언제 존재하는지, 그 이름이 어떤 값을 가리키는지, 그리고 접근했을 때 어떤 오류가 나는지에서 드러납니다.
왜 헷갈리는가
JavaScript에서 함수는 실행 가능한 코드 묶음이면서 동시에 값입니다. 이 특징 때문에 두 문법은 결과적으로 비슷해 보입니다.
function add(a, b) {
return a + b;
}
const multiply = function (a, b) {
return a * b;
};
첫 번째는 함수 선언식입니다. 더 엄밀히 말하면 함수 선언문에 가깝습니다. function add(...) 자체가 하나의 선언입니다.
두 번째는 함수 표현식입니다. 오른쪽의 function (a, b) { ... }가 함수 값을 만들고, 그 값이 multiply라는 상수에 할당됩니다.
둘 다 호출 가능한 함수를 만들지만, 런타임이 준비하는 순서가 다릅니다. 함수 선언식은 평가 단계에서 함수 객체까지 준비됩니다. 함수 표현식은 변수 이름이 먼저 준비될 수는 있어도, 함수 값 자체는 할당문이 실행될 때 만들어집니다.
호이스팅되지 않는다는 말의 함정
함수 표현식을 설명할 때 “호이스팅되지 않는다”고 말하곤 합니다. 입문 단계에서는 도움이 되지만, 정확히는 변수 선언 방식에 따라 다르게 보아야 합니다. 함수 표현식에서 끌어올려지지 않는 것은 함수 값의 할당입니다.
다음 코드는 선언식과 var 함수 표현식의 초기 상태 차이를 보여줍니다.
console.log(typeof declared);
console.log(typeof expressed);
function declared() {
return "declaration";
}
var expressed = function () {
return "expression";
};
실행 결과는 다음과 같습니다.
function
undefined
declared는 실행 전에 함수 객체로 초기화되어 있으므로 typeof declared는 "function"입니다. 반면 expressed는 var로 선언되어 이름은 준비되었지만, 아직 오른쪽 함수 표현식이 할당되지 않았습니다. 그래서 값은 undefined입니다.
따라서 함수 표현식이 “아예 존재하지 않는다”고 이해하면 디버깅할 때 혼란이 생깁니다. 변수 이름이 존재하는지와 그 변수 안에 호출 가능한 함수 값이 들어 있는지는 다른 문제입니다.
호출 가능 시점과 실제 출력
선언 위치보다 앞에서 호출해보면 차이가 바로 드러납니다. 함수 선언식은 호출문이 위에 있어도 실행됩니다.
console.log(add(2, 3));
function add(a, b) {
return a + b;
}
출력은 다음과 같습니다.
5
이번에는 const 함수 표현식을 할당 전에 호출해보겠습니다.
console.log(multiply(2, 3));
const multiply = function (a, b) {
return a * b;
};
실행하면 다음과 비슷한 오류가 발생합니다.
ReferenceError: Cannot access 'multiply' before initialization
이 메시지에서 눈여겨볼 부분은 “함수가 아니다”가 아니라 “초기화 전에 접근했다”는 내용입니다. multiply라는 바인딩은 스코프에 등록되어 있지만, const multiply = ... 문장이 실행되기 전까지는 접근할 수 없는 TDZ 상태입니다.
할당문 이후에는 정상적으로 호출됩니다.
const multiply = function (a, b) {
return a * b;
};
console.log(multiply(2, 3));
6
함수 표현식의 호출 가능 여부는 함수 문법 자체보다 변수에 어떤 값이 들어 있는지에 좌우됩니다. 값이 함수이면 호출할 수 있고, 아직 초기화되지 않았거나 undefined이면 오류가 납니다.
var, let, const의 오류 차이
함수 표현식은 함께 쓰는 변수 선언 키워드에 따라 초기화 전 동작이 달라집니다. 이 차이는 실제 오류 로그를 볼 때 중요합니다.
var는 평가 단계에서 undefined로 초기화됩니다. 그래서 할당 전에 읽을 수는 있지만, 호출하려 하면 undefined를 함수처럼 호출하는 상태가 됩니다.
console.log(divide);
console.log(divide(10, 2));
var divide = function (a, b) {
return a / b;
};
실행 결과는 다음 흐름입니다.
undefined
TypeError: divide is not a function
반면 let과 const는 선언문이 실행되기 전까지 읽을 수 없습니다.
console.log(subtract);
const subtract = function (a, b) {
return a - b;
};
ReferenceError: Cannot access 'subtract' before initialization
두 오류는 의미가 다릅니다. ReferenceError는 아직 사용할 수 없는 바인딩에 접근했다는 뜻에 가깝습니다. TypeError는 값을 읽기는 했지만, 그 값이 호출 가능한 함수가 아니라는 뜻에 가깝습니다.
이 차이를 알면 “왜 어떤 코드는 not defined처럼 보이고, 어떤 코드는 is not a function으로 보이는지”를 더 차분히 구분할 수 있습니다.
Node.js에서 직접 확인하기
간단한 파일을 만들어 실행하면 세 경우의 차이를 한 번에 볼 수 있습니다. 예를 들어 package.json에 다음 스크립트를 둘 수 있습니다.
{
"scripts": {
"check:functions": "node function-order.js"
}
}
function-order.js에는 선언식, var 표현식, const 표현식을 나란히 둡니다.
console.log("declaration:", add(1, 2));
try {
console.log("var expression:", multiply(2, 3));
} catch (error) {
console.log("var expression error:", error.name, error.message);
}
try {
console.log("const expression:", subtract(5, 2));
} catch (error) {
console.log("const expression error:", error.name, error.message);
}
function add(a, b) {
return a + b;
}
var multiply = function (a, b) {
return a * b;
};
const subtract = function (a, b) {
return a - b;
};
실행 명령과 출력 예시는 다음과 같습니다.
npm run check:functions
declaration: 3
var expression error: TypeError multiply is not a function
const expression error: ReferenceError Cannot access 'subtract' before initialization
여기서 세 함수의 본문은 모두 단순한 산술 연산입니다. 차이를 만드는 것은 함수 본문이 아니라 호출 시점의 이름 상태입니다. add는 이미 함수이고, multiply는 아직 undefined이며, subtract는 아직 접근할 수 없는 초기화 전 상태입니다.
이름 있는 함수 표현식
함수 표현식은 반드시 익명 함수일 필요는 없습니다. 이름을 붙일 수도 있습니다.
const factorial = function inner(n) {
if (n <= 1) return 1;
return n * inner(n - 1);
};
console.log(factorial(4));
console.log(typeof inner);
출력은 다음과 같습니다.
24
undefined
inner는 함수 내부에서 자기 자신을 가리키는 이름으로 사용할 수 있습니다. 하지만 바깥 스코프에 생긴 변수 이름은 아닙니다. 바깥에서는 factorial로 호출해야 합니다.
이 방식은 재귀 함수나 스택 트레이스 가독성이 필요한 경우에 도움이 됩니다. 다만 일반적인 코드에서는 변수 이름과 내부 함수 이름이 다르면 읽는 사람이 한 번 더 해석해야 하므로, 필요한 상황에서만 쓰는 편이 낫습니다.
블록 스코프에서의 주의점
“함수 선언식은 어디서나 호출 가능하다”는 설명은 해당 선언이 속한 스코프 안에서 성립합니다. 특히 블록 안의 함수 선언은 바깥에서 접근할 수 있다고 기대하지 않는 편이 안전합니다.
"use strict";
if (true) {
function insideBlock() {
return "inside";
}
console.log(insideBlock());
}
console.log(insideBlock());
실행 결과는 다음과 같습니다.
inside
ReferenceError: insideBlock is not defined
블록 내부에서는 insideBlock을 호출할 수 있지만, 블록 바깥에서는 이름을 찾을 수 없습니다. 그래서 조건문이나 반복문 안에서 함수 선언을 만들고 외부 호출까지 기대하는 구조는 피하는 편이 읽기 쉽습니다.
조건에 따라 다른 함수를 선택해야 한다면 함수 표현식을 변수에 할당하는 쪽이 의도를 더 분명하게 드러냅니다.
코드 작성 기준
여러 곳에서 쓰는 순수 유틸 함수라면 함수 선언식이 잘 맞는 경우가 많습니다. 호출부를 위에 두고 구현을 아래에 둘 수 있어 파일의 큰 흐름을 먼저 읽기 쉽습니다.
const total = sum([1, 2, 3, 4]);
function sum(numbers) {
return numbers.reduce((acc, value) => acc + value, 0);
}
console.log(total);
반대로 런타임 조건에 따라 다른 함수를 선택하거나, 콜백으로 넘기거나, 객체 속성에 담아 조합하는 경우에는 함수 표현식이 어울립니다.
const formatPrice = function (amount) {
return `${amount.toLocaleString()}원`;
};
const render = function (value, formatter) {
return formatter(value);
};
console.log(render(12000, formatPrice));
함수 표현식은 함수가 값이라는 점을 코드에 직접 드러냅니다. 이벤트 핸들러, 배열 메서드 콜백, 전략 함수, 조건부 할당처럼 함수를 데이터처럼 다루는 코드에서 자주 보이는 이유도 여기에 있습니다.
면접 답변으로는 “함수 선언식은 평가 단계에서 초기화되어 먼저 호출할 수 있고, 함수 표현식은 할당 이후 호출할 수 있다” 정도가 출발점이 됩니다. 실제 코드에서는 한 가지를 더 보면 좋습니다. 이 함수가 스코프의 기본 구성 요소인지, 아니면 실행 흐름 중 만들어져 전달되는 값인지에 따라 더 읽기 쉬운 형태가 달라집니다.
원문 참고
https://www.maeil-mail.kr/question/68
댓글
댓글 쓰기