🖥 let, const
💡 var 키워드의 문제
변수 중복 선언 허용
var 키워드로 선언한 변수는 중복 선언이 가능하다.
var x = 1;
var y = 1;
var x = 100;
var y;
console.log(x); // 100
console.log(y); // 1var 키워드로 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작한다.
위 코드를 보면 x는 100으로 초기화 되었기 때문에 100이 출력되고 y는 초기화 문이 없기 때문에 무시되어 그대로 1이 출력된다.
함수 레벨 스코프
var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.
var x = 1;
if (true) {
var x = 100;
}
console.log(x) // 100함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역변수가 된다.
변수 호이스팅
var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다.
console.log(foo); // undefined
foo = 123;
console.log(foo); // 123
var foo;변수 선언문 이전에 변수를 참조하는 것은 변수 호이스팅에 의해 에러를 발생시키지는 않는다.
프로그램의 흐름과 맞지 않고 가독성을 떨어뜨려 오류를 발생시킬 여지를 남긴다.
✅ 여기까지가 ES5까지 유일하게 변수를 선언할수 있었던 var키워드의 문제점이다.
💡 let
변수 중복 선언 금지
var 키워드와 달리 let 키워드로 같은 이름의 변수를 중복 선언하게 되면 문법 에러(SyntaxError)가 발생한다.
블록 레벨 스코프
let 키워드는 var 키워드와 달리 모든 코드블록(함수, if문, for문, while문, try/catch 문 등)을 지역스코프로 인정하는 블록 레벨 스코프를 따른다.
let foo = 1;
{
let foo = 2;
let bar = 3;
}
console.log(foo); // 1
console.log(bar); // ReferenceError위 코드를 보면 코드블록 내의 foo와 bar변수는 지역변수 이기 때문에 코드 블록 내에서만 유효하다.
변수 호이스팅
우선 한마디로 정리하자면 var 키워드는 런타임 이전에 선언 단계와 초기화 단계가 한번에 실행된다 하지만 let 키워드는 선언 단계와 초기화 단계가 분리되어 진행된다.
console.log(foo); // ReferenceError
let foo;
console.log(foo); // undefined
foo = 1;
console.log(foo); // 1위 코드르 보면 let 키워드는 선언단게가 암묵적으로 이뤄지지만 초기화 단계가 변수 선언문에 도달했을 때 실행된다.
이처럼 스코프의 시작 시점부터 초기화 단게 시작 지점 까지 변수를 참조할수 없다.
이를 일시적 사각지대라고 부른다.
❓ 근데 결국 let키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는것 처럼보인다.
let foo = 1;
{
console.log(foo); // ReferenceError
let foo = 2;
}위 코드를 보면 호이스팅이 일어나지 않는다면 전역 변수인 foo가 출력되어야 하지만 호이스팅이 발생하기 때문에 참조 에러가 발생한다.
전역 객체와 let
var 키워드로 선언한 전역변수와 전역함수, 그리고 암묵적 전역은 전역객체 window의 프로퍼티가 된다.
📌 그러나 let 키워드로 선언한 변수는 전역객체의 프로퍼티가 아닌 보이지 않는 개념적인 블록내에 존재하게 된다.
💡 const
const 키워드는 상수를 선언하기 위해 사용한다. 하지만 반드시 상수만을 위해 사용하지는 않는다.
선언과 초기화
const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화 해야한다.
let키워드와 마찬가지로 블록 레벨 스코프를 가진다.
재할당 금지
const 키워드로 선언한 변수는 재할당이 금지된다.
상수
상수는 재할당이 금지된 변수를 말한다.
상수는 상태 유지와 가독성. 유지보수의 편의를 위해 적극적으로 사용해야 한다.
일반적으로 상수의 이름은 대문자로 선언해 상수임을 명확히 나타낸다.
여러 단어로 이뤄진 경우에는 언더스코어(_)로 구분해서 스네이크 케이스로 표현한다.
const TAX_RATE = 0.1;
let preTaxPrice = 100;
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);const 키워드와 객체
const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.
const person = {
name: 'Lee'
};
person.name = 'Kim'📌 const 키워드는 재할당을 금지할 뿐 불변을 의미하지는 않는다.
프로퍼티 동적생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능.
❓ const의 객체는 어떻게 값을 변경할까
그 이유는 간단하다
위에서 언급한 것처럼 const 키워드는 재할당을 금지할 뿐이다.
const에 숫자와 같은 원시값을 할당하면 메모리에는 원시 값이 저장된다.
그렇기 때문에 다른 값으로 변경하려 하면 새로운 메모리 공간을 확보하고 값을 저장한다.
-> 이건 재할당이다.
const에 객체를 할당하는 것은 메모리에는 객체가 있는 메모리의 주소가 저장되는 것이다.
그렇기 때문에 const 키워드로 선언된 변수의 객체 값을 바꾸는 것은 변수의 주소값을 통해 객체의 접근해 객체의 값을 바꾸는 것이다
-> 이건 재할당이 아니다
💡 그렇기 때문에 객체를 할당한 경우에는 값을 변경할 수 있으므로 const를 사용하는 것이 좋다!
결론
- ES6를 사용한다면 var 키워드는 사용하지 않는다.
- 재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다
- 변경이 발생하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const 키워드를 사용한다. const키워드는 재할당을 금지하므로 var. let키워드 보다 안전하다.
