함수 선언식과 표현식 차이, 개발자를 위한 필수 가이드! - 코드카인 티스토리

안녕하세요! 😊 코드카인 여러분!

오늘은 JavaScript에서 함수 선언식과 함수 표현식의 차이점을 알려드릴게요. 혹시 "똑같이 함수를 정의하는데, 왜 이름이 다르고 용도가 다를까?"라는 궁금증이 생기셨다면, 지금부터 함께 알아볼까요?

---

🧐 함수 선언식(Function Declaration)이란?

함수 선언식은 별도의 변수 없이 함수 자체를 선언하는 방식입니다. 여러분이 요리책의 레시피를 떠올리면 쉬울 거예요. 책을 펼치면, 언제든 그 레시피를 사용할 수 있는 것처럼 함수 선언식으로 만든 함수는 코드 내 어디서든 사용할 수 있답니다.

📌 함수 선언식의 특징

1. 호이스팅(hoisting): 선언된 함수는 코드의 상단으로 끌어올려지기 때문에, 선언하기 전에 호출 가능!
2. 명확한 이름을 가질 수 있어, 디버깅에 유리해요.

✅ 코드 예제

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

// 호출
sayHello(); // 결과: Hello, CodeCaine!

📝 함수 선언식의 특이점

호이스팅 덕분에 아래처럼 함수 선언식은 호출 시점이 코드 순서와 상관없어요.

greet(); // 결과: Hi there!

function greet() {
    console.log("Hi there!");
}

---

🧐 함수 표현식(Function Expression)이란?

함수 표현식은 함수를 변수에 할당하는 방식으로 선언해요. 마치 "필요할 때만 꺼내 쓸 요리 도구"를 준비하는 것 같죠?

📌 함수 표현식의 특징

1. 호이스팅되지 않음: 선언 이전에는 사용할 수 없어요.
2. 익명 함수(anonymous function)로 사용할 수 있어요.

✅ 코드 예제

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

// 호출
greet(); // 결과: Hi, CodeCaine!

📝 함수 표현식의 특이점

호이스팅되지 않기 때문에 아래와 같은 코드는 오류를 발생시킵니다.

// 오류 발생
sayHi(); // ReferenceError: Cannot access 'sayHi' before initialization

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

---

😮 함수 선언식과 표현식, 어떻게 다를까?

특징	함수 선언식	함수 표현식
선언 방식	function 키워드로 직접 선언	변수에 익명 함수나 명명 함수 할당
호이스팅	함수가 끌어올려져 코드 어디서든 호출 가능	호이스팅되지 않아, 선언 이후에만 호출 가능
디버깅 및 이름 표시	함수 이름이 명확히 드러남	익명 함수 사용 시 이름이 없음

---

😊 일상 속 비유로 이해해요!

• 함수 선언식은 항상 같은 자리에 놓여 있는 도구함 같아요. 언제든 쉽게 꺼내 쓸 수 있어요.
• 함수 표현식은 필요할 때만 꺼내 쓰는 이동식 공구 같아요. 설정된 시점 이후에만 사용할 수 있죠!

---

😊 마무리하며..

이제 함수 선언식과 표현식의 차이, 조금은 감이 오셨나요? 🤔 상황에 맞는 방식을 골라 사용하면 코드를 더욱 깔끔하고 효율적으로 작성할 수 있을 거예요. 여러분의 코딩 여정을 응원합니다! 🚀