Modern JavaScript Deep Dive 스터디 - CH18 함수와 일급 객체
참고 자료: ⟪모던 자바스크립트 Deep Dive⟫"(이웅모 지음,위키북스, 2020)
- 무명의 리터럴로 생성할 수 있음. 즉, 런타임에 생성이 가능
- 변수나 자료구조(객체, 배열 등)에 저장 가능
- 함수의 매객변수에 전달 가능
- 함수의 반환값으로 사용 가능
arguments
, caller
, length
, name
, prototype
프로퍼티는 일반 객체에는 없는 함수 객체 고유의 데이터 프로퍼티function multiply(x, y) {
console.log(arguments);
}
multiply(1, 2, 3);
arguments
는 매개변수 개수를 확정할 수 없는 가변 인자 함수 구현에 유용
- arguments 객체는 기본적으로 length 프로퍼티를 지원
- length는 인수(argument)의 개수
- length 프로퍼티 를 사용할 수 있는 이유는 arguments 객체 가 유사 배열 객체(array-like object) 이기 때문
function sum() {
let res = 0;
// arguments 객체는 length 프로퍼티가 있는 유사 배열 객체이므로 for 문으로 순회할 수 있다.
for (let i = 0; i < arguments.length; i++) {
res += arguments[i];
}
return res;
}
console.log(sum()); // 0
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6
Rest Parameter
// ES6 Rest parameter
function sum(...args) {
return args.reduce((pre, cur) => pre + cur, 0);
}
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3, 4, 5)); // 15
function add(x, y) {
return x + y;
}
add();
/*
add 함수 객체의 length : 2,
arguments 객체의 length : 0
*/
add(1, 2);
/*
add 함수 객체의 length : 2,
arguments 객체의 length : 2
*/
add(1, 2, 3, 4, 5);
/*
add 함수 객체의 length : 2,
arguments 객체의 length : 5
*/
arguments 객체 length vs 함수 객체 length
arguments 객체의 length 프로퍼티 !== 함수 객체의 length 프로퍼티
- argument 객체의 length 프로퍼티: 인수(argument)의 개수
- 함수 객체의 length 프로퍼티: 매개변수(parameter)의 개수
// 기명 함수 표현식
var namedFunc = function foo() {};
console.log(namedFunc.name); // foo
// 익명 함수 표현식
var anonymousFunc = function() {};
// ES5: name 프로퍼티는 빈 문자열을 값으로 갖는다.
// ES6: name 프로퍼티는 함수 객체를 가리키는 변수 이름을 값으로 갖는다.
console.log(anonymousFunc.name); // anonymousFunc
// 함수 선언문(Function declaration)
function bar() {}
console.log(bar.name); // bar
[[Prototype]]
내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티[[Prototype]]
- 모든 객체는
[[Prototype]]
내부 슬롯을 가짐[[Prototype]]
내부 슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리킴
const obj = { a: 1 };
// 객체 리터럴 방식으로 생성한 객체의 프로토타입 객체는 Object.prototype이다.
console.log(obj.__proto__ === Object.prototype); // true
// 객체 리터럴 방식으로 생성한 객체는 프로토타입 객체인 Object.prototype의 프로퍼티를 상속받는다.
// hasOwnProperty 메서드는 Object.prototype의 메서드다.
console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('__proto__')); // false
// 함수 객체는 prototype 프로퍼티를 소유한다.
(function () {}).hasOwnProperty('prototype'); // -> true
// 일반 객체는 prototype 프로퍼티를 소유하지 않는다.
({}).hasOwnProperty('prototype'); // -> false