호이스팅에서 함수선언문과 함수표현식

📌 1. 함수선언문

---

function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미

function sum(a,b){
	return a + b;
}

📌 2. 함수표현식

---

정의한 function을 별도에 변수에 할당하는것

var add = function multiply(a,b){
	return a * b;
}

📌 3. 호이스팅 과 함수선언문 / 함수표현식

---

호이스팅을 간단하게 정의하자면 변수와 함수 선언이 자바스크립트 엔진에서 실제로 끌어올리진 않지만 코드상단으로 끌어올려진것처럼 보이는것이다.

일단 예시 코드를 보면

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

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

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

위에 코드에서 호이스팅을 마친 최종상태를 보자 !

1) var sum = function(a,b){
	return a + b;
}
2) var mutiply;
3) console.log(sum(1,2));
4) console.log(multiply(3,4));
mutiply = function(a,b){
	return a * b; 
}

코드 해석:

1) - 메모리 공간을 확보하고 확보된 공간의 주솟값을 변수 sum에 연결한다.
2) - 또 다른 메모리 공간을 확보하고 그 공간의 주솟값을 변수 multiply에 연결한다.
다시 1) - sum함수를 또 다른 메모리 공간에 저장하고 그 주솟값을 앞서 선언한 변수 sum의 공간에 할당한다. 이로써 변수 sum은 함수sum을 바라보는 상태가 된다.
3) - sum을 실행하면 잘 작동 //결과 3
4) - multiply에는 값이 할당되어 있지 않다. 비어있는 대상을 함수로 여겨 실행하라고 했다고 생각해 'multiply is not function' 이라는 에러 메시지가 출력 된다. 에러로 런타임이 종료된다.

앞에서 호이스팅은 선언과 변수만 끌어올려진것처럼 행동한다고 생각하면 해석하기 쉽다.
함수 선언문은 전체를 호이스팅한 반면 함수 표현식은 변수 선언문만! 호이스팅 된것을 알 수 있다.
함수를 다른 변수에 값으로써 할당 한것이 함수표현식 인 것 !
그래서 함수도 하나의 값으로 취급할 수 있다고 말하고 있는것 같다.

📌 4. 함수선언문의 위험성

---

만약 100개의 코드줄이 있다고 가정해보자.
내가 40번줄에서 함수선언 a를 했다.
다시 80번줄에서 함수선언을 한 a를 수정했다.
전역 컨텍스트가 활성화 될 때 전역공간에 선언된 함수들이 모두 가장 위로 끌어올려진다.
동일한 변수명에 서로 다른 갓을 할당할 경우 나중에 할당한 값이 먼저 할당한 값을 덮어씌운다. 이런 문제가 생겨도 에러가 나지않아 찾을수 없다.

만약 함수표현식으로 정의했다면?

40번줄에서는 의도대로 되고 또 80번 줄 이후부터는 의도한대로 잘 동작했을것이다.
그뿐아니라 sum함수를 처음 선언한 40번줄보다 이전 줄에 sum함수를 호출하는 코드가 있었으면 그 줄에서 바로 에러가 검출되므로 더 손쉽게 디버깅 할 수 있을것이다.