[JavaScript] 함수 선언형과 함수 표현식의 차이점

막연히 사용하던 함수 선언식(Function Declaration)과 함수 표현식(Function Expression)에 대해 알아보고, 차이점을 소개하고자 한다! 호이스팅.. 정말 헷갈렸는데 정리가 좀 된 것 같다 ㅎㅎ

 

728x90

 

---

 

함수 선언형과 함수 표현식

함수 선언형

함수명이 정의되어 있고, 별도의 할당 명령이 없다.

function sum(a,b) {
    return a + b;
}

 

함수 표현식

정의한 함수를 별도의 변수에 할당한다.

const sum = function(a,b) {
    return a + b;
}

 

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

결과부터 말하면, 스코프와 호이스팅에서 차이가 있습니다.

 

1. Scope

함수 선언식

var와 같이 함수 스코프를 가진다.

function func1() {
    function func2 () {
      console.log('Hi!');
    }
    
    func2();
}

func1();
func2();	// error!

위처럼 fun1 함수 안에 func2 함수를 선언하고, func1 함수 밖에서 func2 함수를 호출하면 에러가 발생한다.

 

함수 표현식

선언한 변수 키워드에 따라 스코프가 달라진다.

(var는 함수 스코프(function scope), let과 const는 블록 스코프(block scope))

{
  var func1 = function () {
    console.log('func1');
  }
  
  let func2 = function () {
    console.log('func2');
  }
}

func1();
func2();	// error!

 

2. Hoisting

호이스팅에 대한 글은 아래 참고!

 

2022.07.31 - [JavaScript] - [JavaScript] 호이스팅(Hoisting)이란?

[JavaScript] 호이스팅(Hoisting)이란?

 

함수 선언형

코드가 실행되기 전에 로드된다.

sum(1,2);
function sum(a,b) {
    return a + b;
}

정의된 범위의 맨 위로 함수 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다. 

 

함수 표현식

함수 호이스팅이 아니라 변수 호이스팅이 발생하며, 인터프리터가 해당 코드 줄에 도달할 때 로드된다. 

sum(1,2);	// error!
let sum = function(a,b) {
    return a + b;
}

변수는 선언부와 할당부를 나누어 호이스팅 하게 된다. 이 때, 선언부만 호이스팅하고 할당될 함수는 호출된 이후에 선언된다. 즉, 함수 표현식에서도 호이스팅은 수행하지만 위처럼 let과 const 변수가 초기화되기 전에 참조를 해서 ReferenceError가 출력되는 것이다.

 

그렇다면! var 변수를 사용하면 어떨까?

var로 선언했다고 하더라도, 위에서 sum(1,2)이 호출된 상태에서는 undefined이기 때문에 sum is not a function이 출력된다. (var 키워드는 선언과 함께 undefined로 초기화되어 메모리에 저장)