함수 선언문과 함수 표현식

	함수 선언문(function declaration)	함수 표현식(function expression)
용도	함수 정의	함수 정의
함수명 기재	기재 해야함	기재 안해도 됌
또다른 이름	기명 함수 표현식	익명 함수 표현식

 

 

 

일반적으로 함수 표현식은 익명 함수 표현식을 말한다.

 

함수 정의하는 세 가지 방식

function a() { /* ... */ } // 함수 선언문 . 함수명 a가 곧 변수명.
a(); // 실행 OK

var b = function () { /* ... */ } // (익명) 함수 표현식. 변수명 b가 곧 함수명.
b(); // 실행 OK


var c = function d () { 

c() // 실행 OK
d() // 실행 OK
}

c() // 실행 Ok
d() // 실행 X

재귀함수를 호출하는 용도로 변수에 기명 함수 표현식을 사용할 수 는 있지만, 변수명을 통해 재귀 함수를 사용할 수

있기 때문에 굳이 사용하지 않아도 될 것 같다.

 

함수 선언문과 함수표현식 (1) - 원본 코드 

console.log(sum(1,2));
console.log(mutiply(3,4));

function sum(a,b) { //  함수 선언문 
	return a + b;
   	}
    
var multiply = function (a, b) { // 함수 표현식
	return a * b;
    }
    

실행 컨텍스트의 lexicalEnvironment는 두 가지 정보를 수집하는데, 여기서는 그중 environmentRecored의 정보 수집 과정에서 발생하는 호이스팅을 살펴볼 것이다. 

 

함수 선언문과 함수 표현식(2) - 호이스팅을 마친 상태

 

var sum = function sum(a, b) { // 함수 선언문은 함수 전체를 호이스팅한다.
	return a + b;
    };
    
var multiply; // 변수 선언부만 끌어올린다.


console.log(sum(1,2));
console.log(multiply(3,4));


multiply = function(a, b) { // 변수의 할당부는 원래 자리에 남겨둔다.
	return a * b;
   	};

    

sum 함수는 선언 전에 호출해도 아무 문제없이 실행된다.

multiply, 즉 익명 함수 표현식으로 하면 선언 전에 호출하면 오류가 발생한다.

 

이런 경우에,

100 번째 줄에서 sum 함수(더하기)를 익명 함수 표현식으로 선언하고 ,

5000 번째 줄에서 sum 함수(문자열 합치기)를 다시 익명 함수 표현식으로 선언했다면,

 

100번 째 이후 부터 5000번 째 줄까지는 sum 함수(더하기) 함수가 올바르게 작동 할 것이고,

5000 번째 줄부터는 sum 함수(문자열 합치기) 함수가 올바르게 작동할 것이다.

 

만약 이렇게 하지 않고, 함수 선언문으로 함수를 선언 했다면?

 

100번째의 함수를 5000번째에서 선언한 함수가 덮어씌워(override)하여 원래 의도한대로

코드가 작동하지 않을 것이다. 모든 함수는 함수 표현식으로 정의하는 것이 좋을 것 같다는 생각을 하였다.

협업을 할 때 전역 공간에 함수를 선언하거나 동명의 함수를 중복 선언하는 경우가 없어야 하겠지만 , 

만약을 위해서라도 함수 표현식으로 정의하는 것이 좋을 것 같다.