자바스크립트 함수 호출(Invocation)

자바스크립트 함수 내의 코드는, “무언가(something)”가 호출할 때, 실행됩니다.


자바스크립트 함수 호출(Invoking)

함수가 정의될 때 함수 내의 코드는, 함수가 정의될(defined) 때, 실행되지 않습니다.

함수 내부의 코드는, 함수가 호출될(invoked) 때, 실행 됩니다.

invoke a function” 대신 “call a function“이라는 용어를 사용하는 것이 일반적입니다.

“call upon a function”, “start a function” 또는 “execute a function”이라고 말하는 것이 일반적입니다.

이 튜토리얼에서 invoke를 사용합니다. 자바스크립트 함수는 호출되지 않고(without being called) 호출되기(be invoked) 때문입니다.


함수를 함수(as a Function)로 호출

Example

전역 함수(myFunction)는 인수(arguments) (a, b)의 곱을 반환합니다:

20

위의 함수는 어떤 객체(object)에도 속하지 않습니다. 그러나 자바스크립트에는 항상 기본 전역 개체(default global object)가 있습니다.

HTML에서, 기본 전역 객체(default global object)는 HTML 페이지 자체(page itself)이므로, 위의 함수는 HTML 페이지에 “속합니다(belongs)”.

브라우저에서, 페이지 객체(page object)는 브라우저 창(browser window)입니다. 위의 함수는 자동으로 윈도우 함수(window function)가 됩니다.

myFunction()과 window.myFunction()은 같은 함수입니다:

Example

20


this 키워드

자바스크립에서 this는 현재 코드를 “소유(owns)하고 있는 객체(object)입니다.

this의 값은, 함수에 사용될 때, 함수를 “소유(owns)하고 있는 객체(object)입니다.


전역 객체 (Global Object)

함수가 owner object없이 호출될(called) 때, this의 값은 전역 변수(global object)가 됩니다.

웹 브라우저에서 전역 객체는 브라우저 창(browser window)입니다.

이 예제는 윈도우 객체(window object)를 this의 값으로 반환합니다:

Example

HTML에서 this의 값은, 전역 함수(global function)에서, 윈도우 객체(window object)입니다.

[object Window]

함수를 전역 함수에서 호출(Invoking)하면, this의 값은 전역 객체(global object)가 됩니다.
윈도우 객체(window object)를 변수(variable)로 사용하면, 프로그램이 쉽게 다운될 수 있습니다.


함수(Function)를 메소드(Method)로 호출(Invoking)

자바스크립트에서 함수(functions)를 객체 메소드(object methods)로 정의할 수 있습니다.

다음 예제는, 두 개의 속성(firstNamelastName)으로, 객체 (myObject)를 만듭니다:

Example

myObject.fullName()는 John Doe를 반환합니다:

John Doe

The fullName 메소드는 함수입니다. 함수는 객체에 속합니다. myObject는 이 함수의 오너(owner)입니다.

this는 자바스크립트 코드를 “소유(owns)”하는 객체입니다. 이 경우 this의 값은 myObject입니다.

테스트해 보십시요! fullName 메소드를 변경해서, this의 값을 반환해 보십시오:

Example

this의 값은, 객체 메소드(object method)에서, owner object입니다.

[object Object]


함수 생성자(Function Constructor)로 함수(Function) 호출하기)

함수 호출(function invocation)이 new 키워드보다 앞에 오면, 이것은 생성자 호출(constructor invocation)입니다.

이것은 새 함수(new function)을 만드는 것처럼 보이지만, 자바스크립트 함수는 객체(objects)이기 때문에, 실제로 새 객체(new object)를 만듭니다:

Example

이 예제에서 myFunction은 함수 생성자(function constructor)입니다:

John

생성자 호출(constructor invocation)은 새 객체(new object)를 만듭니다. 새 객체는 생성자의 속성과 메소드(properties and methods)를 상속받습니다.

출처: JavaScript Function Invocation

댓글 남기기