함수 프로퍼티와 일급 객체

seeen·2022년 10월 28일
0
post-thumbnail

이 글은 '이웅모'님의 '모던 자바스크립트 Deep Dive' 책을 통해 공부한 내용을 정리한 글입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.

일급 객체

  • 무명 리터럴로 생성 가능 (런타임 생성 가능)
  • 변수나 자료구조에 저장 가능
  • 함수의 매개변수로 전달 가능
  • 함수의 반환값으로 사용 가능

위 조건을 만족하는 객체를 일급 객체라고 한다.

// 무명 리터럴 생성 가능
const double = function (n) { return n*2 };
const division = function (n) { return n/2 };

// 변수나 자료구조에 저장 가능
const obj = { double, division };

// 함수의 매개변수, 반환값 사용 가능
function calFunc (num, func) {
  return function () {
    num = func(num);
    return num;
  };
}

const dou = calFunc(3, obj.double);
console.log(dou()); // 6

const div = calFunc(8, obj.division);
console.log(div()); // 4

함수 객체 프로퍼티

함수는 객체이므로 다른 객체와 같이 프로퍼티를 갖는다. 그 프로퍼티는 다음과 같다.

arguments 프로퍼티

arguments 프로퍼티 값은 arguments 객체이다. 이는 함수 호출 시 전달된 인수들의 정보를 갖고 있으며 이터러블한 유사배열 객체이다. JS는 함수의 매개변수와 인수의 개수가 일치하는지 따로 확인하지 않으므로 arguments 객체를 이용하여 가변 인자 함수를 구현할 때 유용하게 사용할 수 있다.

function multifunctional () {
  let result = 0;

  if(arguments.length === 0) {
    return "hello"
  } else if(arguments.length < 3) {
    result = arguments[0] * arguments[1];
    return result;
  } else {
    for (let i=0; i<arguments.length; i++) {
      result += arguments[i];
    }
    return result;
  }
}

console.log(multifunctional()); // hello
console.log(multifunctional(2,3)); // 6
console.log(multifunctional(1,2,3,4)); // 10

caller 프로퍼티

ECMAScript 사양에 포함되지 않은 비표준 프로퍼티이다. 함수 자신을 호출한 함수를 가리킨다.

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

function b() {
  return `caller : ${b.caller}`;
}

console.log(a(b)); // caller : function a(func) { return func(); }

length 프로퍼티

함수를 정의할 때 선언한 매개변수의 개수를 가리킨다. arguments의 length 프로퍼티는 인자의 개수를 함수 객체의 length 프로퍼티는 매개변수의 개수를 가리키는 차이점이 있다.

function a() {}
function b(x) { return x };
function c(x, y) { return x+y };

console.log(a.length); // 0
console.log(b.length); // 1
console.log(c.length); // 2

name 프로퍼티

함수의 이름을 나타내는 프로퍼티이다. ES5에선 익명함수 표현식의 경우 빈 문자열로 ES6에선 함수 객체를 가리키는 식별자를 name 프로퍼티의 값으로 갖는 차이점이 있다.

const whatIsFuncName = function() {};
console.log(whatIsFuncName.name); // whatIsFuncName (ES6) | '' (ES5)

이 외에도 prototype에 관련한 프로퍼티가 존재하나 이는 프로토타입과 프로토타입 체인 파트에 정리하였다.

profile
woowacourse FE 5th, depromeet Web 15th

0개의 댓글