[모던 자바스크립트 Deep Dive] 15. 함수와 일급 객체

일급 객체

• 무명의 리터럴로 생성 (런타임 생성 가능)
• 변수나 자료구조 (객체, 배열 등)에 저장 가능
• 함수의 매개변수에 전달 가능
• 함수의 반환값으로 사용 가능

// 1. 함수는 무명 리터럴로 생성 가능
// 2. 함수는 변수에 저장 가능
// 런타임 시점에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당
const increase = function (num) {
  return ++num;
};

const decrease = function (num) {
  return --num;
};

// 2. 함수는 객체에 저장할 수 있다.
const auxs = { increase, decrease };

// 3. 함수는 매개변수에 전달 가능
// 4. 함수는 함수의 반환 값으로 사용 가능
function auxs(predicate) {
  let num = 0;

  return function () {
    num = auxs(num);
    return num;
  };
}

// 3. 함수는 매개변수에게 함수 전달 가능
const increaser = makeCounter(auxs.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2
const decreaser = makeCounter(auxs.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

함수가 일급 객체라는 것은 객체와 동일하게 사용할 수 있다는 의미 = 객체는 값으로 함수는 값과 동일하게 취급할 수 있음

→ 함수는 값을 사용할 수 있는 곳 (변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문) 이라면 어디서든지 리터럴로 정의 가능 및 런타임에 함수 객체로 평가

하지만 일반 객체는 호출 불가능 함수 객체는 호출 가능

 

함수 객체의 프로퍼티

함수는 객체로 프로퍼티를 가질 수 있음

함수 객체의 데이터 프로퍼티 : arguments, caller, length, name, prototype 프로퍼티

 

1. arguments 프로퍼티

arguments 프로퍼티 = arguments 객체 : 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체, 함수 내부에서 지역 변수처럼 사용 (함수 외부에서 참조 불가)

function mul(x , y){ // 함수를 선언할 때 정의한 매개변수는 몸체 내부에서 변수와 동일하게 취급
// 함수가 호출되면 함수 몸체 내부에서 암묵적으로 매개변수가 선언되고 undefined로 초기화된 후 인수 할당
 console.log(arguments);
 return x + y;
}

console.log(mul());	// (undefined * undefined) NaN
console.log(mul(1)); // (1 * undefined) NaN
console.log(mul(1,2)); // ( 1 * 2) 2
// 초과된 인수(3)는 암묵적으로 arguments 객체의 프로퍼티로 보관
console.log(mul(1,2,3));  // (1 * 2 ) 2

 

arguments 객체 : 인수를 프로퍼티 값으로 소유하며 프로퍼티 키는 인수의 순서를 나타냄

callee 프로퍼티 : 호출되어 arguments 객체를 생성한 함수 (함수 자신)

length : 프로퍼티 인수의 개수

Symbol : arguments 객체를 순회 가능한 자료구조인 이터러블로 만들기 위한 프로퍼티

arguments 객체는 매개변수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용

function sum(){
 let res = 0;
 
 // arguments 객체는 length 프로퍼티가 있는 유사 배열 객체이므로 for문으로 순회 가능
 for (let i = 0; i < arguments.length; i ++){
  res += arguments[i];
 }
 return res;

}

console.log(sum(1,2,3)) // 6

유사 배열 객체 : length 프로퍼티를 가진 객체로 for 문으로 순회할 수 있는 객체

 

2. caller 프로퍼티

함수 객체의 caller 프로퍼티는 함수 자신을 호출한 함수를 가르킴

 

3. length 프로퍼티

함수 객체의 length 프로퍼티는 함수를 정의할 때 선언한 매개변수의 개수를 가르킴

arguments 객체의 length 프로퍼티는 인자의 개수, 함수 객체의 length프로퍼티는 매개변수의 개수를 가르킴

function sayLength(x , y){
 console.log("함수 객체의 length", sayLength.length);
 console.log("arguments의 length", arguments.length);
}

sayLength()// 함수 객체의 length 2 arguments의 length 0
sayLength(1)// 함수 객체의 length 2 arguments의 length 1
sayLength(1,2)// 함수 객체의 length 2 arguments의 length 2
sayLength(1,2,3,4,5)// 함수 객체의 length 2 arguments의 length 5

 

4. name 프로퍼티

함수 이름을 나타냄

// 기명 함수 표현식
const namedFunc = function foo() {};
console.log(namedFunc.name); // foo

// 무명 함수 표현식 
// ES5 에서는 빈 문자열('')
// ES6 에서는 함수 객체를 가리키는 식별자
const anonymousFunc = function () {};
console.log(anonymousFunc.name); // anonymousFunc

function bar() {}
console.log(bar.name); // bar

 

5. __proto__ 접근자 프로퍼티

모든 객체는 [[Prototype]]이라는 내부 슬롯을 가짐

[[Prototype]] 내부슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리킴 (직접 접근 X)

__proto__ : [[Prototype]]  내부 슬롯이 가리키는 프로토타입 객체에 간접적으로 접근하기 위해 사용하는 접근자 프로퍼티 

const obj = { a: 1 };

console.log(obj.__proto__ === Object.prototype); // true  (객체 리터럴 형태로 생성한 객체의 프로토타입 객체는 Object.prototype)

console.log(obj.hasOwnProperty("a")); // true
console.log(obj.hasOwnProperty("__proto__")); // false

 

6. prototype 프로퍼티

생성자 함수로 호출할 수 있는 함수 객체 (constructor 만이 소유하고 있는 프로퍼티)

일반 객체와 생성자 함수로 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없음

// 함수 객체는 prototype 프로퍼티 소유
console.log(function () {}.hasOwnProperty("prototype")); // true  
// 일반 객체는 prototype 프로퍼티 소유 X
console.log({}.hasOwnProperty("prototype")); // false