[Vanilla JS] Hoisting, var, let, const 정리

# Hoisting, var, let, const 정리

 얼추 알고 있는 Hoisting, var, let, const 한번 더 정리하기!

# Hoisting

나무위키: 호이스팅

 자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다.
즉 호이스팅은 자바스크립트 인터프리터가 코드를 읽는 방식이다.

 let을 사용한다고 호이스팅이 일어나지 않는 것이 아나라, 호이스팅이 일어나 스코프 내 최상위로 끌어올려지지만, 'undefined'를 할당하지 않기 때문에 'undefined'가 출력되는 것이 아니고 참조에러가 발생하게 된다.

 ES6 이후로 실제 현업에서는 var 키워드는 절대로 쓰이지 않으며 99%이상의 경우 모든 함수를 무조건 const와 arrow syntax로 선언하기 때문에 최근 들어서는 사실상 크게 신경쓰지 않는 부분이 되었다.

# var, let, const

MDN DOCUMENT: var, let, const

var: var 변수를 선언하고, 선택적으로 초기화할 수 있습니다.
let: let 명령문은 블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있습니다.
const: const 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.

# test page

# test page html

<h3>VAR, LET, CONST</h3>
<input type="button" onclick="varInit()" value="VAR VALUE INIT" style="display: inline;"/>
<input type="button" onclick="letInit()" value="LET VALUE INIT" style="display: inline;"/>
<br>
<input type="button" onclick="varTest1()" value="VAR1" style="display: inline;"/>
<input type="button" onclick="varTest1After()" value="VAR1 AFTER" style="display: inline;"/>
<br>
<input type="button" onclick="varTest2()" value="VAR2" style="display: inline;"/>
<input type="button" onclick="varTest2After()" value="VAR2 AFTER" style="display: inline;"/>
<br>
<input type="button" onclick="letTest1()" value="LET1" style="display: inline;"/>
<input type="button" onclick="letTest2()" value="LET2" style="display: inline;"/>
<br>
<input type="button" onclick="constTest()" value="CONST" style="display: inline;"/>

# var test javascript code

// var Type의 변수 varValue 생성.
var varValue = "var value";
function varInit() {
    varValue = "var value";
    console.log('# INIT:', varValue);
}
// 전역변수 값 변경.
function varTest1() {
    console.log('# 1:', varValue);  // # 1: var value

    varValue = "var value change";
    console.log('# 2:', varValue);  // # 2: var value change
}
// 전역변수와 같은 변수명인 지역변수 생성.
function varTest2() {
    console.log('# 1:', varValue);  // # 1: undefined
	
    varValue = "var value change";
    console.log('# 2:', varValue);  // # 2: var value change
		
    var varValue = "new var value";
    console.log('# 3:', varValue);  // # 3: new var value
		
    var varValue = "new var value change";
    console.log('# 4:', varValue);  // # 4: new var value change
}
// 전역변수 값 변경. 후 전역변수값
function varTest1After() {
    varTest1();
    // # 1: var value
    // # 2: var value change
    console.log('# AFTER:', varValue);  // # AFTER: var value change
}
// 전역변수와 같은 변수명인 지역변수 생성. 후 전역변수값
function varTest2After() {
    varTest2();
    // # 1: undefined
    // # 2: var value change
    // # 3: new var value
    // # 4: new var value change
    console.log('# AFTER:', varValue);  // # AFTER: var value
}

1. varTest1After

• var 타입의 전역변수 varValue가 정상적으로 변경되었음을 확인.

2. varTest2After

• var 타입의 전역변수 varValue가 (#1)에서 undefined 가 됨.
  • (#1)의 undefined는 지역변수로 선언한 varValue가 호이스팅 된 변수 값.
• varTest2에선 지역변수만 변경되고, 전역변수 varValue는 그대로 임.

# let test javascript code

// let Type의 변수 letValue 생성.
let letValue = "let value";
function letInit() {
    letValue = "let value";
    console.log('# INIT:', letValue);
}
// 전역변수 값 변경.
function letTest1() {
    console.log('# 1:', letValue);  // # 1: let value
    letValue = "let value change";
    
    console.log('# 2:', letValue);  // # 2: let value change
}
// 전역변수와 같은 변수명인 지역변수 생성.
function letTest2() {
    // ERROR: Cannot access 'letValue' before initialization 
    // 에러: 초기화 전에 'letValue'에 액세스할 수 없습니다.
    console.log('# 1:', letValue);  // < ERROR

    letValue = "let value change";
    console.log('# 2:', letValue);

    let letValue = "new let value";
    console.log('# 3:', letValue);
}

1. letTest1

• let 타입의 전역변수 letValue가 정상적으로 변경 됨.

2. letTest2

• (#1)에서 발생한 에러는 지역변수로 선언한 letValue의 값이지만 var 처럼 letValue 값이 undefined이 되는게 아니라 초기화 전에 해당 변수의 접근 할 수 없다는 에러가 나옴.
• 만약 letTest2 함수 내에서 var 타입의 letValue 변수를 선언하면, 페이지 로드 시 아래와 같은 에러가 발생한다.
  • Identifier 'letValue' has already been declared 
  • 식별자 'letValue'가 이미 선언되었습니다.
• 변경 되는 변수의 적합하다.
  • 조건에 따라 변경되는 값.

# const test javascript code

// const Type의 변수 constValue 생성.
const constValue = "const value";
	
// 전역변수 값 변경.
function constTest() {
    console.log('# 1:', constValue);  // # 1: const value
		
    // ERROR: Assignment to constant variable.
    // 에러: 상수 변수에 할당.
    constValue = "const value change";  // < ERROR
    console.log('# 2:', constValue);
}

1. constTest

• const 타입의 전역변수 constValue는 값을 변경하려고 하는 경우 에러가 발생한다.
• 변경되지 않는 변수의 적합하다.
  • ajax의 응답 또는 final같은 존재

# 내용

 뭉뚱그려  알고 있는 호이스팅과 var와 let의 차이 그리고 const의 사용법을 알아보았음.

var 대신 let, const를 사용하자!