[JS] 익명함수와 기명함수 | 함수 표현식 vs 함수 선언식

 

---

 

■ 기명 함수 ( Named Function )

■ 익명 함수 ( Anonymous Function )

■ 함수 표현식 vs 함수 선언식

---

 

JavaScript에서는 함수의 이름이 있는지, 없는지에 따라 크게 두 가지로 나눌 수 있어요.

이름이 있으면 기명 함수, 없으면 익명 함수라고 불러요.

 

기명함수, 익명함수에 대해 알아보아요.

그 후, 함수 선언식과 함수 표현식에 대해 알아봅시다!

---

■ 기명 함수 ( Named Function )

: 이름이 붙은 함수로, 선언식 또는 이름 있는 표현식으로 작성됩니다.

 

- 함수 이름이 존재하여 재귀 호출이 가능합니다.

- 디버깅 시 스택 트레이스에 이름이 표시됩니다.

 

// 함수 선언식
function greet() {
  console.log("Hello!");
}

// 함수 표현식
const greet = function sayHi() {
  console.log("Hi!");
};

---

■ 익명 함수 ( Anonymous Function )

: 이름이 없는 함수로, 주로 함수 표현식이나 콜백 함수에 사용됩니다.

 

- 이름이 없어 재귀 호출이 어렵습니다.

- 디버깅 시 anonymous로 표기되어 추적이 어려울 수 있습니다.

 

const greet = function () {
  console.log("hi");
};

setTimeout(function () {
  console.log("Hello after 1 second");
}, 1000);

// 화살표 함수
const double = (n) => n * 2;

setTimeout(() => {
  console.log("Arrow function!");
}, 1000);

---

■ 함수 표현식 vs 함수 선언식 

□ 호이스팅 여부 / 메모리 할당 시점

 

✔️ 함수 선언식 ( 호이스팅 O )

: 함수가 코드 실행 전에 메모리에 올라갑니다. → 선언 전 호출 가능 !

sayHello(); // 호출 가능
function sayHello() {
  console.log("Hello!");
}

 

✔️ 함수 표현식 ( 호이스팅 X )

: 변수만 호이스팅, 나머지는 호이스팅 되지 않음 → 선언 전 변수 값은 undefined, 호출하면 에러 !

- 함수 할당 시점에 메모리에 등록됩니다.

sayHi(); // TypeError 발생 !! 
const sayHi = function () {
  console.log("Hi!");
};

 

	함수 선언식	함수 표현식
호이스팅 여부	O	X
메모리 할당 시점	코드 실행 전	함수가 할당될 때

---