차이점
1. 중복선언
2. 재할당
3. 스코프(Scope)
4. 호이스팅(Hoisting)
5. 전역객체 프로퍼티
var
- 중복 선언 가능 (재선언 가능, 마지막으로 할당된 값이 변수에 저장)
var a = 1;
console.log(a); // 1
var a = 10;
console.log(a); // 10
var a;
console.log(a); // 10
- 재할당 가능 (선언해둔 변수를 잊고 값을 재할당하면 다시 덮어씌워지는 경우)
var a = 5;
a = 10;
console.log(a); // 10
- 스코프(Scope) - 함수 레벨 스코프(Function-level scope)
스코프? 변수에 접근할 수 있는 범위
지역변수(함수 내에서 선언된 변수)
전역변수(함수의 외부에서 선언된 변수)
지역변수에서 선언된 변수는 지역변수로 선언되어 참조할 수 있고 이 경우 변수의 스코프는 함수 내부로 제한
- 호이스팅(Hoisting) - var로 선언한 변수는 호이스팅 시 undefined로 변수를 초기화
자바스크립트 엔진이 소스코드 평가 과정에서 변수 선언을 포함한 모든 선언문을 먼저 찾아내어 실행하고 이후 모든 선언문을 제외한 소스코드를 순차적으로 실행하는데 이때 선언문이 최상단으로 끌어올려져 동작하는 것, 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
- 선언 단계 : 변수를 실행 컨텍스트에 등록(스코프가 참조할 수 있게 한다.)
- 초기화 단계 : 선언 단계의 변수를 위한 메모리 공간 확보(undefined를 할당해 초기화)
- 할당 단계 : 초기화 단계의 메모리에 값을 할당
- var로 선언한 변수는 전역객체(브라우저 환경에서 window)의 프로퍼티(속성)로 할당된다.
전역 객체를 사용하면 어디서나 사용할 수 있는 변수나 함수를 만들 수 있다.
let
- 같은 변수 중복선언 불가능
- 값 재할당 가능
- 스코프(Scope) - 블록 레벨 스코프(block-level scope)
모든 코드 블록(함수, if문, for문, while문 등)에서 선언된 변수를 지역변수로 인정
블록(block)? for문과 if문에서 중괄호 { }로 되어있는 부분
- 호이스팅(Hoisting) - 호이스팅이 발생했으나 값을 참조할 수 없기 때문에 호이스팅이 이뤄지지 않는 것처럼 보인다.'선언 단계'와 '초기화 단계'가 분리되어 진행된다. (일시적 사각지대)
- 전역객체 프로퍼티 : let으로 선언한 변수는 전역 객체의 property가 아니다.
const
- 같은 변수 중복선언 불가능
- 값 한 번 설정하고 나면 다른 값 재할당 불가능 (선언과 할당을 동시에 해줘야 함)
const로 객체 프로퍼티 변경하기
- 할당된 객체의 프로퍼티는 변경할 수 있다.
- 재할당은 안되지만, 할당된 그 객체의 내용물은 변경할 수 있다.
- 주의 : 설정(=할당)된 주소 값은 변경되지 않는다.
- 스코프(Scope) - 블록 레벨 스코프(block-level scope)
블록 내에서 변수가 선언되었기 때문에 지역변수의 개념으로 인정된다. 해당 변수는 block 내에서만 유효하며, 외부에서 접근(=참조)할 수 없는 상태가 된다.
- 호이스팅(Hoisting) - const도 TDZ(Temporal Dead Zone, 초기화되지 않은 변수가 있는 곳)로 인한 제약을 받는다.
- 전역객체 프로퍼티 - let과 마찬가지로 const로 선언한 변수는 전역 객체의 property가 아니다.
호이스팅에 관련된 글
https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/