[JavaScript] 변수 호이스팅
변수 선언
자바스크립트의 경우 변수를 선언할 때 var
, let
, const
키워드를 사용한다.
ES6 이전부터는 변수 선언을 오로지 var
키워드만을 이용했다고 한다.
그렇다면 변수 선언에 var
외에 let
, const
를 사용해야 하는 이유가 있을까?
블록 레벨 코스프 vs 함수 레벨 코스프
var키워드는 여러 단점을 가지고 있는데 그중 대표적으로 블록 레벨 스코프
(block-level-scope)를지원하지 않고, 함수 레벨 스코프
(function-level-scope)를 지원한다는 점!
함수 레벨 스코프
의 경우 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.즉, 함수 내부에서 선언한 변수는 로컬 변수이고 외부에서 선언한 변수는 모두 전역 변수가 되는 것이다. 이로 인해 의도치 않게 전역 변수가 선언되어 부작용이 발생하기도 한다.
var a = "out of function"; // 함수 외부에 선언 (전역 변수)
function foo() {
console.log(a);
}
foo();
위와 같이 변수 a를 함수 밖에서 선언한 경우 전역변수로 처리되어 함수 내부에서 a를 참조할 수 있다.
function foo() {
var b = "in of function"; // 함수 내부에 선언 (로컬 변수)
}
console.log(b);
그러나 변수를 함수 내부에서 사용하고 외부에서 참조하려고 했을 때는 아래와 같이 오류가 발생하는 것을 확인할 수 있다.
값의 재할당
위와 같은 단점들을 보완하기 위해 const
, let
키워드가 생겨났다. 이 키워드들의 차이점 중 하나는 값을 재할당할 수 있는 지에 대한 여부이다.
var score = 80; // 변수 선언과 값의 할당
score = 90; // 값의 재할당
그렇다면 const 키워드로 값을 재할당해보면 어떨까.
const foo = 10;
foo = 100;
역시 예상대로 다음과 같이 오류가 발생함을 알 수 있다. const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 따라서 const 키워드를 사용하면 상수를 표현할 수 있음! ( const, let 키워드에 대한 설명과 블록 레벨 코스트에 관한 내용은 추후에 따로 더 자세히 다뤄볼 예정 )
변수 선언 실행 시점과 호이스팅
console.log(score);
var score;
위와 같은 코드의 경우 변수를 참조하는 내용이 변수를 선언하는 내용보다 더 위에 있다. 이런 경우에 나로써는 당연히 에러가 출력될거라고 예상했는데 참조 에러가 발생하지 않고 undefined가 출력된다.
그 이유는 변수 선언이 소스코드가 순차적으로 실행되는 시점(런타임)이 아니라 그 이전 단계에서 미리 실행되기 때문이라고 한다.
즉, 자바스크립트 엔진이 소스코드를 실행하는 과정은 소스코드 평가
> 순차적 실행
순으로 진행된다.
이처럼, 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.
📚 참고자료 : 모던 자바스크립트 Deep Dive
Author And Source
이 문제에 관하여([JavaScript] 변수 호이스팅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dev_dejavu/JavaScript-변수-호이스팅저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)