이번 포스팅에선 변수 호이스팅과 변수 값의 할당 두 가지에 대해 포스팅 해보려고 한다.

변수 호이스팅

자바스크립트는 코드를 위에서 아래로 읽는다.

따라서 위 코드에서 console.log(score) 가 먼저 실행된다.

하지만 참조오류가 발생하지 않는다. undefined가 출력된다.

그 이유가 뭘까?

그 이유는 변수 선언이 런타임(코드가 실행되는 단계) 이전에 이루어지기 때문이다.

자바스크립트 엔진은 소스코드를 실행하기에 앞서 먼저 소스코드의 평가과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.

이 평가과정 에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문)을 소스코드에서 찾아내 먼저 실행한다.

그리고 이 평가과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 순차적으로 실행한다.

즉, 자바스크립트 엔진은 변수 선언부분이 어디에 있든지 가장 먼저 실행한다.(평가단계)
그렇기때문에 위 코드에서 참조 오류가 발생하지 않고, undefined가 출력되는 것이다.

자바스크립트에서 이러한 특징을 변수 호이스팅(variable hoisting) 이라고한다.

값의 할당

위 코드는 변수를 선언하고, 값을 할당하는 코드이다.

위 코드는 다음과 같이 쓸 수 있다.

변수 선언과 값의 할당을 두 줄로 나누어 표현한 코드와 변수 선언과 값의 할당을 한 줄로 단축한 코드는 정확하게 같은 동작을한다.

즉, 자바스크립트 엔진은 변수 선언과 값의 할당을 하나의 문으로 단축 표현해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다.

이 때 주의할 점은 변수 선언과 값이 할당되는 시점이 다르다는 것

변수 선언은 런타임 이전에 먼저 실행되지만 값의 할당은 런타임에 실행된다.

메모리

자바스크립트에서는 값을 할당할 때 이전 값이 저장되어있는 메모리 공간을 지우고 그 메모리 공간에 새로운 값을 할당하는 것이 아니라, 새로운 메모리 공간을 확보하고 그 곳에 새로운 할당 값을 저장한다.

(이미지 출처 : https://velog.io/@tsts_/Javascript-%EB%B3%80%EC%88%98 )

이전 값이 할당된 공간은 더 이상 아무도 사용하고 있지 않다.
아무도 사용하지 않고있는 공간은 불필요하지않을까?

이런 불필요한 값들은 가비지 콜렉터에 의해 자동으로 해제된다! 대신, 언제 해제될지는 예측 할 수 없다!

---

참고
모던 자바스크립트 Deep Dive