[JS] - 함수 선언식과 함수 표현식이란? 간단하고 쉽게 이해하기(예제코드, 함수 선언식과 함수 표현식의 차이점, var 함수 표현식 호이스팅 에러 이유)

🧹 간단설명

함수 선언식 : function add () {}

함수 표현식 : var add = function() {}

(위 설명은 정말로 너무 간단하게 설명한 것이고 자세한 내용을 확인하려면 아래로..👀)

---

✌🏻 자바스크립트 함수 생성 2가지 방법

자바스크립트에서 함수를 만드는 방법에는 주로 두 가지가 있다.

함수 선언식(Function Declarations)과 함수 표현식(Function Expressions).

 

이 두 방법은 유사해 보일 수 있지만, 몇 가지 중요한 차이점을 알아보자.

 

---

🏭 함수 선언식(Function Declarations)

함수 선언식은 'function' 키워드로 시작하고 함수 이름을 명시한다.

함수 선언식은 호이스팅이 된다. 함수가 선언되기 전에도 호출할 수 있다.

 

🧑🏻‍💻예제코드

console.log(greet()); // "Hello, World!"

function greet() {
  return "Hello, World!";
}

 

greet 함수는 선언 전에 호출되었음에도 불구하고 정상적으로 작동한다.

이는 함수 선언식이 호이스팅되기 때문.

---

🏭 함수 표현식(Function Expressions)

함수 표현식은 변수에 함수를 할당하는 형태로 작성된다.

호이스팅되지 않으며(정확히는 변수 호이스팅이 적용됨) 선언되기 전에는 호출할 수 없다.

 

🧑🏻‍💻 예제코드

console.log(greetExpr()); // TypeError: greetExpr is not a function

var greetExpr = function() {
  return "Hello, World!";
};

 

greetExpr 함수는 함수 표현식을 사용하여 정의되었있다.

이 함수를 선언하기 전에 호출하려고 하면, TypeError 발생.

여기서 궁금한 점은 'var'로 표현해도 왜 상단에서 사용이 안될까!?

var로 선언된 (함수 표현식) 변수는 호이스팅되어 undefined로 초기화 된다.(greetExpr()에서 greetExpr로 수정해서 확인해보자!) 

이 때문에 선언 전에 함수를 호출하려고 하면 변수는 undefined이고, undefined는 함수가 아니기 때문에 TypeError가 발생

---

🎼 함수 선언식과 함수 표현식의 주요 차이점

호이스팅

함수 선언식 : 호이스팅되어 함수 전체가 스코프의 최상단으로 끌어올려진다

함수 표현식 : 함수 표현식의 경우 변수는 호이스팅되지만, 함수가 할당되지 않았기 때문에 함수 자체를 호출할 수는 없다

 

함수 이름

함수 선언식 : 이름을 가질 수 있으며, 이 이름은 함수 내부에서만 접근 가능.

함수 표현식 : 이름을 가질 수도 있고(기명 함수), 없을 수도 있다(익명 함수).

 

스코프

함수 선언식 : 함수 또는 전역 스코프에서 정의.

함수 표현식 : 변수의 스코프 규칙을 따른다.