18. 함수와 일급 객체
in 모던자바스크립트
일급 객체
- 일급 객체 조건
- 무명의 리터럴로 생성할 수 있다 > 런타임에 생성이 가능하다.
- 변수나 자료구조(객체, 배열…)에 저장할 수 있다.
- 함수의 매개변수에 전달할 수 있다.
- 함수의 반환값으로 사용할 수 있다.
- js에서 함수는 위의 모든 조건 만족 > 일급 객체
- 함수가 일급객체다 === 함수를 객체와 동일하게 사용할 수 있다.
- 객체 === 값 > 함수는 값을 사용할 수 있는 곳이라면 어디서든지 리터럴로 정의 가능 > 런타임에 함수 객체로 평가된다.
- 일급 객체로서 함수의 특징 : 함수의 매개변수에 전달 가능, 함수의 반환값으로 사용 가능
함수 객체의 프로퍼티
- 함수는 객체 > 객체는 프로퍼티 갖을 수 있다 > 함수도 프로퍼티 가질 수 있다.
function square(n) {
return n * m;
}
console.log(Object.getOwnPropertyDescriptors(square));
// {
// length: { value: 1, writable: false, enumerable: false, configurable: true },
// name: {
// value: 'square',
// writable: false,
// enumerable: false,
// configurable: true
// },
// arguments: {
// value: null,
// writable: false,
// enumerable: false,
// configurable: false
// },
// caller: {
// value: null,
// writable: false,
// enumerable: false,
// configurable: false
// },
// prototype: { value: {}, writable: true, enumerable: false, configurable: false }
// }
// __proto__ 는 square 함수의 프로퍼티가 아니다.
console.log(Object.getOwnPropertyDescriptor(square, "__proto__")); //undefined
// square 함수는 Object.prototype 객체로부터 __proto__ 접근자 프로퍼티를 상속받는다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, "__proto__"));
// {
// get: [Function: get __proto__],
// set: [Function: set __proto__],
// enumerable: false,
// configurable: true
// }
- arguments, caller, length, name, prototype : 함수 객체의 데이터 프로퍼티, 일반 객체에는 없다.
- __proto__는 접근자 프로퍼티, 함수 객체 고유의 프로퍼티가 아닌 Object.prototype 객체의 프로퍼티를 상속
- Object.prototype 객체의 프로퍼티는 모든 객체가 상속받아 사용할 수 있다.
- 즉 Object.prototype 객체의 __proto__접근자 프로퍼티는 모든 객체가 사용 가능
arguments 프로퍼티
- 함수 객체의 arguments 프로퍼티 값은 arguments 객체다.
- arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체, 함수 내부에서 지역 변수처럼 사용 > 함수 외부에서는 참조 x
- 함수 객체의 arguments 프로퍼티는 현재 일부 브라우저에서 지원 but ES3부터 표준에서 폐지
- Function.arguments와 같은 사용법 권장 x
- 함수 내부에서 지역변수처럼 사용할 수 있는 arguments 객체 참조하자.
- 함수 호출시 매개변수보다 초과된 인수는 무시 > 그냥 버려지는 건 x
- 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관
- arguments 객체는 인수를 프로퍼티 값으로 소유하며, 프로퍼티 키는 인수의 순서를 나타낸다.
- callee 프로퍼티는 호출되어 arguments 객체를 생성한 함수(함수 자신)을 가리킨다.
- arguments 객체의 length 프로퍼티는 인수의 갯수
- arguments 객체의 Symbol(Symbol.iterator) 프로퍼티
- arguments 객체를 순회 가능한 자료구조인 이터러블로 만들기 위한 프로퍼티
- Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하는 것에 의해 이터러블이 된다.
- 함수 호출시 인수와 파라미터 파악 x > 인수 개수 확인하고 이에 따라 동작 다르게 정의하고 싶다면?
- arguments 객체 사용
- 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다
function sum() { let res = 0; for (let i = 0; i < arguments.length; i++) { res += arguments[i]; } return res; } console.log(sum()); console.log(sum(21, 2)); console.log(sum(1, 2, 3)); - 배열 형태로 인자 정보를 담고 있지만, 실제 배열이 아닌 유사 배열 객체다.
- 유사 배열 객체 : length 프로퍼티를 가진 객체로 for문으로 순회할 수 있는 객체
- 유사 배열 객체와 이터러블
- ES6에서 도입된 이터레이션 프로토콜을 준수하면 순회 가능한 자료구조인 이터러블이 된다.
- ES5까지 arguments 객체는 유사 배열 객체
- ES6부터는 유사 배열 객체 && 이터러블
- 배열이 아니므로 배열 메서드 사용 x
- 배열로 사용하려면 Function.prototype.call, Function.prototype.apply
- 사용하여 간접 호출해야한다.
- 이러한 번거로움 해결 > rest parameter
function sum(...args)
caller 프로퍼티
- ECMAScript 사양에 포함되지 않는 비표준 프로퍼티
- 표준화될 예정도 없는 프로퍼티 > 참고로만 알아두자.
- 함수 객체의 caller 프로퍼티 : 함수 자신을 호출한 함수를 가리킨다.
length 프로퍼티
- 함수를 정의할 때 선언한 매개변수의 개수를 가리킨다.
- arguments 객체의 length 프로퍼티 ≠= 함수 객체의 length 프로퍼티
- args : 인자의 개수
- 함수 length : 매개변수의 개수
name 프로퍼티
- 함수 이름을 나타낸다.
- 식별자 이름 아니고 함수 이름!!!
- ES6에서 정식 표준이 됐다.
- ES5와 ES6에서 동작이 다르다.
- 익명함수표현식 : es5) name 프로퍼티 : 빈문자열
- es6) 함수 객체를 가리키는 식별자
proto 접근자 프로퍼티
- 모든 객체는 [[Prototype]] 내부 슬롯 갖는다.
- 상속을 구현하는 프로토타입 객체를 가리킨다.
- [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티
- 내부 슬롯에는 직접 접근 못하고, 간접 접근하는데 proto 접근자 프로퍼티 통해서 간접적으로 프로토타입 객체에 접근한다.
person.hasOwnProperty("name"): 인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true, 상속받은 프로토타입의 프로퍼티 키인 경우 false
prototype 프로퍼티
- 생성자 함수로 호출할 수 있는 함수 객체, 즉 constructor 만이 소유하는 프로퍼티
- 일반객체, non-constructor에는 prototype 프로퍼티 없다.
- prototype 프로퍼티는 함수가 객체를 생성하는 생성자 함수로 호출될 때, 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킨다.
