2026년 1월 6일
모던 자바스크립트 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변수에 함수 이름을 가진 함수를 등록할 때 함수의 이름은 외부에서는 참조가 불가능하나, 함수의 내부에서는 참조가 가능하다.