소년코딩의 자바스크립트 강좌 12. 함수의 프로퍼티

자바스크립트에서는 함수도 객체이기 때문에 함수의 기본 기능인 코드실행 뿐만 아니라,

함수 자체가 일반 객체처럼 프로퍼티를 가질 수 있다.

// 함수 선언 방식으로 add() 함수 정의
function add(x, y) {
    return x + y;
}
 
// add() 함수객체에 name, age프로퍼티 추가
add.name = 'oppa';
add.age = 24;
 
console.log(add.name);   // 'oppa'
console.log(add.age);    // 24

---

1. 일급 객체

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

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

이러한 특징 때문에 함수를 일급객체라고 부르며, 함수형 프로그래밍이 가능하다.

함수는 일급객체이며 이는 곧 일반 객체처럼 값으로 취급되기 때문에 함수를 변수나, 객체, 배열등에 값으로 저장할 수 있으며, 다른 함수의 인자로 전달하거나 함수의 리턴값으로도 사용이 가능하다.

// 변수에 함수 할당
var oppa = function () { return 'hong' };
console.log(oppa());        // 'hong'
 
// 프로퍼티에 함수 할당
var blog = {};
blog.name = function () { return 'naver' };
console.log(blog.name());   // 'naver'
 
// 함수 인자로 전달
var adun = function(func) {
    func();
};
 
adun(function() {
    console.log('Function can be used as the argument.');
});                        // Function can be used as the argument.
 
// 리턴값으로 활용
var hong = function() {
    return function () {
        console.log('this function is the return value.')
    };
};
 
var oppa = hong();
oppa();                    // this function is the return value.

---

2. 함수 객체의 기본 프로퍼티

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

function sum(x, y) {
    return x + y;
}
 
console.dir(sum);

console.dir()를 통해 add() 함수를 살펴보면 arguments, caller, length, name, prototype등과 같은 다양한 프로퍼티가 기본적으로 생성되며,

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

 

1) name

함수의 name 프로퍼티는 함수의 이름을 나타낸다.

위 예제에서는 함수명이 sum이지만, 만약 이름이 없는 익명 함수라면 name 프로퍼티는 빈 문자열이 저장된다.

 

2) caller

함수의 caller 프로퍼티는 자신을 호출한 함수를 나타낸다.

위 예제에서는 sum() 함수를 호출하지 않았기 때문에 null 값이 저장된다.

function outer() {    
    inner();
}
 
function inner() {
    console.log(inner.caller);
}
 
outer();    // function outer() { inner(); }

즉, caller 프로퍼티에는 해당 함수를 호출한 함수에 대한 참조를 저장하며, 전역 스코프에서 호출했다면 null 값이 저장된다.

 

3) arguments

함수의 arguments 프로퍼티는 함수를 호출할 때 전달된 인자 값을 나타낸다.

function sum(x, y) {
    console.log(arguments);
    return x + y;
}

sum(1, 2);     // [1, 2] // return 3

 

4) length

함수의 length 프로퍼티는 함수가 넘겨받을 것으로 예상하는 이름 붙은 매개변수의 숫자로서, 함수가 정상적으로 실행될 때 기대되는 인자의 개수를 나타낸다.

// 매개변수를 하나 넘겨받을거라고 예상하는 함수 
function sayName(name) {     
    console.log(name); 
} 
 
// 매개변수를 두개 넘겨받을거라고 예상하는 함수 
function sum(num1, num2) {     
    return numn1 + num2; 
} 
 
// 매개변수를 받지 않을거라고 예상하는 함수 
function sayHi() {
    console.log('Hi~'); 
} 
 
console.log(sayName.length);           // 1 
console.log(sum.length);               // 2 
console.log(sayHi.length);             // 0

 

5) prototype

자바스크립트의 모든 함수는 객체로써 prototype 프로퍼티를 가지고 있다.

여기서 주의할 점은 함수 객체의 prototype 프로퍼티와 나중에 설명할 모든 객체의 부모를 나타내는 내부 프로퍼티인 [[Prototype]]과 혼동하지 말아야한다.

prototype 프로퍼티는 함수가 생성될 때 자동으로 만들어지며, constructor 프로퍼티 하나만 있는 객체를 가리킨다.

이렇게 만들어진 객체를 프로토타입 객체라고 한다.

function OppaFunction() {
    return true;
}
 
console.dir(OppaFunction.prototype);
console.dir(OppaFunction.prtotype.constructor);

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.