모던 자바스크립트 Deep Dive : 18장 함수와 일급 객체

EdLee·2022년 10월 30일

javascript

목록 보기
8/37

18장 함수와 일급 객체

1. 일급 객체


  • 다음 조건을 만족하는 객체를 일급 객체라 한다.(프로그래밍 언어 전반에 적용되는 내용)

    일급 객체

    1. 무명의 리터럴로 생성할 수 있다.(런타임에 생성이 가능하다)
    2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
    3. 함수의 매개변수에 전달할 수 있다.
    4. 함수의 반환 값으로 사용할 수 있다.
  • JS의 함수는 위의 조건을 모두 만족하는 일급 객체이다

// 익명함수로써 무명의 리터럴로 생성했다. (1번 만족)
// increase, decrease 변수에 할당했다. (2번 만족)
const increase = function (num) {
  return ++num;
};

function makeCounter(aux) {
  let num = 0;
  return function() { // 함수의 return으로 사용했다(4번 만족)
    num = aux(num);
    return num;
  }
}

// 매개 변수로 전달 했다(3번 만족)
const increaser = makeCounter(increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

2. 함수 객체의 프로퍼티


  • 함수도 객체이므로 프로퍼티가 있다.
  • 함수 고유의 프로퍼티는 arguments, caller, length, name, prototype가 있다.
function increase(num) {
  return ++num;
};

console.dir(increase);
/**
function increase(num) {
  return ++num;
}
arguments: null
caller: null
length: 1
name: "increase"
prototype: Object
__proto__: ƒ ()
*/

2.1 arguments 프로퍼티

  • 함수 인자로 전달받은 모든 값은 arguments 프로퍼티에 담긴다.
  • 이를 이용해 가변 인자 함수를 구현할 수 있다.
function sum() {
  const array = Array.prototype.slice.call(arguments); // arguments를 객체로 변환
  return array.reduce(function (pre, cur) {
    return pre + cur;
  }, 0); // 처음 pre에 집어넣을 값 설정이 반드시 필요
}

console.log(sum(1,2)); // 3
console.log(sum(1,2,3,4,5)); // 15
  • ES6 부터는 Rest 파라미터를 도입했기 때문에, 위와 같은 구현이 필요없다.
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

2.2 caller 프로퍼티

  • 함수 자신을 호출한 함수를 가리킨다.
  • 비표준 프로퍼티이므로, 사용하지는 말고 알아만 둘 것.
function foo(func) {
  return func();
}

function bar() {
  return 'caller : ' + bar.caller;
}

console.log(foo(bar)); // caller : function foo(func) { return func(); }
console.log(bar()); // caller : null

2.3 length 프로퍼티

  • 함수 정의 시 선언한 매개 변수의 개수
  • arguments 객체의 length는 인자의 개수, 함수 객체의 length는 선언한 매개변수의 개수를 가리킨다
  • 참고로 String 객체의 length는 문자열 길이를 가리킨다🤐
function foo() {};
console.log(foo.length); // 0

function bar(x,y,z) {};
console.log(bar.length); // 3

2.4 name 프로퍼티

  • 함수 객체의 name 프로퍼티는 함수 이름을 나타낸다
  • ES6 부터 정식 표준이 되었고, ES5에서는 동작이 조금 다르다
// 기명 함수
function foo() {};
console.log(foo.name); // foo

// 익명함수의 경우
const anonymous = function () {};
console.log(anonymous.name); // anonymous
// 단, ES5 에서는 "" 였다

2.5 proto 접근자 프로퍼티

  • 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는데, 이 슬롯에 직접 접근할 수는 없다
  • 이 때 사용하는 접근자 프로퍼티가 __proto__
const obj = {a: 1};

console.log(Object.prototype); // Object {}
console.log(obj.__proto__ === Object.prototype); // true

console.log(obj.hasOwnProperty('a')); // true

// hasOwnProperty()는 객체 고유의 프로퍼티인지 여부를 알려준다. 상속받은 프로퍼티는 false가 나온다
console.log(obj.hasOwnProperty('__proto__')); // false

2.6 prototype 프로퍼티

  • constructor 만이 가지는 프로퍼티
  • 자세한 건 19장 참조
const chkFun = (function () {}).hasOwnProperty('prototype');
console.log(chkFun); // true

const chkObj = ({}).hasOwnProperty('prototype');
console.log(chkObj); // false

0개의 댓글