JavaScript 변수 (let, const)

기존의 var의 문제점으로 인하여 자바스크립트에는 let, const가 생기기 시작했다.

 

var에 대해서 알고 싶으면 아래의 링크로 가면 된다.

https://duyaan.tistory.com/43

JavaScript 변수 (var)

 

let과 const가 어떻게 var의 문제점을 고칠 수 있는지 알아보자.

 

let

1. let으로 선언된 변수는 블록 범위 변수이다.

블록이란, if문이나 for문처럼 중괄호{}로 묶인 것을 의미한다. 각각이 하나의 블록을 이루는 것이다.

 

var로 선언된 변수는 전역 또는 함수 내에 쓰이는 변수이다.

함수 내에서 쓴 경우는 함수 밖에 나가면 없어진다.

하지만 블록 내에서 쓰였다고 해도 블록을 벗어나면 없어지지 않는다.

 

 

이는 코드가 많아지면 낭비도 심해지고 더욱 복잡하게 만든다.

하지만 let으로 선언된 변수는 블록 범위이기 때문에 함수뿐만 아니라 블록 내에서 쓰여도 밖에서는 없어진다.

 

 

 

2. let으로 선언된 변수는 재선언이 되지 않는다.

var는 중복 선언이 가능해서 가장 나중에 나온 변수로 초기화가 된다. 반면 let으로 선언된 변수는 중복 선언 결과 에러를 발생시킨다. (같은 범위 내에서)

let num = 0;
let num = 1;
console.log(num);

// SyntaxError: Identifier 'num' has already been declared

 

다른 범위에서 쓰이면 중복 선언이 아닌 다른 변수라고 인식한다.

 

 

다만, var와 같이 업데이트는 가능하다.

let num = 0;
num = 1;
console.log(num);

// 1

 

 

 

3. 호이스팅

 

var와 같이 let도 실행 전에 호이스팅이 일어나긴 하지만, var와 달리 초기화되진 않는다.

따라서 let으로 선언된 변수를 선언되기 전에 쓰면 에러를 발생시킨다.

console.log(num);
let num = 0;

// ReferenceError: Cannot access 'num' before initialization

 

 

 

 

const

const는 let과 똑같이 var의 문제점을 해결한다.

다만 let과는 다르게 const로 선언된 변수는 업데이트가 불가능하다.

 

1. const로 선언된 변수는 블록 범위 변수이다.

let과 같은 맥락이다.

 

 

 

2. const로 선언된 변수는 재선언도 불가능하지만 업데이트도 불가능하다.

재선언이 불가능한 것은 let과 같은 맥락이지만,

let과의 다른 점은 업데이트의 가능 여부이다.

let으로 선언된 변수는 차후에 업데이트를 할 수 있지만

const로 선언된 변수는 차후에 업데이트하려면 에러가 발생한다.

const num = 0;
num = 1;
console.log(num);

// TypeError: Assignment to constant variable.

 

(추가)

객체는 조금 다르다.

객체 자체는 업데이트할 수 없다.

const obj = {
    a: 0,
    b: 1,
    c: 2
}
obj = {
    a: 4,
    b: 5,
    c: 6
}
console.log(obj);

// TypeError: Assignment to constant variable.

 

하지만 객체의 속성에 접근해서 업데이트하는 것은 가능하다.

const obj = {
    a: 0,
    b: 1,
    c: 2
}
obj.a = 4;
console.log(obj);

// { a: 4, b: 1, c: 2 }

 

 

 

3. 호이스팅

let과 같은 맥락이다.

 

 

 

왜 let, const를 많이 쓰는지를 알고 쓰는 게 나을 것 같아서 정리를 했다.

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)