자바스크립트 JavaScript | JavaScript 변수 선언: var, let, const의 차이점 및 호이스팅

 

⭕ 자바스크립트 JavaScript | JavaScript 변수 선언: var, let, const의 차이점 및 호이스팅

➡️ var

• 재선언 가능
  • 코드의 가독성과 유지보수에 부정적인 영향을 미칠 수 있습니다.

var name = "Alice";
var name = "Bob";  // 재선언 가능
console.log(name); // "Bob"

 

---

• 재할당 가능

var number = 1;
number = 2;  // 재할당 가능
console.log(number); // 2

 

---

• 전역 스코프
• 함수 스코프(function-scoped)
  • 변수가 선언된 함수 내부에서만 접근 가능하게 하는 스코핑 규칙

function testScope() {
  var insideFunction = "visible";
}
console.log(insideFunction); // Uncaught ReferenceError: insideFunction is not defined

 

---

• 호이스팅(hoisting)
  • var로 선언된 변수는 호이스팅 시 선언과 동시에 undefined로 초기화됩니다.
  • 변수 선언 전에 해당 변수를 참조해도 에러가 발생하지 않고 undefined 값을 반환합니다.

console.log(declaredLater); // undefined
var declaredLater = "Now it's defined";
console.log(declaredLater); // "Now it's defined"

 

➡️ let -  ES6

• 재선언 불가능 ⚠️

let name = "Alice";
let name = "Bob";  // Uncaught SyntaxError: Identifier 'name' has already been declared

 

---

• 재할당 가능

let number = 1;
number = 2;  // 재할당 가능
console.log(number); // 2

 

---

• 블록-스코프(block-scoped)
  • {} 기준으로 변수의 유효 범위를 제한하는 스코핑 규칙

if (true) {
  let blockScoped = "Inside block";
}
console.log(blockScoped); // Uncaught ReferenceError: blockScoped is not defined

 

---

• 호이스팅(hoisting)
  • let로 선언된 변수는 호이스팅 되지만, 초기화는 실제 선언 위치에서 이루어집니다.
  • 변수 선언 전에 해당 변수를 참조하면 ReferenceError가 발생합니다.

console.log(declaredLater); // Uncaught ReferenceError: declaredLater is not defined
let declaredLater = "Now it's defined";

 

 

➡️ const -  ES6

• 초기값 필수

const mustBeAssigned; // Uncaught SyntaxError: Missing initializer in const declaration

 

---

• 재선언 불가능 ⚠️

const name = "Alice";
const name = "Bob";  // Uncaught SyntaxError: Identifier 'name' has already been declared

 

---

• 재할당 불가능 ⚠️

const number = 1;
number = 2;  // Uncaught TypeError: Assignment to constant variable.

 

---

• 블록-스코프(block-scoped)
  • {} 기준으로 변수의 유효 범위를 제한하는 스코핑 규칙

if (true) {
  const blockScoped = "Inside block";
}
console.log(blockScoped); // Uncaught ReferenceError: blockScoped is not defined

 

---

• 호이스팅(hoisting)
  • const로 선언된 변수는 호이스팅 되지만, 초기화는 실제 선언 위치에서 이루어집니다.
  • 변수 선언 전에 해당 변수를 참조하면 ReferenceError가 발생합니다.

console.log(declaredLater); // Uncaught ReferenceError: Cannot access 'declaredLater' before initialization
const declaredLater = "Now it's defined";