[JavaScript 기초] JavaScript 함수 정의, 선언문 방식과 표현식 방식의 차이

자바스크립트의 함수의 정의 방법

• 선언문 방식
• 표현식 방식
• Function 생성자 함수 이용

 

선언문 방식과 표현식 방식의 차이

사실 선언문 방식과 표현식 방식은 겉으로 봤을 때 정의하는 방식만 다를 뿐 기능적으로 큰 차이를 보이진 않습니다.

// 선언문 방식
function a( ){
    console.log('선언문 방식 a 함수');
}
a( );    // '선언문 방식 a 함수' 출력

// 표현식 방식
var a = function( ){
    console.log('표현식 방식 a 함수');
}
a( );    // '표현식 방식 a 함수'

차이점이 있다면 호이스팅이 되는 시점에 a라는 변수가 어떤 형태로 정의되는 차이를 갖고 있죠.

호이스팅에 대해서는 아래 링크를 참고하세요.

Link : https://aljjabaegi.tistory.com/304

자바스크립트 호이스팅 javascript hoisting 의 개념. 이해하기

 

예제 코드

아래 코드를 보며 선언문 방식과 표현식 방식의 차이를 자세히 살펴보겠습니다.

add1(1,3);

// 선언문 방식
function add1(x, y){
  var result = x + y;
  console.log(result);
}

add1(2,3);

먼저 선언문 방식을 보면 add1이라는 함수를 선언하기 전과 선언한 후, 함수를 두 번 호출했습니다.

과연 결과는 어떻게 나올까요?

 

바로 4 와 5가 차례로 출력이 됩니다.

그렇다면 같은 방식으로 표현식 방식으로 함수를 정의했을 때는 어떻게 나올까요?

add2(1,3);

// 표현식 방식
var add2 = function(x, y){
  var result = x + y;
  console.log(result);
}

add2(2,3);

 

 

add2 함수를 정의하기 전에 함수를 호출했을 때 add2는 함수가 아니라는 TypeError가 납니다.

 

선언문 방식은 add1이 호이스트 될 때 add1이라는 함수로 정의되기 때문에 함수 호출이 가능하지만,

표현식 방식은 add2가 호이스트 될 때 add라는 변수로 정의되기 때문에 함수 호출시에 TypeError가 나는 것입니다.

 

함수가 아닌 변수에 함수 호출을 사용하면 당연히 에러가 나겠죠?

 

이해가 간다면, 아래 코드의 콘솔값이 왜 이렇게 출력되는지도 이해가 되겠죠?

 

console.log(add1);    // function add1(x,y)
console.log(add2);    // undefined

function add1(x,y){
    var result = x+y;
    console.log(result);
}
var add2 = function(x,y){
    var result = x+y;
    console.log(result);
}

console.log(add1);    // function add1(x,y)
console.log(add2);    // function add2(x,y)