모던 자바스크립트 Deep Dive로 공부를 하면서 새롭게 알게 된 내용들을 간단하게 정리하려고 합니다.

함수 선언은 식별자를 암묵적으로 생성해준다.

function add (a,b) {
	return a + b
}

여기서 add라는 함수의 이름은 자바스크립트 엔진이 암묵적으로 함수 이름을 식별자에 할당해서 사용가능하게 한다.

함수 이름과 식별자

const add1 = function add2 (a,b) {
	return a + b
}

console.log(add1(1,2)) // 3
console.log(add2(1,2)) // Uncaught ReferenceError: add2 is not defined

함수를 변수에 등록할 경우 식별자로 동작한다.

생성자 함수로 생성한 함수는 클로저가 동작하지 않는다.

const createAdd10Fn = () => {
    const ten = 10;
    return new Function('a', `return a + ten`);
  };

  const add10Fn = createAdd10Fn();
  console.log(add10Fn(1)); // ReferenceError: ten is not defined

근데

const createAdd10Fn = () => {
    const ten = 10;
    return new Function('a', `return a + ${ten}`);
  };

  const add10Fn = createAdd10Fn();
  console.log(add10Fn(1)); // 11

이렇게 처리하면 동작한다. 생성자 함수는 어디에서 사용될지 궁금하다. 지금까지 한번도 사용해보지 않았다.

함수에서 arguments

function add1(a, b) {
    console.log(arguments);
    return a + b;
  }
  add1(1, 2, 3); // 위에 console.log Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

  const add2 = (a, b) => {
    console.log(arguments);
    return a + b;
  };
  add2(1, 2, 3); //  ReferenceError: arguments is not defined

함수 선언문에서는 arguments를 통해서 함수의 arguments을 확인가능하다. 단, 함수 표현식에서는 불가능하다.

즉시 실행 함수의 여러 방법

(function () {
    console.log(1)
})();
(function () {
    console.log(2)
}());
!function () {
    console.log(3)
}();
+function () {
    console.log(4)
}();

1,2 방법은 많이 봤는데 3,4는 처음 봤다. 연산자를 통해서 함수 리터럴을 생성하여 사용 가능하다.

재귀 함수에서의 함수 이름 호출

const countdown = function innerCountdown(count) {
  if (count <= 0) return;
  console.log(count);
  innerCountdown(count - 1);
};

countdown(3);
// 3
// 2
// 1

변수에 함수 이름을 가진 함수를 등록할 때 함수의 이름은 외부에서는 참조가 불가능하나, 함수의 내부에서는 참조가 가능하다.