[JS] javascript 변수

변수

var / let / const

var와 let는 크게 다르지 않지만 다음의 차이점이 존재한다.

1. var는 한 번 선언된 변수를 다시 선언할 수 있다.

var name='Mike';
var name='Jane';

같은 상황에서 let은, 오류가 발생한다.

let name='Mike';
let name='Jane'; // 다음과 같이 재선언할 수 없음

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

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

console.log(name); <-- 정상 작동, 
			다만 undefined의 값을 가짐
var name='Mike';   

변수의 '선언'은 호이스팅 되지만, '할당'은 호이스팅 되지 않는다.
따라서 console.log()문이 동작할 때에는 name이라는 변수는 아직 'Mike'의 값을 가지지 않는다.

var과 함께 let과 const 모두 호이스팅이 되지만,
TDZ(Temporal Dead Zone) 의 영향을 받아 위와 같은 작업시 오류를 발생시킨다.
즉, 할당을 하기 전에 변수를 사용하면 오류가 발생한다.
TDZ에 대한 설명은 아래에서 나타난다.

변수의 생성과정

변수의 생성과정은 세 단계로 나뉜다.

1. 선언 단계
2. 초기화 단계 : 선언된 변수를 위한 메모리 확보 (undefined 상태)
3. 할당 단계 : 확보된 메모리에 값 할당

var

1. 선언 + 초기화 단계
2. 할당 단계

var는 선언을 함과 동시에 초기화가 진행된다.
var name;과 같이 선언만 하더라도 메모리가 확보되고, undefined의 값을 갖게 되는 것이다.
따라서 var 변수는 코드에서의 할당 전에도 사용이 가능하다.

let

1. 선언 단계
2. 초기화 단계
3. 할당 단계

let은 모든 단계가 나뉘어져 있다.
따라서 let name;로 호이스팅만 된 let 변수는 아직 초기화되지 않은 상태이다.

let/const 변수의 선언 단계와 초기화 단계 사이에 존재하는 부분을 'TDZ (Temporal Dead Zone)'이라고 부른다.

이 TDZ에서 변수를 사용하려고 하면, ReferenceError가 발생한다.

const

1. 선언 + 초기화 + 할당 단계

const는 반드시 선언과 할당이 함께 이루어진다.
실제 코드에서 const 변수의 선언+할당이 나오기 전까지 TDZ의 영향을 받는다.

스코프

let, const : 블록 스코프

var : 함수 스코프

var은 함수 스코프로 함수 내에서 선언한 변수는 모두 지역변수가 된다.
그 예로, 아래의 코드를 보자.

const age=30;
if(age>19) {
	var text = '성인';
    console.log(text);
}

console.log(text);

if문 내에서 선언한 변수 text가 if문을 나와서도 존재하며,
사용 가능하다. if라는 block을 벗어나서도 동일 함수에 내에서는 지역변수로 사용 가능한 것이다.
반면 let과 const는 블럭 스코프로, block 내에서 선언된 변수는 해당 block를 벗어나면 사라진다.