JavaScript Function Definitions
자바스크립트 함수는 function 키워드로 선언합니다.
1. Function Declarations
아래 문법과 같이 함수를 선언 할 수 있습니다.
| function functionName(parameters) { code to be executed } | cs |
선언된 함수는 바로 실행되는 것이 아닙니다.
선언된 함수는 나중에 사용하기 위해 저장되거나, 나중에 실행되어 질 것입니다.
2. Function Expressions
함수는 식을 사용하여 선언 할 수도 있습니다.
1 | var x = function (a, b) {return a * b}; | cs
|
함수식이 변수에 저장되어 진 후에, 변수는 함수로 사용되어 집니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <body> <p>After a function has been stored in a variable, the variable can be used as a function:</p> <p id="demo"></p> <script> var x = function (a, b) {return a * b}; document.getElementById("demo").innerHTML = x(4, 3); </script> </body> </html> | cs |
위의 예제의 함수는 익명의 함수(anonymous function)이라고 합니다.
변수에 저장된 함수는 함수의 이름을 필요로 하지 않습니다. 변수 이름을 사용하여 호출 합니다.
3. The Function() Constructor
함수는 내장된 자바스크립트 함수 생성자인 function()을 호출하여 선언 할 수도 있습니다.
| var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); | cs |
| var myFunction = function (a, b) {return a * b}; var x = myFunction(4, 3); | cs |
4. Function Hoisting
끌어올림은 현재 범위에서 가장 상단으로 선언부를 올리는 기본적인 자바스크립트 행위 입니다.
끌어올림은 변수 선언과 함수 선언에 적용됩니다.
이러한 성질 때문에, 함수는 호출되기 전에 선언되어야 합니다.
| myFunction(5); function myFunction(y) { return y * y; } | cs |
식을 사용한 선언된 함수는 끌어올려 지지 않습니다.
5. Self-Invoking Functions
함수 식은 자가 호출(Self-Invoking)에 의해 만들어 집니다.
자가호출 식은 호출되는 거 없이 자동적으로 호출되어 집니다.
함수 식은 식이 ()로 구성되어 졌다면, 자동으로 실행되어 질 것입니다.
자가 호출 함수를 선언 할 수 없습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <body> <p>Functions can be invoked automatically without being called:</p> <p id="demo"></p> <script> (function () { document.getElementById("demo").innerHTML = "Hello! I called myself"; })(); </script> </body> </html> | cs |
6. Functions Can Be Used as Values
함수는 값으로 사용되어 질 수도 있습니다:
| function myFunction(a, b) { return a * b; } var x = myFunction(4, 3); | cs |
| function myFunction(a, b) { return a * b; } var x = myFunction(4, 3) * 2; | cs |
7. Functions are Objects
typeof 연산자는 함수를 위한 함수를 반환합니다.
함수는 속성과 메소드를 가지고 있습니다.
arguments.lengh 속성은 함수가 호출 되었을 때 받은 인자 값의 수를 반환합니다:
| function myFunction(a, b) { return arguments.length; } | cs |
toString() 메소드는 함수를 문자열로 반환합니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <body> <p>The toString() method returns the function as a string:</p> <p id="demo"></p> <script> function myFunction(a, b) { return a * b; } document.getElementById("demo").innerHTML = myFunction.toString(); </script> </body> </html> | cs |
