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

일급 객체

1️⃣ 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 

2️⃣ 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.

3️⃣ 함수의 매개변수에 전달할 수 있다.

4️⃣ 함수의 반환값으로 사용할 수 있다. 

• 자바스크립트의 함수는 위의 모든 조건을 만족하므로 일급 객체이다. 

함수 객체의 프로퍼티

• 함수는 객체이므로 프로퍼티를 가질 수 있다. 
• console.dir 메서드를 사용하면 다음과 같이 함수 객체의 내부를 들여다볼 수 있다. 

function square(number) {
	return number * number;
}

console.dir(square);

• arguments, caller, length, name, prototype 프로퍼티는 모두 함수 객체의 데이터 프로퍼티이다. 
  • 하지만 __proto__는 접근자 프로퍼티이며 함수 객체 고유의 프로퍼티가 아니라 Object.prototype 객체의 프로퍼티를 상속받는다. 
• Object.prototype 객체의 프로퍼티는 모든 객체가 상속받아 사용할 수 있다. 
• 즉, Object.prototype 객체의 __proto__ 접근자 프로퍼티는 모든 객체가 사용할 수 있다. 

✅ arguments 프로퍼티

• 함수 객체의 arguments 프로퍼티 값은 argument 객체이다. 
• 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

• 함수를 정의할 때 선언한 매개변수는 함수 몸체 내부에서 변수와 동일하게 취급되므로 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 선언되고 undefined로 초기화된 후 인수가 할당된다. 
  • 매개변수 개수보다 인수를 적게 전달했을 경우: 전달되지 않은 인수는 undefined로 초기화된 상태 유지
  • 매개변수 개수보다 인수를 많이 전달했을 경우 : 초과된 인수 무시
  • 초과된 인수가 그냥 버려지는 것은 아니며 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다. 

• arguments 객체는 인수를 프로퍼티 값으로 소유하며 프로퍼티 키는 인수의 순서를 나타낸다.
• arguments 객체의 callee 프로퍼티는 호출되어 arguments 객체를 생성한 함수 자신을 가리킨다.
• arguments 객체의 length 프로퍼티는 인수의 개수를 가리킨다. 
• arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다. 

✅ caller 프로퍼티

ECMAScript 사양에 포함되지 않은 비표준 프로퍼티이고 표준화될 예정도 없으므로 사용하지 말고 참고로만 알아두자.

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

✅ length 프로퍼티

함수를 정의할 때 선언한 매개변수의 개수를 가리킨다.

• arguments 객체의 length 프로퍼티와 함수 객체의 length 프로퍼티의 값은 다를 수 있으므로 주의해야한다. 
  • arguments 객체의 length 프로퍼티는 인자(argument)의 개수를 가리킨다.
  • 함수 객체의 length 프로퍼티는 매개 변수(parameter)의 개수를 가리킨다. 

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

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

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

✅ name 프로퍼티

함수의 이름을 나타낸다.

• name 프로퍼티는 ES5와 ES6에서의 동작이 다르다. 
  • 익명 함수 표현식의 경우
  • ES5에서는 빈 문자열을 값으로 갖는다.
  • ES6에서는 함수 객체를 가리키는 식별자를 값으로 갖는다. 
• 함수 이름과 함수 객체를 가리키는 식별자는 의미가 다르다. 
• 함수를 호출할 때에는 함수 이름이 아닌 함수 객체를 가리키는 식별자로 호출한다. 

✅ __proto__접근자 프로퍼티

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

• 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. 
• [[Prototype]] 내부 슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리킨다.
• 내부 슬롯에는 직접 접근할 수 없고 간접적인 접근 방법을 제공하는 경우에 한하여 접근할 수 있다. 
• [[Prototype]] 내부 슬롯에도 직접 접근할 수 없으며 __proto__ 접근자 프로퍼티를 통해 간접적으로 프로토타입 객체에 접근할 수 있다. 

✅ prototype 프로퍼티

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

• 일반 객체와 생성자 함수로 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없다. 
• prototype 프로퍼티는 함수가 객체를 생성하는 생성자 함수로 호출될 때 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킨다. 

// 함수 객체는 prototype 프로퍼티를 소유한다.
(function () {}.hasOwnProperty("prototype")); // true

// 일반 객체는 prototype 프로퍼티를 소유하지 않는다.
({}.hasOwnProperty("prototype")); // false