HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
View in English Always switch to English
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
function 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.
function
또한 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 (즉시 호출되는 함수 표현식)로 사용될 수 있습니다. 더 자세한 정보는 함수 장 참조.
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 function var notHoisted = function () { console.log("bar"); };
함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. 이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다. 이로써 비표준 arguments.callee 속성을 사용하는 것을 피할 수도 있습니다.
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); // true console.log(typeof baz); // undefined console.log(bar === baz); // false (errors because baz == undefined)
다음 예제는 이름 없는 함수를 정의하고 그 함수를 x에 할당합니다. 함수는 인수의 제곱을 반환합니다:
x
var x = function (y) { return y * y; };
callback으로 더 자주 사용됩니다:
button.addEventListener("click", function (event) { console.log("button is clicked!"); });
Enable JavaScript to view this browser compatibility table.
Arrow functions
Functions and function scope
Function
function statement
function* statement
function* expression
GeneratorFunction
async function
async function expression