호이스팅 in javascript

함수 표현식으로 정의된 함수는 호이스팅에 의해 선언과 할당이 분리되므로
참조하려는 함수가 ~보다 반드시 위에 작성되어야 합니다.

여기서 ~는 중요한게 아니고. 암튼 먼저 작성되어야 한다는 사실인데

함수 표현식이란?

함수를 변수에 할당하거나 다른 곳에 전달할 때 사용하는 표현 방식

1. 익명 함수 표현식 (Anonymous Function Expression)
   이름 없이 함수를 선언해서 변수에 할당해요.

   var greet = function(name) {
     return "Hello, " + name;
   };
   
   console.log(greet("Alice")); // 출력: Hello, Alice

2. 이름 있는 함수 표현식 (Named Function Expression)
   함수에 이름을 붙여서 디버깅이나 재귀 호출 시 유리해요. 단, 외부에서는 이름으로 직접 호출할 수 없고 변수로 접근해야 해요.

   var greet = function sayHello(name) {
     return "Hello, " + name;
   };
   
   console.log(greet("Bob")); // 출력: Hello, Bob
   // sayHello는 함수 내부에서만 사용 가능해요.

3. 화살표 함수 표현식 (Arrow Function Expression)
   ES6부터 추가된 간결한 문법의 함수 표현식이에요. this를 상위 스코프에서 가져오고, 코드가 짧아지는 장점이 있어요.

   const greet = name => "Hello, " + name;
   console.log(greet("Charlie")); // 출력: Hello, Charlie

4. 즉시 실행 함수 표현식 (Immediately Invoked Function Expression, IIFE)
   함수를 선언하자마자 바로 실행하는 형태예요. 주로 변수의 스코프를 제한할 때 사용됩니다.

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

이처럼 함수 표현식은 익명, 이름 있는, 화살표, IIFE 등 여러 종류로 나뉘며, 상황에 맞게 적절한 형태를 선택해서 사용합니다.

선언과 할당부가 분리된다는 건?

함수 표현식을 예로 들면, 함수를 만드는 두 단계가 있다는 뜻이에요.

1. 선언 단계:
   먼저, 변수 이름을 선언합니다. 이 단계에서는 아직 함수가 들어있지 않아서 변수는 비어 있거나 undefined 상태예요.

2. 할당 단계:
   나중에 그 변수에 실제 함수(함수의 코드)를 할당합니다. 이때부터 그 변수는 함수로 동작하게 돼요.

// 1. 변수 선언 단계 (hoisting에 의해 변수는 선언되지만, 값은 아직 없음)
var myFunction;

console.log(myFunction); // 출력: undefined

// 2. 할당 단계: 변수에 함수가 할당됨
myFunction = function() {
  console.log("안녕하세요!");
};

myFunction(); // 출력: "안녕하세요!"

이렇게 함수 표현식에서는 함수를 선언(변수 생성)한 후에 함수를 할당하기 때문에, 선언과 할당이 분리되어 있다고 말해요.

반면, 함수 선언문은 한 번에 함수의 이름과 내용을 모두 정의하기 때문에, 선언과 할당이 동시에 이루어집니다.