함수 표현식
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
function 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.
또한Function 생성자와함수 선언(function declaration)을 이용해 함수를 정의할 수도 있습니다.
시도해 보기
const getRectArea = function (width, height) { return width * height;};console.log(getRectArea(3, 4));// Expected output: 12구문
var myFunction = function [name]([param1[, param2[, ..., paramN]]]) { statements };ES2015에서화살표 함수(arrow functions)를 사용할 수도 있습니다.
매개변수
name함수 이름. 함수가 이름 없는(anonymous) 함수인 경우, 생략될 수 있음. 이 함수 이름은 함수의 몸통 내에서만 사용할 수 있습니다.
paramN함수로 전달되는 인수(argument) 의 이름.
statements함수 몸통을 구성하는 문(statement).
설명
함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은function 문 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로익명 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는IIFE (즉시 호출되는 함수 표현식)로 사용될 수 있습니다. 더 자세한 정보는함수 장 참조.
Function expression 끌어올리기
JavaScript에서 함수 표현식은함수 선언과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다.
console.log(notHoisted); // undefined//even the variable name is hoisted, the definition wasn't. so it's undefined.notHoisted(); // TypeError: notHoisted is not a functionvar notHoisted = function () { console.log("bar");};유명(named) 함수 표현식
함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다.이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다. 이로써 비표준arguments.callee 속성을 사용하는 것을 피할 수도 있습니다.
var math = { factit: function factorial(n) { console.log(n); if (n <= 1) return 1; return n * factorial(n - 1); },};math.factit(3); //3;2;1;함수가 할당된 변수는name 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는화살표 함수(arrow functions)에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다).
var foo = function () {};foo.name; // "foo"var foo2 = foo;foo2.name; // "foo"var bar = function baz() {};bar.name; // "baz"console.log(foo === foo2); // trueconsole.log(typeof baz); // undefinedconsole.log(bar === baz); // false (errors because baz == undefined)Examples
다음 예제는 이름 없는 함수를 정의하고 그 함수를x에 할당합니다. 함수는 인수의 제곱을 반환합니다:
var x = function (y) { return y * y;};callback으로 더 자주 사용됩니다:
button.addEventListener("click", function (event) { console.log("button is clicked!");});명세서
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-function-definitions |