자바스크립트 중급 1- 변수, 호이스팅, TDZ(Temporal Dead Zone)

*변수 :

 let , const : 

  -es6부터 생김. 

var:

  -es6이전 버전에서 사용.

  -var와 let은 크게 다르지 않음. 둘이 바꿔서 사용해도 됨.

  -var는 한번 선언된 변수를 다시 선언할 수 있다.  (let은 한번 선언된 변수 다시 선언x)

var name = 'Mike';
console.log(name);   //Mike
var name = 'Jane';
console.log(name);   //Jane

  -var는 선언하기 전에 사용할 수 있다.

    console.log(name);         //undefined

    var name = 'Mike'; 

  왜냐하면 이렇게 동작하므로 ↓

    var name;              → 코드가 실제로 위로 이동하진 않지만 끌어올려진 것 처럼 동작(호이스팅)

    console.log(name);          //undefined → 선언은 호이스팅o, 할당은 호이스팅x

    name = 'Mike';         //할당은 3번째 줄에서 처리됨.

 

  ※호이스팅 : 스코프(scope) 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동 

    let과 const도 호이스팅이 되지만, 왜 var처럼 선언하기 전에 사용하면 에러를 낼까?

    → Temporal Dead Zone

    let과 const는 함수를 선언 및 할당하기 전까지 사용할 수 없음. (TDZ영역)

    → 코드를 예측 가능하게 하고, 잠재적인 버그를 줄일 수 있다. 

let age = 30;

function showAge(){
  console.log(age);
  let age = 20;    //호이스팅을 일으킴  
}
   
showAge();

    

*변수의 생성과정

 1. 선언 단계  2. 초기화 단계 (=undefined를 할당 해주는 단계) 3. 할당 단계

→var는 선언 과 초기화가 동시에 진행됨 (할당 전에 호출하면 에러를 내지않고 undefined 반환)

→let은 선언과 초기화가 각각 이루어지므로 선언이 먼저 이루어지고 실제 코드에 도달해서 초기화가 이루어짐(에러)

→const는 선언+초기화+할당 동시에 이루어짐. (let, var는 값이 변경되므로 할당 마지막에)

   

*스코프

var

: 함수 스코프(function-scoped)

  '함수'내에서 선언된 변수만 지역변수가 됨.

  const age = 20;

  if (age>19){

         var txt = '성인';      → if문 안에서 선언된 변수는 if문 밖에서도 사용가능. (let,const 블록 스코프는 안됨)

    }

   console.log(txt);   //성인

 

  function add(num1, num2){

         var result = num1 + num2;   →함수 안에서 선언된 변수는 함수 안에서만 사용가능.(함수 스코프)

    }

  add(2,3);

  console.log(result);   → 에러 발생. 

 

let,const

: 블록 스코프(block-scoped)  -함수, if문, for문, while문, try/catch문 등 

 모든 코드블록 내에서 선언된 변수(지역변수)→코드 블록 내에서만 사용 가능

 코드블록ex) function add(){               if(){             for(let i=0;i<10;i++){

                       }                                    }                   }