[JavaScript] 함수 표현식

목차

자바스크립트의 함수 표현식: 다른 시각으로 함수를 바라보기 🎭

안녕하세요, 웹 개발에 흥미 있는 여러분! 오늘은 자바스크립트에서 함수를 정의하는 또 다른 방법인 "함수 표현식"에 대해 알아보려고 합니다. 함수 선언 방식만 알고 계셨던 분들에게는 새로운 시각을 제공할 수 있을 것 같아요. 그럼 지금부터 시작해볼까요?

 

1. 🔍 함수 표현식이란?

함수 표현식은 함수를 변수에 할당하는 방식으로 함수를 정의하는 것을 말합니다. 이 방식은 함수를 선언하고 이름을 붙이는 대신, 익명 함수를 변수에 할당하여 사용합니다.

 

2. 🌟 함수 표현식의 특징

• 익명 함수: 대부분의 경우, 함수 표현식은 이름이 없는 익명 함수를 사용합니다.
• 변수 할당: 함수가 변수에 할당되므로, 해당 변수 이름을 통해 함수를 호출합니다.
• 호이스팅: 함수 표현식은 변수 호이스팅의 영향을 받지만, 함수 호이스팅은 발생하지 않습니다.

 

3. 🚀 함수 표현식 작성하기

기본적인 함수 표현식

const sayHello = function(name) {
    return `안녕하세요, ${name}님!`;
};

console.log(sayHello("지수")); // 출력: 안녕하세요, 지수님!

즉시 실행 함수 표현식 (IIFE)

(function() {
    console.log("즉시 실행되는 함수입니다!");
})();

화살표 함수 표현식

const add = (a, b) => a + b;

console.log(add(5, 3)); // 출력: 8

 

4. 📌 함수 표현식 vs 함수 선언

함수 표현식과 함수 선언 방식의 주요 차이점은 "호이스팅"입니다. 함수 선언은 호이스팅되어 함수 정의 이전에도 호출할 수 있지만, 함수 표현식은 변수 호이스팅의 규칙을 따릅니다.

 

🎈 마치며...

함수 표현식은 자바스크립트에서 함수를 다루는 또 다른 방법입니다. 특히 익명 함수나 즉시 실행 함수, 화살표 함수와 함께 사용할 때 그 진가를 발휘합니다. 상황에 따라 적절한 방식을 선택하여 사용하는 것이 중요합니다.

---

💡 팁: 함수 표현식은 콜백 함수를 전달하거나, 즉시 실행 함수를 정의할 때 유용하게 사용됩니다.

---

💻 Happy Coding! 💻

---

Reference:

function expression - JavaScript | MDN

---