[Javascript] 함수 선언식 vs 함수 표현식

자바스크립트에서의 함수는 '값'으로 취급되고,
함수를 표현하는 방법에는 두 가지 종류가 있다. 함수선언과 함수표현이 그것이다.

함수 선언(Function Declaration)

function sayHello() {
	console.log("Hello");
}

함수 표현(Function Expression)

let sayHello = function() {
	console.log("Hello");
};

함수 표현식에서는 함수를 생성하고 변수에 할당했다.
즉 함수는 변수에 할당될 수 있는 값이며,
그렇기 때문에 복사해서 다른 변수에 할당할 수도 있다.

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

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

first();
second();

function first() {
	return 'first function';
}

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

↓ ↓ ↓ Javascript parser에 의해 실제 실행되는 코드

function first() {
	return 'first function';
}

var second;

first();	//'first function';
second();	//Uncaught TypeError: second is not a function

second = function() {
	return 'second function';
}

var second 변수는 호이스팅이 적용되어 상단으로 끌어올려졌으나,
호출 이후에 function값이 할당되므로 second는 변수로 인식된다. (not a function)




함수 표현식은 호이스팅에 영향을 받지 않는다는 점 외에도,
함수 선언식보다 유용하게 쓰이는 경우가 있는데

1) 클로저로써의 사용
2) 콜백 함수로써의 사용

클로저와 콜백 함수로써 함수 표현식을 어떻게 사용하는지 다음 포스팅에 작성하겠다.

References

https://ko.javascript.info/function-expressions
https://rgba22202551.tistory.com/12