From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../reference/operators/function/index.html | 154 +++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/ko/web/javascript/reference/operators/function/index.html (limited to 'files/ko/web/javascript/reference/operators/function/index.html') diff --git a/files/ko/web/javascript/reference/operators/function/index.html b/files/ko/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..5f4977bfc7 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/function/index.html @@ -0,0 +1,154 @@ +--- +title: 함수 표현식 +slug: Web/JavaScript/Reference/Operators/function +tags: + - Function + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/function +--- +
{{jsSidebar("Operators")}}
+ +

function 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.

+ +

또한 Function 생성자와 함수 선언(function declaration)을 이용해 함수를 정의할 수도 있습니다.  

+ +
{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}
+ + + +

구문

+ +
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 끌어올리기

+ +

자바스크립트에서 함수 표현식은 {{jsxref("Statements/function", "함수 선언", "#Function_declaration_hoisting")}}과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다.

+ +
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');
+};
+ +

유명(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); // true
+console.log(typeof baz); // undefined
+console.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!')
+})
+ +

 

+ +

 

+ +

스펙

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
스펙상태설명
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}초기 정의. JavaScript 1.5에서 구현됨.
+ +

브라우저 호환성

+ +

{{Compat("javascript.operators.function")}}

+ +

참조

+ + -- cgit v1.2.3-54-g00ecf