[basics] var, const, let (변수 선언 키워드 비교, 호이스팅)

javascript ES5 변수 선언 키워드 var의 약점들을 보완하기 위해
ES6 에 let 과 const 키워드가 도입되었다.
각 변수 선언 방법에 대해 알아보자.

javascript 변수 선언 방식 비교

비교 구분	var	let	const
ES6 도입 여부	X	O	O
level-scope	함수	블록	블록
중복 선언 가능 여부	O	X	X
재할당 가능 여부	O	O	X

1. var

• ES5까지 변수 선언 유일한 방법
• 함수 레벨 스코프
  함수 내 선언된 변수는 함수 내에서만 유효하며 함수 외부에서 참조 불가능
  ex) for 문 내 var 변수 선언 시, for 문 코드 블럭 외부 에서 참조 가능 (함수 내부)
• var 키워드 생략 가능
  => 선언과 할당 구분 어려움. 전역 변수 양산 가능성 큼
• 변수 중복 선언 허용
  => 의도하지 않은 변수의 값 변경 가능성 큼
• 호이스팅
  => 변수 선언 전에 참조 가능
• 변수 선언과 초기화 동시에 수행

2. let

• ES6 부터 도입
• 블록 레벨 스코프
  코드 블록 (함수, if문, for문, while문, try-catch문 등) 내에서만 유효하며 코드 블록 외부에서 참조 불가능
  ex) for 문 코드 블럭 외부에서 참조 불가능
• 변수 중복 선언 불가
• 재할당 가능
• 변수 선언과 초기화 분리

3. 호이스팅

• 선언문을 해당 scope 의 선두로 옮긴 것처럼 동작하는 특성
• javascript는 var, let, const, function, class 등 모든 선언을 호이스팅한다.

console.log(salad); // undefined => Error 발생 X
var salad; //  var : 변수 선언과 동시에 undefined 초기화

console.log(pasta); // Error: Uncaught ReferenceError: pasta is not defined
let pasta; // let : 변수 선언, 초기화 분리
// 초기화는 변수 선언문 line에서 수행 => 초기화 이전에 변수 접근 시, 참조 Error 발생!

4. const

• ES6 부터 도입
• 블록 레벨 스코프
• 상수 (불변값) 할당을 위해 사용
• 변수 중복 선언 불가
• 재할당 불가
  const 변수 타입이 json object인 경우, 요소의 내용은 변경 가능
• 선언과 동시에 할당 필수
  만약 const 변수 선언만 할 경우, 문법 오류 (SyntaxError) 발생

정리

• ES6 에서는 var 키워드 사용 불가
• 재할당이 필요한 경우에만 let 사용. 그 외 const 사용하는 것이 안전
• 변수의 scope는 최대한 좁게 만드는 것이 예외 상황 발생 방지에 유리

참고

• let, const와 블록 레벨 스코프