[모던 자바스크립트 Deep Dive] 18장 : 함수와 일급 객체 - JS

일급 객체

1. 무명의 리터럴로 생성할 수 있다.
2. 변수나 자료구조에 저장할 수 있다.
3. 함수의 매개변수에 전달할 수 있다.
4. 함수의 반환 값으로 사용할 수 있다.

위 4개의 조건을 모두 만족하면 일급 객체라 한다.

// 함수는 무명의 리터럴로 생성할 수 있다.
//변수에 저장 가능
const increase = function (num) {
  return ++num;
}

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

// 함수는 객체에 저장 가능
const predicates = { increase, decrease };

// 함수의 매개변수로 전달 가능
// 함수의 반환값으로 사용 가능
function makeCounter(predicate) {
  let num = 0;
  
  return function () {
    num = predicate(num);
    return num;
  };
}

// 매개변수에게 함수 전달 가능
const increaser = makeCounter(predicates.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

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

함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 따라서 함수는 값을 사용할 수 있는 곳이라면 어디서든지 리터럴로 정의할 수 있으며 런타임에 함수 객체로 평가된다.

 

---

함수 객체의 프로퍼티

함수는 객체이기에 프로퍼티를 가질 수 있다.

 

🌈 함수 객체의 프로퍼티 종류

1. arguments 프로퍼티
2. caller 프로퍼티
3. length 프로퍼티
4. name 프로퍼티
5. __proto__ 프로퍼티
6. prototype 프로퍼티

 

1️⃣ arguments

함수 호출 시 전달된 인수들의 정보를 담고 있는 유사 배열 객체이다.

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

function multiply(x, y) {
  console.log(arguments);
  return x * y;
}

console.log(multiply()); // NaN
console.log(multiply(1)); // NaN
console.log(multiply(1, 2)); // 2 
console.log(multiply(1, 2, 3)); // 2

❓ arguments 프로퍼티는 언제 유용한가요?

arguments 프로퍼티는 매개변수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다.

 

 

 

2️⃣ caller

함수 객체의 caller 프로퍼티는 함수 자신을 호출한 함수를 가리킨다.

function foo(func) {
  return func();
}

function bar() {
  return 'caller: ' + bar.caller;
}

console.log(foo(bar)); // caller: function foo(func) {...}
console.log(bar())); // caller: null

❓ caller 프로퍼티 알아야 하나요?

그냥 지나쳐도 좋다. (표준화될 예정도 없는 프로퍼티)

 

 

 

3️⃣ length

함수 객체의 length 프로퍼티는 함수를 정의할 때 선언한 매개변수의 개수를 가리킨다.

function foo() {}
console.log(foo.length); // 0

function bar(x) {
  return x;
}
console.log(bar.lengh); // 1

function baz(x, y) {
  return x * y;
}
console.log(baz.length); // 2

 

 

 

4️⃣ name

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

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

// 익명함수 표현식
var anonymousFunc = function() {};
console.log(anonymousFunc.name); // ES5: "", ES6: anonoymousFunc

// 함수 선언문
function bar() {}
console.log(bar.name); // bar

 

 

 

5️⃣ __proto__

__proto__ 프로퍼티는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티다.

const obj = { a: 1 };

console.log(obj.__proto__ === Object.prototype); // true

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

모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. [[Prototype]] 내부 슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리킨다.

 

내부 슬롯에는 직접 접근할 수 없고 간접적인 접근 방법을 제공하는 경우에 한하여 접근할 수 있다.

 

❓ __proto__ 프로퍼티는 언제 사용한가요?

__proto__ 접근자 프로퍼티를 통해 간접적으로 프로토타입 객체에 접근할 수 있다.

 

 

 

6️⃣ prototype

prototype 프로퍼티는 생성자 함수로 호출할 수 있는 함수 객체만이 소유하는 프로퍼티다.

// 함수 객체는 prototype 프로퍼티를 가진다.
(function () {}).hasOwnProperty('prototype'); // true

// 일반 객체는 prototype 프로퍼티를 가지지 않는다.
({}).hasOwnProperty('prototype'); // false

prototype 프로퍼티는 함수가 객체를 생성하는 생성자 함수로 호출될 때 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킨다.

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!