[javascript] 세 가지 변수의 차이점

# var, let, const

변수가 사용되는 가장 큰 이유는 재사용성이다. 변수의 종류은 3가지로 나뉘며 ES5까지 사용하던 var와 ES6부터 추가된 let, const가 있다.

# 세 가지 변수의 차이점

# 재선언과 재할당

• var : 재선언 O 재할당 O
• let : 재선언 X 재할당 O
• const : 재선언 X 재할당 X

# 스코프

스코프는 변수가 유효한 범위를 말한다.

• var : 함수 레벨 스코프, 함수내부에 선언된 변수는 지역변수로 간주되며 나머지는 모두 전역변수로 간주된다.
• let / const : 블록 레벨 스코프, 함수내부에 선언된 변수와 if문이나 for문 등에 코드블록{} 내에 선언된 변수 모두 지역변수로 간주된다.

# 호이스팅

호이스팅은 변수를 유효 스코프 최상단으로 끌어올리는 듯한 현상을 말한다.
기본적으로 세 가지 변수 모두 호이스팅이 되지만 선언,초기화,할당 단계에서 차이가 발생하기 때문에 호이스팅이 되지 않는 것처럼 보이는 것이다.

변수 생성 단계
(1) 선언(Declaration): 변수를 실행 컨텍스트의 environmentRecord에 등록, environmentRecord는 스코프가 참조하는 대상
(2) 초기화(Initialization): environmentRecord에 등록 된 변수를 위한 메모리를 확보, 이 단계에서 변수는 undefined로 초기화
(3) 할당(Assignment): undefined로 초기화 된 변수에 실제 값을 할당

• var : 선언 단계와 초기화 단계가 동시에 이루어진다. 선언 단계에서 실행컨텍스트(코드가 실행되기 위한 환경) 변수객체에 변수를 등록하고 초기화 단계에서 변수를 위한 메모리를 만든 뒤 undefined로 초기화한다. 그렇기 때문에 선언문 이전에 변수에 접근해도 undefined를 반환한다.
• let : 선언 단계와 초기화 단계가 나누어 이루어진다. 선언문에 도달했을 때 초기화 단계가 진행되므로 선언문 이전에 변수에 접근하면 에러가 발생한다. 즉 선언문에 도달하기 전 실행컨텍스트 변수객체에 변수만 등록하고 초기화 단계는 선언문에 도달하기 전이므로 메모리가 만들어지지 않은 상태이므로 에러가 발생하는 것이다.
• const : 선언과 동시에 초기화, 할당까지 이루어진다. 그렇기 때문에 초기 값이 필수이다.

위와 같이 let과 const은 선언 전 사용이 불가능한데 스코프 시작점과 초기화 시작점까지의 구간을 TDZ(템퍼럴데드존)이라고 한다.

결론! : 가장 안전한 const를 기본으로 사용하고 재할당이 필요한 경우를 한정해서 let을 사용하면 된다.

# 개발자 도구에서 변수가 저장되는 위치 확인

개발자 도구에서 변수 저장위치를 확인해볼 수 있다.

• 전역 실행컨텍스트에서 실행될 때 저장되는 위치
  a=1 : Global(전역변수)
  var a=value : Global(전역변수)
  let a=value : Script
  const a=value : Script

• 함수 실행컨텍스트에서 실행될 때 저장되는 위치
  a=value : Global(전역변수)
  var a=value : Local(지역변수)
  let a=value : Local(지역변수)
  const a=value : Local(지역변수)