[javascript] 함수 선언식, 함수 표현식

갑자기 열정 넘쳐서 미뤄왔던 javascript 관련 포스팅 목록을 작성하고 있다.

시간이 있을 때 작성해놔야한다는 것은 만고불변의 진리다.

 

오늘 작성하고자 하는 내용은 javascript에서 함수를 작성하는 방식에 관한 내용으로 기존의 방식으로 function을 선언하는 함수 선언식과 변수처럼 함수 내용을 써내려가는 함수 표현식 두 가지에 대해 알아보도록 하자.

 

 

[javascript] 함수 선언식, 함수 표현식

 

함수를 정의하는 방식과 각 방식별 간단한 사례를 살펴보자.

 

1) 함수 선언식

 

일반적으로 다들 많이 쓰는 함수 정의 방식이다.

doSomething();

// 함수 선언식 방식
function doSomething() {
   alert("test function!");
   console.log("blah blah blah....");   
}

 

doSomething이라는 이름의 함수를 선언했고 선언과 동시에 function 내용을 함께 정의해줬다.

선언과 할당. 어디서 많이 본 느낌인데? 싶으면 자연스럽게 호이스팅 (hoisting)의 개념도 떠오를거라고 생각된다.

함수선언문의 경우는 변수처럼 호이스팅되어 상단으로 끌어올려진다.

 

그렇기 때문에 doSomething 함수가 호출보다 나중에 선언되었음에도 불구하고 정상적으로 수행되어진다.

 

 

2) 함수 표현식

 

이름만보면 매우 생소해보일지 모르겠지만 예시를 보면 익숙한 형태일 수 있다.

변수를 선언하고 해당 변수에 함수를 할당하는 형태라고 보면된다.

 

// 함수 표현식
var doSomething = function () {
   alert("test222");
   console.log("function expression");
}

doSomething();

 

var로 doSomething을 변수로 선언했으나, 뒤에 할당되는 내용은 function으로 시작하는 함수다.

이 경우에도 함수 호출이 선언보다 먼저 일어나도 정상적으로 호출될까?

결론부터 말하면, 함수 표현식으로 정의한 함수는 이보다 먼저 호출할 경우 오류가 발생한다.

 

브라우저마다 오류 메시지는 다르겠지만, function이 아니라고 type error를 발생시키는 경우가 있고

또는 해당 개체가 필요(Object expected)하다는 식의 에러를 발생시키기도 한다.

 

둘 다 함수가 아닌 형태를 함수로 호출하기 때문에 발생하는 에러인데, 위에 선언한 코드를 선언과 할당으로 분리하여 아래와 같이 인식하기 때문에 발생하는 문제이다.

// 함수 표현식의 변수 선언부
var doSomething;

doSomething(); // Object expected 또는 TypeError 발생

// 함수 표현식의 할당부분은 원래 자리로
doSomething = function () {
   alert("test222");
   console.log("function expression");
}

 

함수 표현식에서 나온 변수 선언부분과 변수에 함수를 할당하는 부분을 분리해서 인식하고, 이 중 변수 선언부분만 위로 호이스팅하기 때문에 doSomething 함수를 할당하기 전에 호출하는 경우 doSomething을 일반 변수로 인식한다.

때문에 function으로 인식하지 못해서 TypeError 혹은 Object expected 에러가 발생하게 된다.

 

 

 

참고 삼아 보았던 포스팅에는 함수 선언식, 표현식 이외에도 클로저와 재귀함수 등의 내용에 대해서도 잘 정리해두었으니 공부삼아 한 번씩 읽어보면 좋을 듯 하다.

 

https://blog.sonim1.com/142

7. 자바스크립트 - 함수 선언식, 함수 표현식