익명 함수와 일반 함수

Javascript에서 함수 선언 방식은 일반 함수와 익명 함수로 나눌 수 있다.

일반 함수란?

일반적으로 알고 있는 함수를 선언하는 방식으로 일반 함수 또는 함수 선언식으로 표현한다.

	function 함수이름() {
    	....
    }

Javascript에서는 일반 함수가 선언된 위치에 상관없이 함수를 사용할 수 있다.
왤까? Javascript 코드를 실행하기 전에 인터프리터가 변수와 함수의 메모리 공간을 미리 할당하기 때문이다.

조금 어려운 것 같다. 쉽게말해 선언된 함수와 변수를 코드를 실행하기 전에 Heap 메모리에 미리 할당해놓는데, 이를 호이스팅(Hoisting)이라고 부르며 var 변수에서만 일어난다. (자세한 내용은 나중에 다시 정리)

익명 함수(Anonymous function)란?

익명 함수는 이름이 없는 함수이며, 리터럴(Literal, 문자 그대로 읽히는) 방식으로 변수에 담겨 사용하는 함수이다.

	let showMsg = function () {
   		console.log("익명 함수 입니다!");
   	}
    
    showMsg();

리터럴 방식으로 사용되는 익명 함수는, 호이스팅 시 함수를 담는 변수의 선언부만 위로 올라간다. 익명 함수 자체는 변수가 호출되었을 때 실행되기 때문에 선언부가 함수를 호출 한 위치 보다 위에 존재해야한다.

	showMsg(); // Uncaught ReferenceError: Cannot access 'showMsg' before initialization

	let showMsg = function () {
    	console.log("익명 함수 입니다!");
    }
    
    showMsg(); // 함수 선언부 위의 showMsg();가 없을 경우 정상 동작
    
    /* 	Hoisting 된 모습
    
    	const showMsg;
        showMsg(); 				초기화 되지 않아 에러 발생
        showMsg = function () {
        	console.log("익명 함수입니다!");
        }
        showMsg(); 				초기화 된 후 호출되므로 정상 동작
    */

익명함수를 사용하는 이유

일반적으로 함수란 재사용하기 위해 사용된다. 재사용이 필요 없다면 나중에 호출할 수 있게 이름을 붙일 필요가 없겠지. 재사용하지 않는, 한번만 사용할 함수를 익명 함수로 구현한다.

메모리 관리

일반 함수는 자바스크립트 코드가 실행될 때 모두 호이스팅이 된다. 이 때 만약 한번만 사용되는 함수를 익명 함수가 아닌 일반 함수로 구현을 했다면 어떨까? 사용 될 단 한번의 순간을 위해 불필요하게 메모리를 차지하게 된다.
메모리 낭비다🙅🙅🙅

재사용이 필요없는 함수를 익명 함수로 구현하게 되면 이 함수가 필요한 위치에서만 구현되고 사라짐으로써 메모리를 아낄 수 있다.

참고
[Javascript] 일반 함수 vs 익명 함수
[javascript] 익명함수란, 익명함수 쓰는 이유