[JS] 18 함수와 일급객체 | 모던 자바스크립트 Deep Dive

sehannnnnnn·2021년 8월 26일
0
post-thumbnail

알다시피, 자바스크립트에서 함수는 객체이다.
그중에서도 일급 객체에 속한다.

일급 객체는 어떠한 것이 가능하며, 큰 특징들과 함수가 가지는 객체의 프로퍼티를 살펴보자.

1. 일급 객체

일급객체는 다음 4조건을 만족해야함.

  1. 무명의 리터럴로 생성 할 수 있다. 즉, 런타임에 생성이 가능하다.
const increase = function (num) {
	return ++num;
    }

const decrease = function (num) {
	return --num;
    }
  1. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
const obj = { increase, decrease };
  1. 함수의 매개변수에 전달 할 수 있다.
function cal(func,num){
	return func(num);
}

console.log(cal(increase,1)); //2
console.log(cal(decrease,1)); //0
  1. 함수의 반환값(return)으로 사용할 수 있다.
function cal(mode){
    var funcs = {
        'plus' : function(left, right){return left + right},
        'minus' : function(left, right){return left - right}
    }
    return funcs[mode]; // 리턴 값으로 함수를 사용
}

console.log(cal('plus')(2,1)); // 3

함수는 값을 사용할 수 있는 곳 (변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문)에서 어디든지 리터럴로 정의 할 수 있으며, 런타임에 함수 객체로 평가된다.

차이점:
함수는 호출할 수 있지만 객체는 호출할 수 없음. 또한 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다.

2. 함수 객체의 프로퍼티

함수 또한 객체이기 때문에 프로퍼티를 가진다.

간단하게 정의한 square 함수에 console.dir() 메소드를 이용하여 내부를 보면.

함수의 모든 프로퍼티 어트리뷰트 확인
Object.getOwnPropertyDescriptors

함수객체 내부에는 argument, caller, length, name, prototype의 데이터 프로퍼티를 갖고 있으며, 이들은 일반 객체에는 없는 함수 객체 고유의 프로퍼티이다.
['_proto'_] 라는 접근자 프로퍼티도 하나 갖고 있다.

arguments 프로퍼티

arguments객체는 호출시 전달된 인수들의 정보를 담고 있는 순회가능한(iterable) 유사 배열 객체이며, 함수 내부에서 지역변수처럼 사용된다. 단, 함수 외부에서는 참조 할 수 없다.

arguments 객체 내부에는 함수의 매개변수를 프로퍼티 값으로 소유하고 있는 것을 확인 할 수 있다.

arguments 객체 안에 함수의 인수정보가 각각 입력받은 순서를 키를 배정받아 저장되어 있으며, 함수 호출 시 필요한 매개변수가 부족할 시 또는 초과할 시에도 arguments안에 저장된다.

그 외 다른 프로퍼티
callee : 호출되어 arguments를 생성한 함수, 즉 함수 자신을 가르킴
length : 객체의 인수 개수를 가르킴
name : 호출된 함수의 이름을 저장함
Symbol(Symbol.iterator) : arguments 객체를 순회가능한 자료구조로 만들기 위한 프로퍼티이다.

arguments 객체의 사용용도

자바스크립트는 함수 호출 시 전달되는 인수의 개수를 확인하지 않는다. 인수가 몇개든 에러가 나지 않기에, 몇개에 인수를 받았는지를 확인하고 그에 따라 다른 동작을 정의할 필요가 있다. 이 때 유용하게 사용되는 것이 arguments 객체이다!

이런 함수를 가변인자함수라 하고 arguments는 가변인자함수를 구현할 때 유용하다.

//인수를 몇개를 받더라도 작동하는 sum() 함수!

arguments는 마치 배열같은 자료구조를 갖고있지만 그와 다른 유사 배열 객체이다.
유사 배열 객체란 length 프로퍼티를 가진 객체로 for 문으로 순회할 수 있는 객체를 말한다.
-> 이들은 배열메서드를 사용할 경우 에러가 발생하며, 배열 메서드를 사용하려면 Function.prototype.call, Function.prototype.apply를 사용해 간접호출해야한다.
-> 요러한 번거러움을 해결하기위해 Rest 파라미터를 도입했다. (사용을 잘안함)

caller 프로퍼티

ECMAScript 사양에 포함되지 않은 비표준 프로퍼티이다. arguments를 생성한 함수 (함수 자기자신)를 가르키고 있는 프로퍼티이다.

length 프로퍼티

함수를 정의할 때 선언한 매개변수(parameter)의 개수를 가르킨다.

arguments.length 와 다른 점!

함수 호출시 저장된 인수(arguments)의 수를 나타내는 것이 arguments.length이고

함수 정의 시 선언한 매개변수의 개수를 가르키는 것이 함수객체의 length 프로퍼티이다.

name 프로퍼티

함수의 이름!을 나타낸다. -> 함수의 이름은 곧 함수객체를 가르키는 식별자를 의미한다.

proto 접근자 프로퍼티

모든 객체는 [[Prototype]]라는 내부 슬롯을 갖는다.

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

profile
FE 개발자 준비생 블로그 🪐

0개의 댓글