자바스크립트 핵심 개념 : 함수선언문과 함수표현식

1. 함수선언문과 함수표현식

함수를 표현해내는 방법은 이렇게 세 가지가 있다.

 function a() { // 함수선언문
   return 'a';
 }
 
 var b = function bb() { // 기명 함수표현식
   return 'bb';
 } 
 
 var c = funtion() { // (익명) 함수표현식
   return 'c';
 }

이름을 보면 대략 어떤 느낌인지 감이 오는 것 같다.

함수선언문은 할당한게 없이 그냥 정말 선언만 한 형태이고,

기명 함수표현식은 할당을 하고 함수에 이름이 있어서 기명(named)라는 표현을 쓰는 것 같다.

익명 함수표현식은 할당을 했지만 함수에 이름이 없는 형태이다.

지금은 익명 함수표현식을 써도 변수명을 함수명으로 지정해주기 때문에

기명 함수표현식을 쓰는 경우는 별로 없다고 한다.

이 정도까지는 이해했는데, 그렇다면 무엇을 쓰는 게 좋고, 어떤 순서로 선언되고 쓰이는 걸까?

 

2. 그 이론을 눈으로 확인하고 외우자

2-1. 함수선언문의 호이스팅 문제

 function sum(a, b) {
 	return a+'+'+b+'='+(a+b);
 }
 sum(1,2);
 
 
 /*... 1000줄의 코드가 있음 ...*/
 
 
 function sum(a, b) {
 	return a+b;
 }
 sum(3,4);

함수표현식 이야기를 하면서 계속 호이스팅 호이스팅하는 이유!

만약 실무에서 중략된 저런 방대한 코드가 있다면, 어떤 일이 벌어질까?

우리가 원한 코드는 분명 첫 함수의 결과인 1+2=3과 두번째 함수의 결과인 7이었을텐데

function sum(a,b) {} 
이 부분은 함수선언문이니까 함수 '선언'을 끌어올린다는 호이스팅 법칙에 들어갈것이다.

그러면 위 코드, 밑 코드의 sum부분은 맨 위로 끌어올려지고

두번째 함수가 첫번째 함수를 덮어서 결과는 7만 나온다.

 

2-2. 함수표현식을 권장

 var sum = function(a, b) {
 	return a+'+'+b+'='+(a+b);
 }
 sum(1,2);
 
 
 /*... 1000줄의 코드가 있음 ...*/
 
 
 var sum = function(a, b) {
 	return a+b;
 }
 sum(3,4);

이렇게 쓰면 안전하게 쓸 수 있으므로 함수표현식을 권장한다.

 

2-3. 함수표현식이 선언되고 할당되는 순서

var c = function() {
      return 'c';
}

(1) var c
변수 c를 선언한다.

(2) function() { return 'c';}
익명함수를 선언한다.

(3) var c = function() { return 'c';}
변수 c에 익명함수를 할당한다.

호이스팅에서 중요한 개념이 선언과 할당을 아는 것이었는데, 이 부분을 통해 확실히 알 수 있다.

즉, 할당을 하지 않으면 전체가 호이스팅의 대상이 되고,

할당을 하면 선언한 부분(변수)만 호이스팅의 대상이 되는 것이다!

 

3. 이 글의 핵심부분

함수표현식과 함수선언문의 차이를 정확히 알아서

자바스크립트 코드를 볼 때, 이건 호이스팅이 되겠구나 안되겠구나를 판단할 수 있어야 한다.

그리고 함수선언문의 문제점과 함수표현식으로 써야하는 이유를 알자.

하나 더, 같은 함수 선언문이 두 개가 존재할 때 마지막이 덮어씌운다. (이건 이해가 잘 안가서 그냥 외움)

 

 

- 정재남님의 자바스크립트 핵심 개념강의를 이해후 풀어쓴 것