[JS] 자바스크립트 '함수 선언문'과 '함수 표현식' 차이

1. 함수 선언문과 함수 표현식 정의

 

자바스크립트에선 함수를 몇 가지 형태로

표현할 수 있다. 

 

function sing(){ //sing이란 함수 선언
	console.log("LaLaLa~");
}

sing(); //함수 호출. LaLaLa가 console 창에 출력된다.

 

가장 일반적으로 위의 코드처럼

함수이름(sing) 앞에 function

을 써서 함수를 만들어 줄 수 있다.

 

위와같은 형태를 함수 선언문이라고 한다.

 

let sing = function(){
	console.log("LaLaLa~"); 
}

sing(); //함수 호출. LaLaLa가 console 창에 출력된다.

 

두 번째 방법으론

변수 = function() 형태로

sing이란 이름의 변수를 선언(let sing)하고

그 뒤에 function()을 써주는 형태다.

 

위와 같은 형태를 함수 선언식이라고 한다.

 

 

함수 선언문과 함수 선언식 모두

똑같은 결과를 출력하는 것을 확인할 수 있다.

 

그렇다면 함수 선언문과 함수 선언식의

차이는 무엇인 걸까?

 

---

2. 함수 선언문과 함수 선언식의 차이

 

두 개의 차이는 '호출 가능 여부'에 있다.

 

2-1. 함수 선언문

 

위의 이미지는 함수 선언문으로

function sing이라는 sing이란 함수 아래에

sing();을 적어서 sing 함수를 호출한 것이다.

 

반면 위의 이미지의 경우

sing();을 적어서 sing이란 함수를 먼저 호출하고

그 아래에 function sing(), 즉 sing 함수를 작성해줬다.

 

sing 함수를 호출한 다음 

function sing()이란 함수 선언문을 작성했음에도

결과는 LaLaLa로 문제없이 나오는 걸 확인할 수 있다.

 

함수 선언을 하기도 전에 함수를 호출(sing();)하는

구문을 작성했는데 문제없이 결과가 나올 수 있는 이유는

자바스크립트에선 코드를 실행시키기 전에

초기화 단계에서 모든 함수 선언문을 찾아서 생성해 놓기 때문이다.

 

쉽게 말해 함수 선언문의 경우

함수 선언을 어디에서 하든 상관없다는 거다.

 

하지만 함수 표현식은 그렇지 않다.

 

 

2-2. 함수 표현식

 

 

함수 표현식의 경우 위의 코드처럼

함수를 선언한 다음 그 아래에 함수를 호출(sing();)해야

정상적으로 작동한다.

 

 

만약 함수를 먼저 호출하고

그 아래에 함수 표현식을 작성하면

TypeError가 뜬다. 

 

함수 표현식의 경우 코드를

한줄한줄 읽기 때문에 표현식을 쓸 때는

무조건 함수를 위에, 함수 호출을 그 아래에 작성한다.