[JS] - var, let, const의 차이점 간단하고 쉽게 이해하기 (예제코드)

🧹간단정리

var, let, const는 값을 저장하는 '변수'를 불러오는 키워드이다.

• var : 재선언 가능, 재할당 가능,함수 레벨 스코프 *블록 레벨 스코프 무시
• let  : 재선언 불가능, 재할당 가능, 블록 레벨 스코프, 
• const : 재선언 불가능, 재할당 불가능, 블록 레벨 스코프

스..스코프가 뭐지??

[JS] - 스코프란? 간단하고 쉽게 이해하기 (예제코드, 글로벌 스코프,블록 레벨 스코프, 함수 스코

 

(자세한 내용은 아래에...👀)

---

👲🏻 var 키워드 - 전통적인 변수선언

var는 JavaScript에서 가장 오래된 변수 선언 키워드이다.

재선언과 재할당이 모두 가능하다는 것이 특징이다.

1. 함수 레벨 스코프(Function Level Scope)
var로 선언된 변수는 선언된 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없다.

하지만, 함수가 아닌 블록(예: if문, for문) 내에서 선언된 경우에는 그 블록 밖에서도 접근할 수 있다.

2. 호이스팅(Hoisting)
var로 선언된 변수는 선언 전에 사용할 수 있다.

(이는 JavaScript가 var 변수를 코드의 최상단으로 "끌어올린다"는 의미.)

따라서 '호이스팅'이 동작되는 현상으로 인하여

예상치 못한 오류를 발생시킬 수 있으므로 개발시 추천하지 않는 키워드이다.

 

 

[JS] - 호이스팅이란? 완벽하게 이해하기 (예제코드, var let const 의 차이점, var를 사용하면 위험한

 

🧑🏻‍💻 예제코드

var로 선언된 변수 a는 재선언 및 재할당이 모두 가능

// var로 변수 선언 및 초기화
var varVariable = "초기값";
console.log(varVariable); // 출력: 초기값

// var로 같은 이름의 변수 재선언 및 재할당
var varVariable = "재선언된 값";
console.log(varVariable); // 출력: 재선언된 값

// var로 선언된 변수 재할당
varVariable = "재할당된 값";
console.log(varVariable); // 출력: 재할당된 값

// var의 함수 레벨 스코프 확인
function testVarScope() {
    var insideVar = "함수 내부 값";
}
// console.log(insideVar); // ReferenceError(참조 불가) 발생 에러 발생

// var은 블록 레벨 스코프를 무시
if (true) {
    var blockVar = "블록 내부 값";
}
console.log(blockVar); // 출력: 블록 내부 값

---

🏃🏻‍♂️ let - 블록 레벨 변수 선언

ES6에서 새롭게 추가된 let은 더 엄격하고 현대적인 변수 선언 방식

 

1. 블록 레벨 스코프(Block Level Scope)

let으로 선언된 변수는 선언된 블록(함수, if문, for문, while문 등) 내에서만 유효.

 

2. 호이스팅 방지

let으로 선언된 변수는 선언 전에 접근할 수 없다.

이는 "일시적 사각지대(Temporal Dead Zone)"로 인해 보다 안전한 코딩을 가능하게 한다.

 

[JS] - TDZ(Temporal Dead Zone)이란? 간단하고 쉽게 이해하기 (예제코드, 임시 사각 지대란?)

 

🧑🏻‍💻 예제코드

// let으로 변수 선언 및 초기화
let letVariable = "초기값";
console.log(letVariable); // 출력: 초기값

// let으로 같은 이름의 변수 재선언 시도 (오류 발생)
let letVariable = "재선언 시도"; // letVariable(이미 선언된 변수) 발생

// let으로 선언된 변수 재할당
letVariable = "재할당된 값";
console.log(letVariable); // 출력: 재할당된 값

// let의 블록 레벨 스코프 확인
if (true) {
    let insideLet = "블록 내부 값";
    console.log(insideLet); // 출력: 블록 내부 값
}
console.log(insideLet); // ReferenceError(참조 불가) 발생

 

---

📌 const - 상수 선언

const도 ES6에서 도입된 키워드로, 한 번 할당하면 변경할 수 없는 값을 선언할 때 사용.

1. 블록 레벨 스코프(Block Level Scope)

선언된 변수는 let과 동일하게 선언된 블록(함수, if문, for문, while문 등) 내에서만 유효하다

2. 호이스팅 방지

let으로 선언된 변수는 선언 전에 접근할 수 없다.

이는 "일시적 사각지대(Temporal Dead Zone)"로 인해 보다 안전한 코딩을 가능하게 한다.

 

3.재할당 불가능

한 번 할당된 값은 변경할 수 없다.

프로그램의 복잡성을 줄이고, 의도치 않은 값의 변경을 방지하기 위함.

🧑🏻‍💻 예제코드

// const로 상수 선언 및 초기화
const constVariable = "초기값";
console.log(constVariable); // 출력: 초기값

// const로 같은 이름의 변수 재선언 시도 (오류 발생)
const constVariable = "재선언 시도"; // constVariable(이미 선언) 발생

// const로 선언된 변수 재할당 시도 (오류 발생)
constVariable = "재할당 시도"; // Assignment(재할당) 불가 발생

// const의 블록 레벨 스코프 확인
if (true) {
    const insideConst = "블록 내부 값";
    console.log(insideConst); // 출력: 블록 내부 값
}
 console.log(insideConst); // ReferenceError(참조 불가) 발생

 

---

💁🏻‍♂️ 마무리 

이제 3가지의 차이점을 잘 알았고 흥미가 생겼다면 
TDZ, 호이스팅 개념에 대해 알아보는 것도 추천한다!