[JS] 모던 자바스크립트 Deep Dive - 18장

Leona·2023년 12월 1일

Javascriptm deep dive 모던 자바스크립트

[JS] 모던 자바스크립트 Deep Dive

목록 보기

3/5

함수와 일급 객체

18.1 일급 객체

객체와 동일하게 사용할 수 있음
객체 = 값이므로 함수 역시 값과 동일하게 취급할 수 있다.
값을 사용할 수 있는 곳이면 어디든 리터럴로 정의할 수 있다.
런타임(할당 단계)에 함수 객체로 평가
함수형 프로그래밍을 할 수 있는 자바스크립트의 큰 장점 중 하나

함수가 일급객체로 취급받는 조건

함수는 무명의 리터럴로 생성할 수 있다.
함수는 변수에 저장할 수 있다.

런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.

const increase = (num) => {
  return ++num;
}

const decrease = (num) => {
  return --num;
}

함수는 객체에 저장할 수 있다.
```
const funcs = { increase, decrease }
```

함수의 매개변수에 전달할 수 있고, 함수의 반환값으로도 사용할 수 있다.

const makeCounter = (func) => {
  let num = 0;
  
  return () => {
    num = func(num);
    
    if (num < 0) {
      return 0;
    }
    
    return num;
  }
}

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

일반 객체와 달리 호출할 수 있다.

const increaser = makeCounter(funcs.increase);
const decreaser = makeCounter(funcs.decrease);

// Quiz  
console.log(increaser); // ???

console.log(decreaser); // ???
console.log(decreaser); // ???

18.2 함수 객체의 프로퍼티

일반 객체에는 없는 함수의 데이터 프로퍼티
접근자 프로퍼티인 _ proto _ 는 Object.prototype을 상속받고 있다.

18.2.1 arguments

함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사배열 객체
함수 내부에서 지역 변수처럼 사용(함수 외부에서 참조할 수 없음)
ES3부터 표준에서 폐지되었기 때문에 함수 내부에서 지역 변수처럼 사용

자바스크립트는 함수의 매개변수와 인수 개수가 일치하는지 확인하지 않기 때문에 매개변수만큼 인수를 전달하지 않아도 에러 발생하지 않음

function multiply(x, y) {
  console.log(arguments)

  return x * y
}

// Quiz
console.log(multiply());		// NaN
console.log(multiply(1));		// ???
console.log(multiply(1, 2));	// 2
console.log(multiply(1, 2, 3)); // ???

함수 안에서 매개변수가 선언되고 undefined로 초기화된 이후 인수 할당
인수가 전달되지 않은 매개변수는 undefined로 초기화된 상태를 유지
초과된 인수는 무시함(무시하는 것이지 암묵적으로 arguments 객체 프로퍼티에 보관)
caller: arguments 객체를 생성한 함수 자신을 가리킨다.
Symbol(Symbol.iterator): arguments 객체를 순회 가능한 이터러블 자료구조로 만들기 위한 프로퍼티
arguments 객체는 배열 형태이지만 실제 배열이 아닌 유사 배열 객체이므로 for문으로 순회할 수 있다. 그러나 배열 메서드를 사용할 경우 에러가 발생한다. Function.prototype.call, Function.prototype.apply로 간접 호출해야 함
간접 호출하는 번거로움을 없애고자 ES6에서 도입한 Rest 파라미터
```
// args: 가변 인자
function sum(...args) {
return args.reduce((pre, curr)) => pre + curr, 0);
}

console.log(sum(1, 2));			  // 3
console.log(sum(1, 2, 3, 4, 5));  // ???
```
유사 배열 객체와 이터러블
ES6부터 이터러블이 도입되면서 arguments 객체는 유사 배열 객체이면서 동시에 이터러블이다.
이터러블은 순회 가능한 자료구조를 말한다.

18.2.2 caller

ECMAScript 사양에 포함되지 않은 비표준 프로퍼티이며 표준화 예정도 없는 프로퍼티
함수 자신을 호출한 함수를 가리킨다는 것을 알고만 있으세용

18.2.3 length

함수를 정의할 때 선언한 매개변수 개수(위에서 봤죵?)
유의: arguments의 length는 인자의 개수를, 함수 객체의 length는 매개변수의 개수!

18.2.4 name

함수 이름을 나타내는 프로퍼티

ES6에서 정식으로 표준화

// 기명 함수 표현식
const namedFunc = function foo() {};
console.log(namedFunc.name);	// foo

// 익명 함수 표현식
const anonymousFunc = function() {};
console.log(anonymousFunc.name);
// ES5: ''
// ES6: anonymousFunc

// Quiz. 함수 선언문에서는 함수 객체를 가리키는 식별자
function bar() {};
console.log(bar.name);	// ???

18.2.5 _ _ proto _ _

모든 객체가 갖는 내부 슬롯
객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티

hasOwnProperty
인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티인 경우에만 true를 반환, 상속받은 프로토타입인 경우 false 반환