[JavaScript] 함수와 일급 객체

SOLEE_DEV·2022년 1월 18일
0

Javascript

목록 보기
18/19

일급 객체

일급 객체의 조건

  1. 무명의 리터럴로 생성할 수 있다.
function (num) { return ++num; }
  1. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다
const decrease = function (num) { return --num; };
  1. 함수의 매개변수에 전달할 수 있다.
  2. 함수의 반환값으로 사용할 수 있다.
function makeCounter(decrease) { return decrease(1); }

함수가 일급객체?

함수를 객체와 동일하게 사용할 수 있다는 의미로,
객체는 값이므로 함수는 값과 동일하게 취급할 수 있음

일반 객체와의 차이

  • 일반 객체 : 호출할 수 없다.
  • 함수 객체 : 호출할 수 있으며, 일반 객체에는 없는 함수 고유의 프로퍼티를 소유함

함수 객체의 프로퍼티

console.dir(function() { ... });
// name: "" 출력
function square(number) {
  return number * number;
}
                        
console.log(Object.getOwnPropertyDescriptors(square));
// __proto__는 square 함수의 프로퍼티가 아님
// __proto__ = Object.prototype 객체의 접근자 프로퍼티
// Object.prototype 객체로부터 프로토타입 체이닝 타고 상속을 받아서 접근이 가능해짐

arguments 프로퍼티

  • 유사 배열 객체 (Arguments 조회시, 1) length가 존재, 2) 키 값이 숫자로 순차적으로 형성 ) 이면서,
  • 이터러블한 객체 ( Symbol(Symbol.iterator): f values() )
const a = [1,2,3]
const alter = a[Symbol.iterator]();
alter.next();
// { value: 1, done: false } 가 반환
  • arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용함

이렇게 이터러블한 객체일 경우, [...a] 이렇게 펼치기가 가능!
= Symbol.iterator를 활용하면 펼치기 연산이 가능

function sum() {
    let res = 0;
    for (const i of arguments) {
        res += i;
    }
    return res;
}

console.log(sum(1,2,3,4,5));

하지만, 이터러블을 지원하지 않는 환경에선 여전히 유사 배열 객체로써 존재!

const a = [1,2,3]
const b = a.slice() // 깊은 복사

console.log(a === b);

// 이터러블 환경을 지원하지 않을 땐 이렇게 썼음
const array = Array.prototype.slice.call(arguments);
// false

// 하지만 지금은 요걸 지원해서 자동으로 배열 반환해줌
function sum(...args) {
  return args.reduce({pre, cur} => pre + cur, 0);
}

length 프로퍼티

  • 함수를 정의할 때 선언한 매개변수의 개수를 가리킴
  • 이 때, arguments.length와 함수 객체의 length 프로퍼티의 값은 다를 수 있음
  • arguments.length = 인자의 개수
  • 함수 객체의 length 프로퍼티 = 매개 변수의 개수!
function sum(x, y) {
    console.log(arguments.length); // 5
    let res = 0;
    for (const i of arguments) {
        res += i;
    }
    return res;
}

console.log(sum(1,2,3,4,5));
console.log(sum.length); // 2

name 프로퍼티

  1. 기명 함수 표현식
  2. 익명 함수 표현식 // ES6 : 함수 객체를 가리키는 식별자를 값으로 가짐
  3. 함수 선언문
const a = func => console.dir(func);

a(function() { }) // name : 빈 문자열
a(() => { }) // name : 빈 문자열

const b = a.bind({});
b.name
// 'bound a'

proto 접근자 프로퍼티

  • 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가짐
  • [[Prototype]] 내부 슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체
  • proto 프로퍼티
    1. 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티
    1. 내부 슬롯에 직접 접근할 수 없고, 간접적인 접근 방법을 제공하는 경우에 한하여 접근할 수 있음

prototype 프로퍼티

  • 생성자 함수로 호출할 수 있는 함수 객체
  • constructor만이 소유하는 프로퍼티
  • 일반 객체, 생성자 함수를 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없음
  • 호출될 때 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킴
(function() {}).hasOwnProperty('prototype') // true

Arrow function, class 내부에 있는 함수에는 prototype이 없음

profile
Front-End Developer

1개의 댓글