JavaScript #4 변수

변수

자바스크립트에서 변수를 선언할 때 사용하는 키워드에는 var, let, const가 있다.

각 키워드는 변수의 스코프와 재할당 가능성, 호이스팅 방식에서 차이가 있다.

 

var

함수 스코프

var로 선언된 변수는 함수 스코프를 가지며 함수 내에서 선언된 변수는 함수 전체에서 접근할 수 있다.

 

호이스팅

var로 선언된 변수는 호이스팅 되며 선언이 코드의 최상단으로 끌어올려지고 초기화는 선언한 위치에서 이루어진다.

 

변수 재선언 가능

같은 스코프 내에서 여러 번 선언할 수 있다. 이때 이전 값은 덮어씌워지게 된다.

 

전역 객체에 속성으로 추가

전역 스코프에서 선언된 var변수는 전역 객체의 속성이 된다. (global 또는 window)

 

console.log(x); // undefined (호이스팅)
var x = 5;
console.log(x); // 5

if (true) {
  var y = 10;
}
console.log(y); // 10 (블록 스코프가 아님)

function foo() {
  var z = 20;
  console.log(z); // 20
}
foo();
// console.log(z); // ReferenceError: z is not defined (함수 스코프)

 

let 

블록스코프

let으로 선언된 변수는 블록 스코프를 가지고 블록 내에서만 접근할 수 있다.

 

호이스팅

let으로 선언된 변수는 호이스팅 되지만 선언하기 전에는 사용할 수 없으며 이를 '일시적 사각지대(TDZ, Temporal Dead Zone)'이라고 한다.

 

변수 재선언 불가

같은 스코프 내에서 두 번 선언할 수 없다.

// console.log(a); // ReferenceError: Cannot access 'a' before initialization (TDZ)
let a = 5;
console.log(a); // 5

if (true) {
  let b = 10;
  console.log(b); // 10
}
// console.log(b); // ReferenceError: b is not defined (블록 스코프)

let c = 15;
// let c = 20; // SyntaxError: Identifier 'c' has already been declared (재선언 불가)

 

const

블록스코프

const로 선언된 변수는 블록 스코프를 가진다.

 

호이스팅

const로 선언된 변수는 호이스팅 되지만, 선언하기 전에는 사용할 수 없다. TDZ에 영향을 받는다.

 

변수 재선언 불가

같은 스코프 내에서 두 번 선언할 수 없다.

 

상수

const로 선언된 변수는 초기화 후에 값을 변경할 수 없지만 객체나 배열의 속성은 변경할 수 있다.

 

// console.log(d); // ReferenceError: Cannot access 'd' before initialization (TDZ)
const d = 5;
console.log(d); // 5

if (true) {
  const e = 10;
  console.log(e); // 10
}
// console.log(e); // ReferenceError: e is not defined (블록 스코프)

const f = 15;
// const f = 20; // SyntaxError: Identifier 'f' has already been declared (재선언 불가)

// f = 25; // TypeError: Assignment to constant variable. (값 변경 불가)

const obj = { key: "value" };
obj.key = "new value"; // 객체의 속성은 변경 가능
console.log(obj.key); // "new value"

const arr = [1, 2, 3];
arr.push(4); // 배열의 요소는 추가 가능
console.log(arr); // [1, 2, 3, 4]