자바스크립트 입문_함수 선언문과 함수 표현식

(본 포스팅은 위키북스의 '코어자바스크립트' 책을 공부하면서 작성되었습니다_내돈내산)

 

• 함수 선언문(function declaration): function 정의부만 존재하고 별도의 할당명령이 없는 것
• 함수 표현식(function expression): 정의한 function을 별도의 변수에 할당하는 것. 함수선언문과 다르게 함수명이 반드시 정의되어있지 않아도 된다.(일반적으로 표현식으로 부르는것은 '익명함수표현식'을 말한다)

<함수를 정의하는 세가지 방식>

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

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

var c = function d () {/*...*/} // 기명함수표현식. 변수명은 c, 함수명은 d.
c(); // 실행 OK.
d(); // 에러!

기명함수 표현식의 경우 외부에서 함수명으로 함수를 호출할 수 없으며, 함수명은 오직 함수 내부에서만 접근이 가능함.

 

<예시: 함수표현식과 함수선언문의 실질적 차이>

- 원본코드 -

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

function sum(a,b) {		// 함수 선언문 sum
	return a+b;
}

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

- 호이스팅을 마친 코드 -

var sum = function sum(a,b) { // 함수 선언문은 전체를 호이스팅합니다
	return a+b;
};

var multiply ;				// 변수는 선언부만 끌어올립니다.

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

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

함수 선언문은 전체를 호이스팅 하고, 함수 표현식은 변수선언부만 호이스팅함. 그 이유는 함수자체를 하나의 값으로 취급하였고 함수를 다른 변수에 값으로써 '할당'한 것이 곧 함수 표현식이기 때문

 

<함수 선언문의 위험성>

호이스팅의 개념을 빗대어 보았을 때, 함수 선언문을 사용했을 경우 두번의 선언이 실행될경우 마지막에 선언된 형태로 모든함수가 작동하게 됨. 그러나 표현식을 사용했을때 순차적인 environmentRecord의 저장이 발생하기때문에 각각 다른 형태의 함수가 작동할 수 있음.