함수 선언문, 함수 표현식, 함수 호이스팅

함수 선언문은 함수가 정의되기 전에 호출될 수 있다

호이스팅 : 자바스크립트 실행될 때, 변수 함수 선언을 메모리에 <미리> 할당하는 것을 의미

1️⃣ 함수 선언문

함수명 정의, 별도 할당 명령이 없다

함수 전체를 호이스팅 된다

함수 이름을 꼭 지정해줘야 한다, 힘수 이름이 있지 않으면 부를 수 없다

// 함수 선언문
function sum(a, b) {
  return a + b;
}

sayHello();

function sayHello() {
  console.log("Hello, world!");
} // Hello, world!

// sayHello() 함수가 호이스팅 되어도 코드 실행 전에 미리 메모리 등록되기 때문

2️⃣ 함수 표현식

정의한 function 별도의 변수에 할당하는 것

별도의 변수에 할당하게 되는 것

변수는 선언부, 할당부를 나누어서 호이스팅 하게 된다

선언부만 호이스팅 된다

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

sayHello(); // ReferenceError

const sayHello = function () {
  console.log("Hello, world!");
};

// `sayHello`는 `undefined` 상태이므로, 함수로 실행할 수 없어 에러가 발생한다

함수 표현식은 호이스팅되지만, 함수 자체가 아닌 "변수 선언"만 끌어올려진다

✔️익명함수
이름이 없는 함수, 변수명에 저장된 형태
재사용 하지 않는 한번만 사용할 함수를 위한 개념

3️⃣ 함수 선언문, 함수 표현식 함께

expression(); // Ouput: TypeError: expression is not a function

var expression = function hoisting() {
  console.log('Will this work?');
};

// 자바스크립트 내부 동작은 사실 이렇게 이루어짐

var expression; // 호이스팅 (선언만)

expression(); // TypeError: expression is not a function

expression = function hoisting() {
  console.log('Will this work?');
};

변수 선언(var)과 함수 표현식의 호이스팅 동작 차이

→ expression을 호출할 때 아직 함수로 초기화되지 않았으므로 오류 발생한 것

1. 호이스팅 과정에서 변수 선언(var expression)만 위로 끌어올려진다
   • var 키워드는 호이스팅되지만, 초기화(할당)는 원래 코드 순서에서 이루어진다
   • 따라서 expression은 초기값 undefined
2. 실행 과정에서 expression();을 호출할 때 undefined();가 실행된다
   • undefined는 함수가 아니므로 TypeError 발생한다

해결방법

1. 함수 선언문 사용

   함수 선언문은 전체 함수가 호이스팅 되기에 호출 전에 사용 가능하다

2. 함수 표현식 사용

   선언 후 호출

   var expression = function hoisting() {
     console.log('Now it works!');
   };
   
   expression(); // 정상 실행