기술 면접 중에 'const와 let은 왜 나누게 되었을까요?, const와 let을 블록 스코프 관련해서 말해주세요.' 라는 면접질문들을 받았고 재할당 부분밖에 대답하지 못하였습니다.🥲 공부를 하면서 기록하고자 const, let 내용 중에서도 블록 레벨 스코프에 대해 작성하겠습니다.
var의 함수 레벨 스코프
ES5에서는 var 키워드를 사용해서 변수를 선언해야 했습니다. 하지만 var 키워드는 많은 단점들이 있었는데 특히나 '함수 레벨 스코프' 라는 특징은 전역변수를 남발하게 되는 가능성을 높여 문제가 있었습니다.
함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
var foo = 123;
console.log(foo) // 123
{
var foo = 456;
}
console.log(foo) // 456위와 같이 코드 블록에서 var로 선언된 변수가 이미 전역 변수로 선언되었으면 중복선언이 허용되어 전역변수의 foo가 456으로 재할당됩니다.
const, let의 블록 레벨 스코프
블록 레벨 스코프(Block-level scope)
모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.
let foo = 123; // 전역 변수
{
let foo = 456; // 지역 변수
let bar = 456; // 지역 변수
}
console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not definedlet 키워드로 선언된 foo는 블록 레벨 스코프를 따라 지역변수로 선언됩니다. 블록 간 별개의 변수로 생성되어 재할당을 막을 수 있습니다.
const를 사용해야하는 이유
- 코드 이해 관련된 측면에서는 추론하기 쉬운 코드를 만들 수 있기 때문입니다.
- 변수를 사용하면 상황에 따라 바뀌는 값을 추론해야 하지만, 재할당 할 수 없는 상수를 사용하면 추론하지 못하는 케이스가 줄어들 수 있습니다
const 타입 객체
- const 타입의 객체는 변수와 달리 객체 내용이 변경되더라도 객체 타입 변수에 할당된 주소값이 변경되지 않습니다.
- 재할당은 불가능 하지만 객체 프로퍼티는 보호되지 않아 값을 추가, 삭제, 변경이 가능합니다.
const user = { name: 'JJ' };
// user = {}; // TypeError, 재할당 금지
// 객체의 내용은 변경 가능
user.name = 'AA';
console.log(user); // { name: 'AA' }
참고 링크
https://poiemaweb.com/es6-block-scope
https://medium.com/dailyjs/use-const-and-make-your-javascript-code-better-aac4f3786ca1
