스터디를 준비하면서 기존의 변수 키워드인 var와 es6 이후에 도입된 const, let의 차이점을 명확히 알기위해 정리 해 봤습니다.
let과 const가 나온 이유?
- 기존에
var변수 키워드가 있는데 왜 let, const가 생겼을까?
- 호이스팅의 문제
- 변수의 중복 선언 허용
- var 키워드 생략 허용
- 함수 레벨 스코프
1. 호이스팅의 문제
-
자바스크립트는 모든 선언을 호이스팅한다. 그렇다면 호이스팅은 뭘까?
호이스팅이란 var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다. -
변수를 선언하기 이전에 변수를 참조할 수 있다.
//error가 아닌 undefined를 호출한다. 이는 선언하기 이전에 변수를 참조를 할 수 있다는 얘기
console.log(foo);
var foo; //변수 선언이렇게 될 수 있는 이유는 var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 즉 스코프에 변수를 등록(선언단계)하고 메모리에 변수를 위한 공간을 확보한 후 undefined로 초기화 한다 그래서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기에 에러가 발생하지 않는다.
하지만 let, const는 var와는 다르게 선언 단계와 초기화 단계가 분리되어 진행된다. 그래서 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다.
이는, 변수가 아직 초기화 되지 않았기 때문이다.
2. 변수의 중복 선언 허용
var 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 있었다. 하지만 let 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 없다.
var keyWord = 123;
var keyWord = 456; //중복 선언이 가능
let keyLet = 123;
let keyLet = 456; // 문법 에러가 발생3. var 키워드 생략 허용
- 자바스크립트는 변수 선언을 유연하게 사용할 수 있지만 문제점을 야기 시킬 수 있다. 코드를 한번 보자!
var a = 5;
b = 10;
console.log(a + b); //15위 코드를 봤을 때 var 키워드를 적지 않아도 변수로 선언되는 특징을 가지고 있다. 하지만 이렇게 될 때 문제를 일으킬 수도 있다.
다음 코드를 보자
a = 3;
function add() {
var a = 5;
console.log(a);
}
add(); //5
console.log(a)// 3함수 add 안에있는 변수인 a에 접근할 수 없다. 왜냐하면 함수 안에 있는 변수는 지역변수이기 때문에 이름이 같다 한들 전역 변수 a에 영향을 끼치지 않는다.
하지만 함수 안에 var를 생략한 변수 선언을 사용하면 다음과 같은 문제가 발생한다.
a = 3;
function add(){
a = 5;
console.log(a);//5
}
console.log(a) //5함수 add 안의 a = 5라는 선언은 지역변수가 아닌 전역객체 window의 a를 5로 초기화시켜 버린다.
4. 함수 레벨 스코프
-
var 키워드는 함수 레벨 스코프로 함수의 코드 블록만을 스코프로 인정한다. 따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수이다. 이는 전역 변수를 남발할 가능성을 높인다.
-
for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다.
let, const는 함수 레벨 스코프가 아닌 블록 레벨 스코프(if,for,function..등등) 따르기에 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하고 코드 블록 외부에서는 참조 할 수 없다.
