자바스크립트에서는 함수도 객체다, 함수 객체의 기본 프로퍼티

자바스크립트에서는 함수도 객체다. 즉! 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있게 된다는 것이다. 여러가지 예제를 보고 이해 하도록 한다.

//함수 선언 방식
function add(x, y){
    return x + y;
}

//add() 함수 객체에 result, status프로퍼티 추가
add.result = add(3, 2);
add.status = 'OK';

console.log(add.result);
console.log(add.status);

• add() 함수를 생성할 때 함수 코드는 함수 객체의 [[Code]] 내부 프로퍼티에 자동으로 저장된다.
• add() 함수는 마치 일반 객체처럼 result 프로퍼티를 동적으로 생성하고, 여기에 add() 함수를 호출한 결과를 저장한 것을 확인할 수 있다.

 

자바스크립트에서는 함수는 값으로 취급된다.

앞서 설명한 것처럼 자바스크립트에서 함수는 객체이다. 이는 함수도 일반 객체처럼 취급될 수 있다는 것이다. 때문에 자바스크립트 함수는 다음과 같은 동작이 가능하다.

1. 리터럴에 의한 생성
2. 변수나 배열의 요소, 객체의 프로퍼티 등에 할당이 가능
3. 함수의 인자로 전달 가능
4. 함수의 리턴값으로 리턴 가능
5. 동적으로 프로퍼티를 생성 및 할당 가능

이와 같은 특징이 있으므로 자바스크립트에서는 함수를 일급(First Class)라고 부른다.

 

변수나 프로퍼티의 값으로 할당

//변수에 함수 할당
var foo = 100;
var bar = function () { return 100; };
console.log(bar()); //100

//프로퍼티에 함수 할당
var obj = {};
obj.baz = function () { return 200; }
console.log(obj.baz()); // 200

• 먼저 bar라는 변수에는 함수 리터럴로 생성된 함수가 저장된 것을 볼 수 있다. 이때 bar()라고 했을 때 실제 함수의 호출이 가능하다.
• 또한 baz처럼 객체의 프로퍼티나 배열의 원소 등에도 할당이 가능하다.

함수 인자로 전달

//함수 표현식으로 foo생성
var foo = function (func) {
  func(); //인자로 받은 func실행!
};

foo(function () {
  console.log('어제의 나보다 성장한 오늘의 나');
});

• 함수는 다른 함수의 인자로도 전달이 가능하다.
• foo() 함수를 호출할때, 함수 리터럴 방식으로 생성한 익명함수를 func 인자로 넘겼다. foo() 함수 내부에서는 func 매개변수로 인자에 넘겨진 함수를 호출할 수 있다. 결과를 본다면 제대로 호출된 것을 볼 수 있다.

리턴 값으로 활용

//함수 표현식으로 foo()생성
var foo = function () {
    return function () {
        console.log('어제의 나보다 성장한 오늘의 나');
    };
};

var bar = foo();
bar();

• foo() 함수는 console.log()를 이용해 출력하는 간단한 익명 함수를 리턴하는 역할이다. 이것이 가능한 이유 또한 함수 자체가 값으로 취급되기 때문이다.

 

출처

인사이드 자바스크립트(송형주, 고현준 지음) - 한빛미디어