[js] 함수 표현식과 함수 선언, 호이스팅

1. 함수 표현식

표현식이란 = 기호를 사이에 두고 정의하는 것을 말합니다.

즉 a = 1 과 같은 것을 표현식이라 부릅니다.

 

아래 예시를 보면, var를 통해서 func1 이라는 변수를 선언하고 거기에 익명함수(이름이 없는)를 할당했습니다.

 

이 경우 함수 부분 이전에 함수를 호출하더라도, 아무 결과도 나오지 않습니다.

이때의 호이스팅(끌어올림)은 var func1 이라는 변수 선언만 끌어올리기 때문입니다.

할당은 함수가 쓰여진 부분에 가야 이루어집니다.

그래서 첫줄에서 함수를 호출해봐야 아무 일도 일어나지 않습니다.

// 함수 표현식은 변수 선언만 호이스팅 되므로 함수 자체의 내용은 아래에서 이루어진다. 고로 아무 결과도 나오지 않음.
func1()

// 함수 표현식 (A코드)
var func1 = function() { console.log("Func1")}

실행결과1

func1은 함수가 아니라고 나오네요. func1이란 변수는 끌어올렸지만, 그 내용은 안가져왔기 때문입니다.

 

함수 다음줄에서 실행하면 정상작동하죠.

실행결과2

 

 

 

2. 함수 선언

아래처럼 function 함수이름() { } 이렇게 선언하는 방식은 함수 전체가 호이스팅 됩니다.

그래서 함수 기록 이전에 함수를 호출해도 정상작동합니다.

// 함수 선언은 함수 전체가 호이스팅이 된다.
func2()

// 함수 선언 (B코드)
function func2() { console.log("Func2")}

실행결과3

 

보시다시피 함수 기록 전에 호출해도 정상작동되죠?

 

이상, 함수 표현식과 함수 선언의 차이에 대해 알아봤습니다. :)