빌트 인 Function 객체

JS의 함수를 사용하는 방법은 크게 3가지로 나누어진다.

1. Function 객체의 생성자를 호출하여 함수 객체를 생성한 뒤 함수를 사용
2. 함수 선언문을 사용하여 함수를 사용하는 경우 (일반적인 프로그래밍 언어의 함수 선언과 동일)
3. 함수 표현 문을 사용하여 함수를 사용하는 경우 (함수 리터럴 방식으로 작성)

 

함수 리터럴 이란?

리터럴이란 프로그램의 소스코드 안에서 사용자가 직접 값을 지정하는 방법 또는 값 그 자체를 의미한다. 즉 변수나 계산을 통해 얻어지는 값이 아닌 소스코드로 직접 입력(타이핑) 된 데이터 그 자체를 의미한다.

123	숫자 리터럴
"ABC"	문자(열) 리터럴
{1 : "apple"}	객체 리터럴
function (a, b) { return a + b}	함수 리터럴

EX ) 123 (숫자 리터럴), "ABC" (문자열 리터럴), {1: "A"} (객체 리터럴), function (a, b) {a + b} (함수 리터럴); 

즉 메모리 공간 (변수) 안에 들어가는 값이 리터럴인 것이다.  

JS에서 함수는 하나의 객체이다. 즉 빌트인 된 Function이라는 객체의 생성자를 통해 생성되는 인스턴스라고 볼 수 있으며 이는 즉 변수에 값(리터럴)으로써 할당하는 형태로써 사용할 수 있다는 것을 나타낸다. 위의 자료와 같이 value_2라는 변수의 값으로 a와 b라는 파라미터의 값을 더해주는 소스코드를 값으로써 할당한 것이다.

이와 같이 함수를 어떠한 값으로 써 변수에 할당하여 변수에 접근하면 변수의 값(함수 리터럴)인 함수가 실행되게 하는 형태를 함수 리터럴이라고 부른다.

함수 표현식 (함수 리터럴 방식)을 사용한다면 위와 같이 변수, 매개변수와 같은 방식으로 사용할 수 있다.

 

Function Object의 prototype 구조

Function.constructor	생성자 함수
Function.call()	생성 된 함수를 호출 단일 요소를 파라미터로 받는다
Function.apply()	생성 된 함수를 호출하며 배열을 파라미터로 받는다.
Function.toString()	함수의 내용을 문자열로 반환 한다.
Function.bind()	새로운 오브젝트를 생한한 뒤 함수 실행

+ 생성자 함수

위의 자료를 보면 func과 func_2 모두 빌트인 Function 객체의 인스턴스인 것을 확인할 수 있다. 이때 func은 사용자가 직접 Function 객체의 프로토타입 객체의 생성자 매소드를 호출함으로 써 Function 객체의 인스턴스를 생성한 것이다.

이와 같이 모든 빌트인 Object 들은 내부적으로 해당 객체의 prototype 객체의 생성자 (constructor) 매소드를 사용하여 해당 Object의 인스턴스를 생성한다고 볼 수 있다. 

함수 선언문과 함수 표현식은 모두 빌트인 Function 객체의 생성자 함수로 함수를 생성하는 것을 단순화시킨 short-hand(축약법)이다. 함수 선언문, 함수 표현식과 같은 방식으로 생성된 함수는 모두 Function 객체의 인스턴스에 해당한다. (JS 엔진이 function 키워드를 만나면 내부적으로 Function 객체의 생성자 함수 호출)

 

함수 호출 형태

함수는 Function의 함수 호출 매소드인 call과 apply 매소드를 사용하여 호출하는 방법과 일반적인 함수 호출 방법이 존재한다. 

+ call or apply 매소드를 이용한 함수 호출

add 함수의 call 매소드를 사용하여 매개변수로 100과 100을 넘겨주어 200을 반환하여 출력하기 위한 코드를 작성한 것이다. 분명 200이 나올 거 같지만 NaN이 반환된다. 

이와 같은 결과가 발생하는 것은 함수 호출 매소드 (call, apply)의 첫 번째 파라미터로는 객체를 받으며 이는 함수가 this 키워드를 사용하여 참조할 경우 일반적인 this 키워드의 의미 (현재 this 키워드가 사용되고 있는 객체의 참조) 가 아니라 사용자가 임의로 넘겨준 객체(첫번째 파라미터)를 참조하기 위함이다. 

아래는 일반적으로 사용되는 this 키워드가 어떻게 활용되는지 도움이 되는 자료이다.

위와 같이 일반적인 this 키워드는 현재 객체를 나타낸다. 따라서 this.a 와 this.b는 함수 프로퍼티 func이 속해 있는 value 객체를 의미하며 이는 value.a 와 value.b 와 같이 동작하여 된다.

요약하자면 call or apply 매소드의 첫번째 파라미터는 해당 함수가 this 키워드를 사용하여 객체에 접근할 때 this 키워드의 대상이 되는 객체를 의미하며 그 뒤의 파라미터로는 일반적으로 사용되는 함수가 받는 인자라고 보면 된다.

따라서 call, apply 매소드를 사용하는 목적은 this 키워드를 사용하여 참조할 경우 현재 this 키워드가 사용 되고있는 객체를 참조하게 된다. 이때 this 키워드가 참조하는 대상을 다른 객체로 바꾸어 주기 위해 call, apply 매소드를 사용한다. 첫번째 파라미터로 this 키워드가 참조 할 대상 (객체)를 파라미터로 넘겨주어 사용하는 형태이다.

+ call VS apply

call : 매개변수로 단일 값을 받는다

apply : 매개변수로 배열을 입력받는다.