[JavaScript] 함수 표현식 VS 함수 선언식

이번에는 자바스크립트에서 함수를 선언하는 방법을 알아보겠습니다! :)

 

함수 선언식

일반적으로 작성하는 함수 방법입니다.

function 함수명() {
    //함수 로직
}

function funcDeclarations() {
    return 'function declaration';
}

// 함수 호출
funcDeclarations();

 

함수 표현식

함수를 변수에 저장하여 활용하는 방식입니다.

var 함수명 = function () {
    //함수 로직
}

var funcExpression = function () {
    return 'function epression'
}

// 함수 호출
funcExpression();

 

함수 선언식 VS 함수 표현식

둘의 가장 큰 차이점은 호이스팅에 있습니다.

먼저 호이스팅은 선언한 변수나 함수를 코드 상단으로 끌어오리는 것입니다.

 

먼저, 예제를 한 번 보겠습니다.

funcDeclaration();
funcExpression();

function funcDeclaration() {
    console.log('Declaration!');
}

var funcExpression = function() {
    consolog.log('Expression!');
}

위 코드의 결과가 어떻게 될까요?

실행결과를 보면 에러가 나는 것을 확인할 수 있습니다.이 결과는 함수 선언식은 호이스팅이 되지만,

함수 표현식은 호이스팅되지 않는 것을 볼 수 있습니다.

 

함수 표현식 장점

 

클로저 사용

먼저, 클릭 이벤트를 추가하는 예제를 보겠습니다.

function listHandler(index) {
    return function clickEvent(event) {
    	// 클릭할 때 마다 해당 index 값을 표시
        console.log(index); 
    };
}

var lists = document.querySelectorAll('.list');
var i;

for (i = 0; i < lists.length; i += 1) {
    lists[i].onclick = listHandler(i);
}

위 코드에서 클로저가 사용된 곳은 listHandler()함수의 index를 내부의 clickEvent()함수에서

사용한 부분입니다.

 

이후 for문이 끝난후 list들을 클릭하면, index값이 클릭한 list의 길이 값과 같은 것을 볼 수 있을 것입니다.

 

만약 클로저를 사용하지 않았을 경우

var lists = document.querySelectorAll('.list');
var i;

for (i = 0; i < lists.length; i += 1) {
    lists[i].onclick = function (e) {
        console.log(i)
    };
}

클로저를 사용한 것과 다르게 list의 길이 값만 나올 것입니다.

 

콜백 함수 사용

콜백 함수는 어떤 이벤트가 발생했을 때 호출되거나, 다른 함수의 인자로써 이용되는 함수입니다.

 

함수 표현식은 일반적으로 변수에 저장하여 사용하는 형태를 보입니다.

var example = function () {
    // 함수 로직
}

그러나 콜백 함수로 쓰이면 변수에 저장하지 않고도 사용할 수 있습니다.

$(document).ready(function () {
  console.log('ready!'); 
});