변수, 호이스팅, TDZ(Temporal Dead Zone)

var 과 let, const 의 차이점

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

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

---------------------------

let name = 'Mike' ;
console.log(name); // Mike

let name = 'Jane' ;
console.log(name); // error

---------------------------

let name = 'Mike' ;
console.log(name); // Mike

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

# var 과 let은 대부분의 경우에서 바꿔 사용할 수 있지만 차이점이 있다

var 은 변수를 바꿀때 또 선언해도 문제가 없지만

let은 변수를 바꿀 경우 또 선언하면 안된다

 

호이스팅 ( hoisting )

var name;

console.log(name); // undefined

name = 'Mike';

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

이를 호이스팅 (hoisting) 이라고 하는데 인터프리터가

변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말한다

 

 

console.log(name); // ReferenceError

let name = 'Mike';

# let 과 const 경우에는 선언하기 전에는 사용할 수 없는데 이는 TDZ(Temporal Dead Zone) 때문이다

TDZ란 일시적인 사각지대로, 변수를 사용하는 것을 비허용하는 개념상의 공간이다.

TDZ에 있는 값에 접근하게 되면 ReferenceError: Cannot access 'xxx' before initialization 에러가 발생한다

 

 

변수의 생성 과정

1. 선언 단계

2. 초기화 단계

3. 할당 단계

 

var 

1. 선언 및 초기화 단계     

2. 할당 단계

 

let   

1. 선언 단계

2. 초기화 단계

3. 할당 단

 

const 

1. 선언 + 초기화 + 할당

 

let name;
name = 'Mike';

var age;
age = 30;

const gender; // SyntaxError
gender = 'male';

# let 과 var 은 문제가 없지만 const 는 선언과 동시에 할당을 해주어야 하기 때문에 에러가 난다

 

스코프

스코프란 변수에 접근할 수 있는 범위라고 생각하면 된다

 

var : 함수 스코프 (function-scoped)

let, const : 블록 스코프 (block-scoped)

 

함수 스코프 

• 함수가 선언되면 하나의 스코프(접근 범위)가 발생하는데 이걸 함수스코프라고 한다.
• 함수 스코프는 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능하다는 걸 의미한다.
• 아래 예시처럼 함수 외부에서 aa를 호출하면 undefined 에러가 뜬다.

function abc() {
  var aa = '12';  // 함수 내부에서 선언
}
console.log(aa);  // Uncaught ReferenceError: aa is not defined

if (true) {
  var abc = '123'; // var로 선언하면 블록에 의한 범위 제한이 없음
}
console.log(abc)  // 123

 

 

블록 스코프

• 블록 스코프는 블록({})내부에서 선언된 변수는 해당 블록에서만 접근 가능한 걸 말한다.
• let, const로 선언된 변수가 블록 스코프 방식을 따른다.

function hello() {
  for (var i=0; i<12; i++) {
    ...
  }
  console.log(i)   //접근가능
}

hello();  //12

function hello() {
  for (let i=0; i<12; i++) {
    ...
  }
  console.log(i)
}
hello();  // ReferenceError: i is not defined

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

##

 

 

 

 

 

 

 

 

'

 

 

ㅍ

.