[Javascript] 일급 객체, 함수의 프로퍼티

📦일급 객체란?

 

1. 무명의 리터럴로 생성할 수 있다 = 런타임에 생성이 가능하다.

2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.

3. 함수의 매개변수에 전달할 수 있다.

4. 함수의 반환값으로 사용할 수 있다.

 

여기서 1번 조건의 말이 어려운데 런타임에 생성된다는 건

정적으로 코드에 작성된 함수가 아니라, 프로그램이 실행되는 동안 필요할 때 새로운 함수를 만들어 낼 수 있다는 것.

// 사용자 입력을 받아서 그에 맞는 인사 함수를 생성하는 경우
function createGreeting(name) {
    // 여기 함수가 런타임에 생성되는 부분
    return function() {
        console.log(`안녕하세요, ${name}님!`);
    };
}

// 프로그램 실행 중에 사용자 입력을 받았다고 가정했을 때
const userName = "춘배";  // 사용자 입력
const greeting = createGreeting(userName);  // 여기서 새로운 함수가 생성됨

greeting(); // "안녕하세요, 춘배님!" 출력

 

 

Javascript의 함수는 위의 4조건을 모두 만족하므로, 일급객체라고 할 수 있다. 즉, 객체로 사용할 수 있다.

 

함수 = 일급 객체이므로 할 수 있는 것

• 함수형 프로그래밍 가능 (map, filter, reduce등)
• 클로저 구현 기능(데이터 캡슐화와 정보 은닉)
• 콜백 패턴 구형 가능(비동기 처리, 이벤트 처리)
• 고차 함수 구현 가능(함수를 인자로 받거나 반환)

 

하지만, 차이점도 존재한다.

• 일반 객체: 호출 불가능
• 함수: 호출 가능, 함수 고유의 프로퍼티를 소유함

여기서 함수의 프로퍼티란?

 

🔎함수의 프로퍼티

함수의 프로퍼티가 뭔지 알아보기 전,

객체의 모든 속성을 보여주는 함수인 console.dir함수를 이용해서 함수 하나를 뜯어보자

간단한 함수를 하나 만들고, console.dir로 뜯어보자

결과 값이 이렇게 나옴

조금 더 자세히 보기 위해 Object.getOwnPropertyDescriptors 메서드 사용

 

위의 두 결과 값에서 확인할 수 있는 arguments, caller, length, name, prototype은 함수 객체의 데이터 프로퍼티이다.

이 프로퍼티들은 일반 객체에서는 없는 함수 객체 고유의 프로퍼티이다.

각각의 프로퍼티가 무엇을 의미하는지 하나하나 뜯어보자

 

arguments 프로퍼티

함수 호출 시 전달된 인수들의 정보를 담고 있는 iterable한 유사 배열 객체이다.

그리고, 함수 내부에서 사용되므로 외부에서는 참조할 수 없다.

확인해보자

 

직접 arguments를 찍어보면 전달된 인수를 확인할 수 있다.

만약 인수가 여러개인데, 정해진 인수보다 적게 전달되면 undefined로 유지하고,

더 많다면 초과된 것은 결과에서는 무시하지만 arguments의 프로퍼티로 보관되긴 한다.

부족하게 전달되면 한개만 저장됨

초과하면 arguments에는 들어가지만, 결과값에선 무시

 

arguments는 iterable한 유사 배열 객체이므로, 이를 이용해 가변 인자 함수를 구현할 때 유용하다.

function sum() {
	let res = 0
    
    // iterable하므로 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

 

하지만 유사 배열 객체일 뿐, 진짜 배열은 아니므로 배열 메서드는 사용할 수 있다.

그래서 굳이 배열로 바꿔서 사용하려면

(1) 객체를 배열로 변환하는 방법

(2) ES6에 도입된 Rest 파라미터 사용(26장에서 배울 예정이래요)

// 1번 방법
const arr = Array.prototype.slice.call(arguments)

// 2번 방법
function sum(...arg) {
	return arg.reduce((pre, cur) => pre + cur, 0)
}

 

caller 프로퍼티

= 함수 자신을 호출한 함수

ECMAScript 사양에 포함되지 않은 비표준 프로퍼티이므로 참고로만 알아두자

down에서 caller를 찍으면 자신을 호출한 up이 나옴을 확인 가능

 

length 프로퍼티

= 함수를 정의할 때 선언한 매개변수의 개수

function temp1() {
	return temp1.length
}
console.log(temp1())    // 0

function temp2(arg1, arg2, arg3) {
	return temp2.length
}
console.log(temp2())    // 3

 

이 때, arguments의 length 프로퍼티와는 다르다.

function temp(arg) {
  // temp.length는 arg의 갯수 = 1
  console.log(temp.length)         // 1
    
    // arguments.length는 들어온 인수의 개수 = 4
    console.log(arguments.length)  // 4
}

temp(1, 2, 3, 4)

 

 

name 프로퍼티

= 함수 이름

ES6 이전에는 비표준이었지만, ES6에서 정식 표준이 되었음

그래서 ES5 이전에서는 익명 함수에서는 빈 문자열을 가짐 / ES6는 함수 객체를 가리키는 식별자를 값으로 가짐

// 이름이 있는 함수에서는 이름이 그대로 출력
let 기명함수 = function temp() {}
console.log(기명함수.name)    // temp

// 익명함수에서는 해당 함수를 가르키는 변수이름을 출력(ES6)
let 익명함수 = function() {}
console.log(익명함수.name)    // 익명함수

// 함수 선언문
function 선언된함수() {}
console.log(선언된함수.name)   // 선언된함수

 

 

__proto__ 접근자 프로퍼티

모든 객체는 [[Prototype]]이라는 내부 슬롯을 가짐

( = 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체, 19장에서 알아보자)

__proto__는 [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용되는 접근자 프로퍼티임

 

prototype 프로퍼티

생성자 함수로 호출할 수 있는 함수 객체(= constructor)만이 소유하는 프로퍼티

일반 객체와 생성자 함수로 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없음

// 함수 객체는 prototype 프로퍼티를 소유
(function () {}).hasOwnProperty('prototype')   // true

// 일반 객체는 없음
({}).hasOwnProperty('prototype')     // false

 

 

__proto__와 prototype이 이해가 안되서 클로드가 알려준 예시..(참고용)

function Dog(name) {
    this.name = name;
}

// 1. prototype 프로퍼티 사용
Dog.prototype.bark = function() {
    console.log('멍멍!');
};

const dog1 = new Dog('뽀삐');
const dog2 = new Dog('코코');

// 2. __proto__를 통한 메서드 접근
dog1.bark();  // "멍멍!" 출력
dog2.bark();  // "멍멍!" 출력

// 3. 프로토타입 체인 확인
console.log(dog1.__proto__ === Dog.prototype);         // true
console.log(dog1.__proto__.__proto__ === Object.prototype);  // true
console.log(dog1.__proto__.__proto__.__proto__);      // null

// 4. 함수의 프로토타입 체인
console.log(Dog.__proto__ === Function.prototype);     // true
console.log(Dog.__proto__.__proto__ === Object.prototype);   // true

 

시각적으로 보면

// 객체와 프로토타입의 관계
Dog (생성자 함수)
├── prototype: Dog.prototype
│   ├── constructor: Dog
│   ├── bark: function
│   └── __proto__: Object.prototype
└── __proto__: Function.prototype

dog1 (인스턴스)
├── name: "뽀삐"
└── __proto__: Dog.prototype

 

여기서 prototype은 함수만 가지고 있음