Skip to Content

18장 함수와 일급 객체

함수와 일급 객체

18-1 일급객체

  1. 무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성 가능하다.
  2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
  3. 함수의 매개변수에 전달할 수 있다.
  4. 함수의 반환값으로 사용할 수 있다.

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

// 1번조건 및 2번조건(함수는 변수에 저장가능)
// 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.
 
const increase = function(num){
	return ++num;
};
 
const decrease = function(num) {
	ruturn --num;
};
 
const decrease = function(num) {
	return --num;
};
 
// 2. 함수는 객체에 저장할 수 있다.
const auxs = {increase, decrease};
 
// 3. 함수의 매게변수에 전달할 수 있다.
// 4. 함수의 반환값으로 사용할 수 있다.
function makeCounter(aux) {
	let num = 0;
 
	return function() {
		num = aux(num);
		return num;
	};
}
 
// 3. 함수는 매개변수에게 함수를 전달 가능
const increaser = makeCounter(auxs.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2
  • 함수가 일급객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미이다.
  • 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다.

18-2 함수 객체의 프로퍼티

함수는 객체이므로, 함수도 프로퍼티를 갖을 수 있다.

console.dir 메서드로 함수 객체의 내부를 들여다보자!

function square(number) {
  return number * number;
}
 
console.log(square);

콘솔창 실행결과

image.png

  • argu,emts, caller, length, name, prototype 등 여러가지 프로퍼티가 등장한다. 아래서 더 자세히 살펴보자.

arguments 프로퍼티

함수 호출 시 전달된 인수(arguments) 정보를 담고 있는 유사 배열 객체.

function example(a, b) {
  console.log(arguments);
  console.log(arguments[0]); // 첫 번째 인수
  console.log(arguments.length); // 인수 개수
}
 
example(1, 2, 3);
  • 함수 내부에서 암묵적으로 사용 가능
  • 배열처럼 인덱스로 접근 가능하지만 진짜 배열이 아님

유사 배열 객체와 이터러블

유사 배열 객체

length 프로퍼티와 인덱스를 가진 객체 배열 메서드(forEach, map)를 직접 사용할 수 없음

function test() {
  console.log(arguments);
  console.log(Array.isArray(arguments)); // false
}
test(10, 20, 30);

이터러블

Symbol.iterator 메서드를 구현한 객체 for...of 문, 스프레드 문법 등 사용 가능

function test() {
  for (const arg of arguments) {
    console.log(arg);
  }
}
test('A', 'B', 'C');
  • arguments 객체는 유사 배열 + 이터러블이다.

caller 프로퍼티

현재 함수를 호출한 다른 함수의 참조를 반환한다. ES 사양에 포함되지 않은 비표준 프로퍼티 이고, 이후 표준화될 예정도 없으므로 사용하진 말고 참고로만 알아두자. 관심없으면 지나쳐도 좋다!

function first() {
  second();
}
 
function second() {
  console.log(second.caller); // first 함수의 소스 출력
}
 
first();

length 프로퍼티

함수 정의 시 명시된 매개변수(parameter) 개수를 나타낸다.

function foo(a, b, c) {}
console.log(foo.length); // 3
  • arguments 개수가 아니라, 선언된 파라미터 수를 의미한다.

name 프로퍼티

함수의 이름을 문자열로 반환한다.

function greet() {}
console.log(greet.name); // "greet"
 
const sayHi = function () {};
console.log(sayHi.name); // "sayHi" (ES6 이후 추론 가능)
  • 익명 함수 표현식도, ES6 이후에는 변수명 기반으로 name 자동 설정
  • 디버깅 시 함수 식별에 유용

proto 접근자 프로퍼티

모든 객체는 __proto__를 통해 자신의 [[Prototype]] 내부 슬롯에 접근할 수 있다.

function hello() {}
console.log(hello.__proto__ === Function.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
  • proto는 접근자 프로퍼티(getter/setter)이며, 모든 객체가 프로토타입 체인을 통해 상속 구조를 형성한다.

prototype 프로퍼티

함수 객체만이 소유하는 특별한 프로퍼티. 생성자 함수로 호출될 때

, 인스턴스의 프로토타입 ([Prototype])으로 사용된다.

function Animal(name) {
  this.name = name;
}
 
Animal.prototype.sayHi = function () {
  console.log(`Hi, I'm ${this.name}`);
};
 
const dog = new Animal('Bori');
dog.sayHi(); // Hi, I'm Bori
  • 일반 객체에는 존재하지 않고, 함수 객체(특히 생성자 함수) 에만 존재
  • 인스턴스가 생성될 때 자동으로 연결됨 (instance.__proto__ === constructor.prototype)
프로퍼티설명비고
arguments함수 호출 시 전달된 인수 정보 (유사 배열)내부에서만 사용 가능
caller현재 함수를 호출한 함수 참조비표준, 권장되지 않음
length선언된 매개변수의 수arguments 개수 아님
name함수 이름ES6 이후 자동 추론
proto[[Prototype]]에 접근하는 접근자모든 객체에 존재
prototype생성자 함수의 프로토타입 객체함수 객체에만 존재
Last updated on
4장 변수