함수 선언식(Function Declarations), 함수 표현식(Function Expressions)의 차이점

function

---

function은 독립적으로 분리된 로직으로서 프로그램 수준에서 미리 정의되어 있거나 사용자정의에 의해 만들어진 실행단위를 일컫는 말이다. 자바스크립트의 function은 Fisrt-Class-Object 로서 변수나 데이터 구조 안에 담을 수 있으며 인자로 전달할 수 있고 반환 값으로도 사용할 수 있으며 , 런타임에 생성할 수 도 있다.

쉽게 말해 function은 '코드의 묶음, 기능의 단위'이며, 일반 객체(object)처럼 취급될 수 있다.

이런 함수를 사용하는 데 있어 매우매우매우 중요한 개념이 있다. 바로 함수선언(Function Declarations) 과 함수표현(Function Expressions)을 구분하는 것이다. 

 

함수 선언식 (Function Declarations)

---

함수 선언은 Function Statement 라고도 하며 말그대로 '함수 문장'이라는 뜻이다. 즉, 아래의 코드처럼 함수를 단순히 정의만 하고 실행하지는 않는 문장이라고 할 수 있다.

function 함수명() { statesments }

 

따라서 함수 선언식은 수행결과 또한 존재하지 않는다. Javascript에서 함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)로 끌어올려진다. 이렇게 끌어올려지는 것을 Hoisting(호이스팅)이라고 한다.

 

이렇게 함수 선언식이 실행문보다 아래 위치해도, 선언식은 최상부로 끌어올려지기 때문에 Declarations를 이미 정의된 함수로 인식하고 Declarations();라는 실행문도 정상적으로 작동한다.

 

Declarations(); // 'declaration!!' 
function Declarations() {
    return 'declaration!!'; 
}

 

위의 코드가 실제로 실행되는 순서는 아래 코드와 같다고 생각하면 된다. 함수 선언식인 function Declarations(){ }부분이 가장 먼저 정의되는 것을 볼 수 있다.

 

function Declarations() {
    return 'declaration!!'; 
} 
Declarations();

 

함수 표현식 (Function Expressions)

---

함수 표현은 Function Literal 이라고도 한다. 이는 실행 가능한 코드가 변수 등에 할당되는 것을 의미한다. 즉, 정의만 되는 함수 선언식과 달리 실행까지 포함하는 코드이며 동시에 코드실행 결과값을 특정 변수에 할당까지 한다.

 

var 변수명 = function 함수명() { statements };

var 변수명 = function 함수명() {
    statements 
};

 

주의할 점은 함수 표현식은 끌어올려지지 않는다는 것이다. (= Hoisting 되지 않음)

아래 코드를 실행하면, TypeError가 발생하게 된다. 첫째줄에서 실행시킨 Expression()이라는 함수는 정의된 적이 없기 때문이다.

 

Expression(); 
var Expression = function () {
    return 'Expression!!'; 
}

 

함수 선언식, 함수 표현식의 차이점

---

함수 선언식은 호이스팅이 되고, 함수 표현식은 호이스팅되지 않는다.

Hoising이란 코드를 해석할 때 Global 영역에 선언된 코드블럭을 최상의 Scope로 끌어올리는 것을 말한다. 코드 순서에 상관없이 Global 영역에 선언되어 있는 변수, 함수의 선언문들을 먼저 모으고 Global 객체 속성으로 등록하는 것이다. 

최상 Scope로 끌어올려져 Global 영역에 선언되면, 가장 먼저 해석되기 때문에 단순하게 선언문의 우선순위가 가장 높아진다고 생각하면 된다. 따라서 이 선언문들은 어떠한 위치에서도 실행이 가능하다. 한 가지 더 기억할 것은 선언은 hoisting되지만, 할당은 hoisting되지 않는다는 것이다.

 

너무 많은 선언문이 남발되면, 선언문을 모으는 데 많은 시간을 쓰게 되어 실행코드는 점점 순위가 뒤로 밀리게 된다. 이런 경우 실행 시간이 길어질 수 있기 때문에 적당히 선언문을 사용하는 것이 중요하다.