[javascript] 함수 2 / 함수의 선언 방식(함수 선언식, 함수 표현식, 화살표함수, 즉시실행 함수)

함수의 선언 방식

• 함수를 어떻게 정의하는지, 즉 문법적인 형태에 따라 분류됨

1. 함수 선언식 (기본방법)

• 가장 기본적인 함수 선언 방식
• 이름이 있고, function() 형태로 선언
• 호이스팅(Hoisting)이 됨 → 선언 전에 호출 가능

✓ 코드에서 가장 먼저 선언되고, 어디서든 사용할 수 있다!

// [문법]
function 함수이름(매개변수1, 매개변수2, ...) {
  // 실행할 코드
  return 반환값;
}

sayHello(); // 가능! (호이스팅 때문)

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

---

2. 함수 표현식

• 변수에 익명 함수(이름 없는 함수) 또는 이름 있는 함수를 담는 방식
• 호이스팅 X → 선언 전에 호출하면 에러 발생
• 조건문 안에서 선언할 경우 반드시 함수 표현식으로 선언해야 정상 작동 함

✓ 🎁 함수 자체가 드러나는 게 아니라, 변수에 '표현'되어 담긴 형태

// [문법]
const 함수이름 = function(매개변수1, 매개변수2, ...) {
  // 실행할 코드
  return 반환값;
};

// sayHi(); // 에러! 선언 전에 호출 불가

const sayHi = function(name) {
  console.log("안녕하세요, " + name + "님!");
};

sayHi("john"); // "안녕하세요, john님!"

---

함수 선언식 vs 함수 표현식

항목	함수 선언식	함수 표현식
선언 방식	function 함수이름()	const 변수 = function()
함수 이름	반드시 있어야 함	없어도 됨 (익명 함수 가능)
호이스팅(끌어올림)	O (선언 전 호출 가능)	X (선언 전 호출 불가)
사용 위치	어디서든 호출 가능 (코드 상단에서도)	선언 이후에만 사용 가능
대표 사용처	일반적인 함수	콜백 함수, 조건문 안에서 사용 등

조건문(if 등) 안에서 함수 선언식과 표현식이 어떻게 다르게 동작할까?

1. 조건문 안의 함수 선언식 (비권장)

• 일부 브라우저(특히 strict mode)에서는 함수 선언식이 블록 스코프에서 제대로 동작하지 않음
• 호이스팅이 블록 외부에서 인식되지 않음 → test() 호출 불가
• 에러가 발생하는 이유 : 함수 선언식은 호이스팅이 전역/함수 레벨로 작동
  •  조건문 안에서는 호이스팅 위치가 애매해짐
  • 최신 자바스크립트(ES6 이후)에서는 let, const처럼 블록 스코프를 지원하긴 하지만, 함수 선언식은 여전히 스펙상 모호해서 환경마다 다르게 해석될 수 있음

if (true) {
  function test() {
    console.log("test!");
  }
}

test(); // ❌ 일부 환경에선 에러 or undefined

2. 조건문 안의 함수 표현식 (OK!)

• 함수가 변수 안에 표현 되어 있어서,
• 해당 블록 안에서만 유효하게 작동
• 정상 작동하는 이유 : 함수 표현식은 변수와 같음
  
  • const, let처럼 블록 스코프 안에서만 유효
  • 조건문 안에서 안전하게 정의하고 사용할 수 있음

if (true) {
  const test = function() {
    console.log("test!");
  };

  test(); // ✅ 정상 출력
}

 

[javascript] 함수 2-1 / 기명함수와 익명함수

 

---

3. 화살표 함수 (Arrow Function)

• function 키워드 대신 => 사용
• 간결한 문법
• this가 기존 함수와 다르게 동작함 (주로 객체나 클래스에서 중요)
• 호이스팅 X

---

4. 즉시 실행 함수 (IIFE:Immediately Invoked Function Expression )

• 함수를 정의하자마자 즉시 호출하여 실행되는 함수
• 일반적으로 괄호 ()로 감싸서 함수 표현식으로 만든 후, 바로 실행 괄호 ()를 붙여 사용함

특징

• 한 번만 실행됨 (재사용 목적이 아님)
• 변수의 범위(스코프)를 제한해서 전역 오염을 막기 위해, 초기화 코드 실행용, 다른 코드와의 충돌을 피하기 위해 사용
• 스코프를 분리하여 변수나 함수의 은닉이 가능

문법 구조

(function() {
  // 실행할 코드
})();

//또는

(() => {
  // 실행할 코드
})();

구성 요소

(function(name) {
  console.log(name + "님, 환영합니다");
})("사용자");

• (function() { ... }) → 함수 표현식
• () → 함수 호출 연산자
• 전체는 정의와 동시에 실행됨