DEEP DIVE 15장 - let, const 키워드와 블록 레벨 스코프

Mudi·2022년 10월 27일
0

[Book] Deep Dive

목록 보기
3/5
post-thumbnail

let, const 키워드와 블록 레벨 스코프




var 키워드로 선언한 변수의 문제점

지금까지 자바스크립트를 공부하며 var 키워드 사용을 지양해야하는 이유를 수 없이 접했을겁니다. 이번에 var 키워드를 사용하면 어떤 문제가 있는지 한방에 정리해보겠습니다.


변수 중복 선언 허용

var 키워드로 선언한 변수는 중복 선언이 가능합니다. (letconst 키워드는 중복 선언 X)

var x = 1;
// 중복 선언
var x = 100;
console.log(x); // 100

var y = 1;
// 중복 선언
var y;
console.log(y); // 1 

위 예시의 y 변수처럼 값을 할당하지 않는 변수 선언은 무시됩니다.

함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정합니다.
letconst 키워드는 블록 레벨 스코프로 함수 뿐 아니라 for, if, while 문 등에서도 지역 스코프로 인정합니다.

var i = 10;

for (var i = 0; i < 3; i++){
	console.log(i); // 0 1 2 3
}

console.log(i) // 3

위 예시의 for문 안에서 선언된 ivar 키워드로 선언하였기 때문에 전역 변수가 되어 중복 선언이 됩니다.

변수 호이스팅

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 스코프의 선두로 끌어 올려진 것 처럼 동작합니다. 에러를 발생시키지는 않지만 프로그램의 흐름상 맞지 않고 오류를 발생시킬 확률이 높습니다.
⬆️ var 키워드 사용하여 실행 된 후 선언한 것은 오류를 나타내지 않고 undefined를 반환합니다.

⬆️ 반면 let 키워드로 변수를 실행 후에 선언하면 ReferenceError를 반환합니다.



Const 키워드

일반적으로 const 키워드는 변수에 담긴 값을 상수처럼 사용하고자할 때 사용합니다.


선언과 초기화

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야합니다. 초기화란 변수에 값을 할당하는 것을 의미합니다.

⬆️ 그러지 않으면 에러가 발생합니다.


⬆️ const 키워드 또한 let키워드와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것 처럼 동작합니다.

재할당 금지

const 키워드는 변수에 값을 재할당 할 수 없습니다. (varlet은 재할당 가능합니다.)

상수

재할당을 할 수 없기 때문에 const 키워드로 선언한 변수는 상수처럼 사용이 가능합니다.
일반적으로 상수의 이름은 대문자로 선언하여 상수임을 명확히 나타냅니다.

const 키워드와 객체

const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지는 않습니다.

const 키워드로 선언된 변수에 원시값을 할당할 경우 값을 재할당할 수는 없지만 const 키워드로 선언된 변수에 객체가 할당된 경우 값을 변경할 수 있습니다. 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능합니다.

그러면 var, let, const 중 어떤 걸 사용해야하나요?


우선 ES6를 사용한다면 var키워드를 사용하지 않는것을 권장합니다.
변수를 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋습니다. const 키워드를 사용하면 의도치 않은 재할당을 방지하기 때문에 더 안전합니다.

출처 : 자바스크립트 DEEP DIVE

0개의 댓글