자바스크립트 함수 객체

함수 객체

자바스크립트에서는 함수도 객체다.

즉, 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다는 것이다.

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

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

console.log(add.result); // 5
console.log(add.status); // OK

위 예제 코드는 add() 함수로 일반 객체처럼 result와 status 프로퍼티를 추가한 것이다.

 

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

자바스크립트의 함수의 동작

• 리터럴에 의해 생성
• 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능
• 함수의 인자로 전달 가능
• 함수의 리턴 값으로 리턴 가능
• 동적으로 프로퍼티를 생성 및 할당 가능

이와 같은 특징이 있으므로 자바스크립트 함수를 일급 객체(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

함수 인자로 전달

함수는 다른 함수의 인자로도 전달이 가능하다.

// 함수 표현식으로 foo() 함수 생성
var foo = function(func) {
  func();
};

// foo() 함수 실행
foo(function() {
  console.log('Function can be used as the argument.');
});

 

리턴 값으로 활용

함수는 다른 함수의 리턴 값으로도 활용할 수 있다.

// 함수를 리턴하는 foo() 함수 정의
var foo = function() {
  return function() {
    console.log('this function is the return value.')
  };
};

var bar = foo();
bar(); // this function is the return value.

foo() 함수가 호출되면, 리턴값으로 전달되는 함수가 bar 변수에 저장된다.

() 함수 호출 연산자를 이용해 bar()로 리턴된 함수를 실행하는 것이 가능하다.

함수 객체의 기본 프로퍼티

함수 역시 일반적인 객체의 기능에 추가로 호출됐을 때 정의된 코드를 실행하는 기능을 가지고 있다.

또한, 일반 객체와는 다르게 추가로 함수 객체만의 표준 프로퍼티가 정의되어 있다.

function add(x, y) {
  return x + y;
}

console.dir(add);

결과를 살펴보면 add() 함수는 arguments, caller, length 등과 같은 다양한 프로퍼티가 기본적으로 생성된 것을 확인할 수 있다.

이러한 프로퍼티들이 함수를 생성할 때 포함되는 표준 프로퍼티다.

 

Function.prototype 객체의 프로토타입 객체는?

예외적으로 Function.prototype 함수 객체의 부모는 자바스크립트의 모든 객체의 조상 격인 Object.prototype 객체다.

참고로 Function.prototype 객체는 모든 함수들의 부모 역할을 하는 프로토타입 객체다.

 

length 프로퍼티

length 프로퍼티는 함수를 작성할 때 정의한 인자 개수를 나타낸다.

function func1(x) {
  return x;
}

function func2(x, y) {
  return x + y;
}

console.log(func1.length); // 1
console.log(func2.length); // 2

prototype 프로퍼티

함수 객체의 prototype 프로퍼티는 앞서 설명한 모든 객체의 부모를 나타내는 내부 프로퍼티인 [[Prototype]]과 혼동하지 말아야 한다.

모든 객체에 있는 내부 프로퍼티인 [[Prototype]]은 객체 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 반면, 함수 객체가 가지는 prototype 프로퍼티는 이 함수가 생성자로 사용될 때 이 함수를 통해 생성된 객체의 부모 역할을 하는 프로토타입 객체를 가리킨다.

 

- 본 포스팅은 "인사이드 자바스크립트" 도서를 기반으로 작성한 글입니다.