[자바스크립트] 변수 스코프 이해하기 | var, let, const

아래 글을 읽고오면 이해가 더 쉬울 것이다

2021.12.20 - [javascript] - [자바스크립트] 기초부터 시작하기 | 변수, 자료형, 객체, 배열, 함수

 

var

var 키워드로 선언된 변수는 함수 스코프에 종속된다.

 for 루프 내에서 선언된 var는 for 루프 밖에서도 사용할 수 있다.

 

let

let 키워드로 선언된 변수는 블록 스코프로 종속된다.

변수가 선언된 블록과 그 하위 블록 내에서만 사용할 수 있다.

var 와 let 의 차이

: let은 x를 블록 스코프내에서  재선언하여 값을 재할당 할 경우 덮어써지지 않지만,

var는 블록 스코프 외부에서 접근이 가능하므로 재할당할 경우 값이 덮어써진다.

// let
let x = "global";
if(x === "global"){
    let x = "block-scoped";
    console.log(x);	// block-scoped
}
console.log(x);	// global

// var
var x = "global";
if(x === "global"){
    var x = "block-scoped";
    console.log(x);	// block-scoped
}
console.log(x);	// block-scoped

 

const

let과 마찬가지로 블록 스코프에 종속되지만 값을 재할당할 수 없고, 다시 선언될 수도 없다.

const에 객체가 담겼다면?

const person = {
    name: "Alberto",
    age: 25,
}

person.age = 26;
console.log(person.age);	// 26

이 경우 변수 전체를 재할당하는 것이 아닌 속성 중 하나만 재할당하는 것이므로 문제가 되지 않는다.

-> 객체가 변경되지 못하게 하는법

const person = {
    name: "Alberto",
    age: 25,
}
Object.freeze(person);

person.age = 26;
console.log(person.age);	// 25

 

TDZ : 일시적 비활성화 구역

console.log(i);	// undefined
var i = "I am a variable";

console.log(j);	// Reference Error
let j = "I am a let";å

var는 정의되기 전에 접근할 수 있다. 하지만, 그 값에는 접근할 수 없다.

let과 const는 정의되기 전에 접근할 수 없다.

---

var가 가지는 가장 큰 차이점은 정의되기 전에도 접근할 수 있다는 점이다. 정의되기 전에는 undefined값을 갖는다.

반면, let의 경우 변수가 선언될 때까지 TDZ구역에 있게 된다. 따라서, 초기화 전에 접근 시 오류가 발생한다.

undefined값보다 에러가 발생하는 편이 코드 디버깅이 더 쉽다.