[지식루프 IT공부] 함수 선언과 함수 표현식 차이, 사용 이유

 

 

---

1. 함수 선언 (Function Declaration)

function sayHi() { 
	console.log("안녕!"); 
}

• function으로 이름 있는 함수를 먼저 선언해.
• 코드를 어디서든 이 함수를 먼저 불러서 쓸 수 있어! (이걸 '호이스팅'이라고 해.)

예시:

sayHi(); // 가능!
function sayHi() { 
	console.log("안녕!"); 
}

 

---

 2. 함수 표현식 (Function Expression)

 

const sayHi = function() {
  console.log("안녕!");
}

 

• 함수 자체를 변수에 저장하는 방식이야.
• 이 방식은 코드가 실행되기 전에는 쓸 수 없어! (호이스팅 안됨)

 

예시:

sayHi();  // 에러 발생!

const sayHi = function() {
  console.log("안녕!");
}

 

 

---

쉽게 구분하는 핵심 정리

 

 

 

 

---

외우는 팁

함수 선언은 미리 약속한 친구
→ 어디서든 불러도 "안녕!" 해줌

함수 표현식은 나중에 만든 친구
→ 만들어지기 전엔 "나 몰라요~" 함

---

그냥 그럼 함수 선언을 하면 되지, 왜 굳이 함수를 변수에 저장하는 함수 표현식을 써?

 

함수 표현식을 쓰는 중요한 이유들!!

---

1. 익명 함수로 간결하게 쓸 수 있음

함수 표현식은 이름 없이도 쓸 수 있어서, 한 번만 쓸 함수를 만들 때 좋아.

 

setTimeout(function() {
  console.log("3초 뒤 실행");
}, 3000);

 

 

• setTimeout 안에 바로 함수를 넣는 것처럼 "필요한 곳에 함수 넣기" 딱 좋음!
• 이걸 콜백 함수라고 불러.

---

2. 조건에 따라 함수 만들 수 있음

 

 

let sayHi;

if (new Date().getHours() < 12) {
  sayHi = function() {
    console.log("좋은 아침!");
  }
} else {
  sayHi = function() {
    console.log("안녕하세요!");
  }
}
sayHi();

• 상황에 따라 다른 함수를 쓸 수 있어!
• 함수 선언으로는 이런 유연함이 없어.

---

3. 더 안전하게 쓰기 위해 (const와 함께)

 

const add = function(a, b) {
  return a + b;
}

 

 

• const로 선언하면 실수로 덮어쓰기 방지 가능!
• 함수 선언은 나중에 덮어쓰기 위험 있음.

---

4. 클로저(closure) 만들 때 자주 사용됨

 

function outer() {
  const secret = "비밀";

  return function() {
    console.log("비밀은:", secret);
  };
}

const reveal = outer();
reveal(); // 비밀은: 비밀

 

 

• 이런 식으로 함수 안에 함수를 담고, 나중에 쓰는 것도 함수 표현식 덕분에 가능함.
• 이건 함수 선언으로는 잘 안 됨.

---

5. 함수를 값처럼 다룰 수 있음

const funcs = [
  function() { console.log("첫 번째"); },
  function() { console.log("두 번째"); }
];

funcs[1](); // 두 번째​

 

• 함수도 숫자처럼 배열에 담고, 변수에 저장하고, 다른 함수에 전달할 수 있음.
• 이건 함수 표현식이기 때문에 가능함!

---

정리하자면

 

이유	설명
1. 콜백 함수로 쓰기 좋음	setTimeout, map, forEach 등에 바로 전달
2. 조건 따라 함수 만들기	상황에 따라 다르게 동작하는 함수 구성 가능
3. 변수에 담아 안전하게	const로 실수 방지
4. 클로저 활용	내부 상태를 기억하는 함수 생성 가능
5. 값처럼 자유롭게 사용	배열/객체에 담거나 다른 함수로 전달 가능