함수 선언문과 함수 표현식

함수선언문과 함수표현식

console.log(sum(1,2)); // 3
console.log(multiply(3,4)); // multiply is not a function

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

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

위 코드는 다음과 같이 호이스팅된다.

var sum = function(a,b) { // 함수 선언문은 전체가 호이스팅이 된다
  return a + b;
};
var multiply; // 변수는 선언부만 끌어올린다.
console.log(sum(1,2));
console.log(multiply(3,4));  // multiply is not a function

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

1번줄 - 메모리 공간을 확보하고 확보된 공간의 주솟값을 변수 sum에 연결

4번줄- 또 다른 메모리 공간을 확보하고 그 공간의 주솟값을 변수 multiply에 연결

다시 1번줄 - sum함수를 또 다른 메모리공간에 저장하고, 주솟값을 앞서 선언한 변수 sum의 공간에 할당. 이제 변수 sum은 함수 sum을 바라봄

5번줄 - sum함수를 실행,출력

6번줄 - multiply 변수에는 현재 값이 할당되어 있지 않음 에러메세지 출력으로 인해 뒷줄들은 실행되지 않고 런타임 종료

함수 선언문은 전체가 호이스팅 되는 반면 함수 표현식은 선언부만 호이스팅 되어버린다.

A와 B가 협업을 진행중이다.

A가 1000번째 줄에 sum 함수를 선언하고 여기저기서 사용중이었다.

이때 B가 5000번째 줄에 새로운 sum 함수를 선언했다면?
B는 5000번째 줄에 선언된 sum 함수가 그 밑에줄에만 영향을 줄 것이라고 생각했을것이다.
하지만 전역 컨텍스트가 활성화 된 시점에 선언된 함수들이 모두 가장 위로 호이스팅되어버린다.
이 경우 나중에 할당된 값이 먼저 할당된 값을 덮어 씌워버려, 맨 마지막에 선언된 sum 함수의 동작으로 모든 sum함수 동작이 바뀌어버린다.

A는 본인이 의도한 함수들이 정상적으로 작동하지 않음을 눈치챗지만 어떤 에러도 나지 않아서 어디서부터 어떻게 고쳐야할지 감이 오지 않는다.

A와 B 모두가 sum함수를 함수표현식으로 정의했다면 서로의 의도대로 잘 작동 했을 것 이다.