[ 3D Web : Front_JavaScript ] 변수 호이스팅 : var / let / const의 차이점 정리.

 

 

 

 

[ 3D Web : Front_JavaScript ] 

변수 호이스팅 : var / let / const의 차이점 정리.

 

 

---

 

 

∇ 자바스크립트에서의  var/let/const의 차이점 5가지.

목  차

1. 중복 선언 가능 여부
2. 재할당 가능 여부
3. 변수 스코프 유효범위
4. 변수 호이스팅 방식
5. 전역 객체 프로퍼티 여부

 

 

---

   ☆ 변수의 생성 과정.

               1. 선언 단계

               2. 초기화 단계

               3. 할당 단계.

var

 

let

const

 

---

 

 

 

1. 중복 선언 가능 여부

---

 

 ◎ var : 중복해서 선언( + 초기화 ) 가능합니다.

                    = > 이 경우, 마지막에 할당된 값이 변수에 저장됩니다.

 

                = >> 기존에 선언해둔 변수의 존재를 잊고, 값을 재할당하게 되는 등의 실수가 발생하기 쉽습니다.

 

 

 ◎ const, let : 중복 선언 불가능. !

                    = > 이미 선언한 변수를 다시 선언할 경우, 에러가 발생합니다.

                     == > var에 비해서, 코드의 안전성을 높여줄 수 있는 방식.

 

---

2. 재할당 가능 여부

---

 

 ◎ var , let : 값의 재할당이 가능한 변수입니다.

 

                = >> 변수 선언 및 초기화 이후에, 반복해서 다른 값을 재할당 할 수 있습니다.

 

 

 ◎ const : 값의 재할당이 불가능한 상수입니다.

                    = > const는 상수를 선언하는 키워드입니다.

                     == > 처음에 선언 및 초기화하고 나면, 다른 값을 재할당 할 수 없습니다.

 

 

 

※ var 또는 let과 달리,   const 선언에서는 반드시 값을 선언과 동시에 정의해야 합니다.

 

※ 재할당이 필요없는 경우에는 const를 사용해서 불필요한 변수의 재사용을 방지하고,

     재할당이 필요한 경우에는  let을 사용하는 것이 좋습니다.

 

---

3. 변수 스코프 유효범위

---

 

☆   " 스코프 " 란  유효한 참조 범위를 의미합니다.

 

              함수 내부에서 선언된 변수는 함수 내부에서만 참조가 가능한 것과 같은 것을 말합니다.

 

             ∇ JS상에서는 " var " 로 선언한 변수의 스코프와   let * const로 선언한 변수의 스코프에 차이가 있습니다. 

 

 

                     ◎ var : 함수 레벨 스코프 ( function - level - scope)로 작동합니다.

                            == var는 함수 내부에서 선언된 변수만 지역변수로 한정하며,

                                        그 외 변수들은 모두 전역변수로 간주합니다.

 

                          ++ 자바스크립트에서는 

                                if문, for문, while문,  try-catch 문 등등을 작성한 코드 블럭 {...} 내부에서

                                var로 선언된 변수를 전역변수로 간주합니다.

                                [ 블럭 외부에서도 어디에서나 참조 가능 ]

 

                     ◎ let, const :

블록 레벨 스코프(block-level-scope)로 작동합니다.

                            == let, const 는 함수 내부는 물론, if 문이나 for 문 등의 코드 블럭 {..} 에서 선언된 변수도

                                  지역변수로 취급합니다.

                                   당연히 함수 내부에서 선언된 변수들을 외부에서 참조 불가능합니다.

* 정리하자면,
var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프
let, const는 모든 블록 내부에서 선언된 변수까지 지역변수로 인정하는 블록 레벨 스코프

 

 

 

---

4. 변수 호이스팅 방식 

---

           ◇ JS는 코드문을 실행하기 전에, 일종의 '코드 평가'를 거치는데

                 이 때 '변수 선언문 ' 을 미리 실행해두기 때문에  뒷 순서에서 선언된 변수도 앞의 코드에서 참조 가능합니다.

 

                  == > 이를  "변수 호이스팅 " 이라고 합니다.

 

 

          ○ var : 변수 호이스팅이 발생합니다.

console.log(a);  // undefined
var a = 10;
console.log(a);  // 10

             

         - 뒷열에서 선언된 변수 a가 앞에서 참조 되었음에도 불구하고, 에러를 발생시키지 않습니다.

 

         - 코드문을 실행하기 전에,  자바스크립트 엔진이 미리

                       1 ) 변수를 선언하고

                       2 ) undefined로 초기화해둡니다( 초기화된 상태로 끌어올려~~)

 

var a = undefined;
console.log(a);  // undefined
a = 10;
console.log(a);  // 10

 

 

          ○ let, oonst : 변수 호이스팅이 조금 다른 방식으로 발생합니다.

 

console.log(a);  // ReferenceError: a is not defined
let a = 10;

 

 

       뒷열에서 선언한 변수를 앞에서 참조하려 하니 에러가 발생합니다.

        just like.. 호이스팅이 발생하지 않는 것처럼 보입니다.

             == > let, const의 호이스팅 과정이 var와 다르게 진행되기 때문.

             ☆ let / const로 변수를 선언하는 경우,

 

                     코드를 실행하기 전에는 

                             1 ) ' 변수 선언 ' 만 해두며

                             2 )  ' 초기화' 는 코드 실행 과정에서, 변수 선언문을 만났을 때 수행합니다.

let a; // 선언만 하고 정의는 하지 않음. var은 정의 하지않아도 undefined가 들어감.
console.log(a);  // ReferenceError: a is not defined
a = 10;
console.log(a); // 10

            이러한 이유로,  호이스팅이 분명 있긴 하지만, 값을 참조할 수 없는 상태가 됩니다.

 

 

            ＠ 호이스팅을 확인하고 싶다면,

                        

let a = 10;  // 전역변수 a선언

if(true){
    console.log(a); // 10
}

        - 전역변수로 선언된 a의 값 10을,  if 문 블럭에서 참조하여 출력합니다.

 

let a = 10;  // 전역변수 a선언

if(true){
    console.log(a);  // ReferenceError: a is not defined
    let a = 20;  // 지역변수 a 선언
}

     - if 문 블럭 내부에서 지역변수 a를 다시 선언했습니다.

       이 경우,  지역 변수 a 앞에서 console.log()로 참조시 에러가 발생합니다.

 

 

        § 그 이유는 지역변수 a가 호이스팅 되면서 TDZ 구간이 만들어졌기 때문입니다.

 

              = > 변수의 선언과 초기화 사이에서,

                    일시적으로 변수 값을 참조할 수 없는 구간을 TDZ(Temporal Dead Zone)이라고 합니다.

 

                  * 지역변수가 전역변수보다 우선 순위를 가짐.

 

---

5. 전역 객체 프로퍼티 여부

---

 

           ☆ var :  var 로 선언된 변수는 전역 객체(브라우저 환경의 경우 window) 의 프로퍼티입니다.

 

           ☆ let,const :  let&const 로 선언된 변수는 전역 객체 프로퍼티가 아닙니다.

 

---

 

1. const & let을 이용해서 변수를 선언하라 !

2. 값을 재할당 시켜야 할 경우가 아니라면, const를 디폴트로 써라 !

3. var 는 내다버려 이놈아.