변수(Variable)

• 자바스크립트에서 변수는 값을 저장하는 데 사용되는 식별자입니다. 변수를 사용하면 코드에서 값을 참조하고 조작할 수 있습니다. 변수는 선언 후 값을 할당할 수 있으며, 동일한 변수에 여러 번 값을 할당할 수 있습니다.
• 변수를 사용하기 전에 선언해야 합니다. 변수 선언은 var, let, const 키워드를 사용하여 수행됩니다.

// 변수 선언 및 초기화
let num;

// 변수 할당
num = 10;

// 변수 선언 및 할당
let str = "hello";

// 변수 선언과 할당
let name = "Alice";
let age = 30;
let isStudent = true;

// 변수 값 출력
console.log("이름:", name); // 출력: Alice
console.log("나이:", age); // 출력: 30
console.log("학생 여부:", isStudent); // 출력: true

// 변수 값 수정
age = 31;
isStudent = false;

// 수정된 변수 값 출력
console.log("수정된 나이:", age); // 출력: 31
console.log("수정된 학생 여부:", isStudent); // 출력: false

변수의 생성단계

변수의 생성단계는 자바스크립트엔진이 변수를 생성하는 과정을 의미합니다. 이 과정은 세 단계로 이루어집니다.

1. 선언(Declaration)

• JavaScript 엔진은 코드를 실행하기 전에 변수 선언을 스캔하고 해당 변수 이름을 메모리에 등록합니다. 이때 메모리에 할당되는 것은 변수의 식별자(이름)만이며, 값은 아직 할당되지 않습니다.

2. 초기화(Initialization)

• 선언 단계에서 메모리에 등록된 변수에 대해 JavaScript 엔진은 초기값을 할당합니다. 이 초기화 단계에서 변수는 undefined로 초기화됩니다.

3. 할당(Assignment)

• 마지막으로 코드에서 변수에 값을 할당할 때 이루어집니다. 변수에 할당된 값이 변경되는 경우에도 이 단계가 실행됩니다.

변수의 종류

var

• var는 자바스크립트에서 변수를 선언하는 데 사용되는 키워드입니다. ES5 이전에 사용되던 변수 선언 방식이며, 현재는 let과 const가 주로 사용됩니다.

함수 범위

• var 변수는 선언된 블록 범위를 벗어나 전역 범위에서 유효합니다. 즉, var 변수는 스크립트 내 어디서든 접근하고 변경할 수 있습니다.

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)


function exampleFunction() {
  if (true) {
    var varVariable = "var"; // 함수 스코프
    let letVariable = "let"; // 블록 스코프
  }

  console.log(varVariable); // 'var' 출력
  console.log(letVariable); // ReferenceError: letVariable is not defined
}

exampleFunction();

재선언 가능

• var 키워드를 사용하면 동일한 이름의 변수를 여러 번 선언할 수 있습니다. 마지막으로 선언된 값이 사용됩니다.

var num = 5;
var num = 10;
console.log(num); // 출력: 10

호이스팅(Hoisting)

• JavaScript에서 변수와 함수 선언이 스코프의 맨 위로 끌어올려지는 현상을 의미합니다. 이는 코드가 실행되기 전에 변수와 함수 선언이 메모리에 할당되는 것을 의미하며, 변수와 함수의 선언이 코드의 맨 위로 실제로 옮겨지지는 않습니다. 그저 그것들이 코드의 어디에서든 먼저 접근할 수 있도록 '올려놓는다'는 개념입니다.

변수 호이스팅(Variable Hoisting)

• 변수 선언은 스코프의 맨 위로 옮겨지지만, 변수의 할당은 그 자리에 남아 있습니다. 따라서 변수를 선언하기 전에 참조해도 에러가 발생하지 않습니다. 그러나 변수의 초기화(할당)가 호이스팅되지 않기 때문에 값은 undefined로 설정됩니다.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

console.log(a); // undefined
a = 1;
var a;
console.log(a); // 1

함수 호이스팅(Function Hoisting)

• 함수 선언은 해당 스코프의 맨 위로 옮겨지며, 함수 표현식은 호이스팅되지 않습니다. 함수 선언식은 함수의 내용을 포함한 전체 함수를 끌어올리지만, 함수 표현식은 변수만 끌어올립니다.

// 함수 선언문
console.log(myFunction()); // "Hello, World!" 출력

function myFunction() {
  return "Hello, World!";
}

// 함수 표현식
console.log(myFunction2()); // TypeError: myFunction2 is not a function

var myFunction2 = function () {
  return "Hello, World!";
};

위의 예에서 함수 선언문은 호이스팅되어 함수를 선언하기 전에 호출할 수 있습니다. 반면에 함수 표현식은 변수 호이스팅과 동일하게 동작하여, 함수를 선언하기 전에 호출하면 에러가 발생합니다.

let

• let 키워드는 자바스크립트에서 블록 스코프(Block Scope)의 지역 변수(특정 코드 블록 내에서만 유효한 변수) 를 선언하는 데 사용됩니다.

// 전역 범위(Global Scope)
let globalVar = "I'm a global variable";

// 블록 스코프(Block Scope) 내부의 지역 변수
if (true) {
  let localVar = "I'm a local variable inside a block";
  console.log(localVar); // 출력: I'm a local variable inside a block
}

// 블록 외부에서는 localVar에 접근할 수 없습니다.
console.log(localVar); // ReferenceError: localVar is not defined

블록 스코프(Block Scope)는 특정 코드 블록 내에서 변수의 유효 범위를 나타내는 개념이며, 지역 변수는 이러한 블록 스코프 내에서 선언된 변수를 의미합니다.

• var 키워드와 달리 let으로 선언된 변수는 선언된 블록 내에서만 유효하며, 블록 외부에서는 접근할 수 없습니다.

// var 키워드로 선언된 변수
if (true) {
  var localVarVar = "I'm a local variable declared with var";
}
console.log(localVarVar); // 출력: I'm a local variable declared with var

// 블록 외부에서도 var 키워드로 선언된 변수에 접근 가능
console.log(localVarVar); // 출력: I'm a local variable declared with var

// let 키워드로 선언된 변수
if (true) {
  let localVarLet = "I'm a local variable declared with let";
}
console.log(localVarLet); // ReferenceError: localVarLet is not defined

// 블록 외부에서는 let 키워드로 선언된 변수에 접근할 수 없음
console.log(localVarLet); // ReferenceError: localVarLet is not defined

• var 키워드로 선언된 localVarVar 변수는 해당 블록 내에서 선언되었지만, 블록 외부에서도 접근할 수 있습니다. 이는 var 키워드로 선언된 변수가 함수 스코프를 갖기 때문입니다. 따라서 if문 내에서 선언된 localVarVar 변수는 해당 if문 블록 내에서만 유효하지만, 외부에서도 접근할 수 있습니다.
• 반면에 let 키워드로 선언된 localVarLet 변수는 해당 블록 내에서만 유효하며, 블록 외부에서는 접근할 수 없습니다. 따라서 if문 내에서 선언된 localVarLet 변수는 해당 if문 블록 내에서만 유효하고, 외부에서는 접근할 수 없습니다. 이것이 let 키워드로 선언된 변수의 블록 스코프 특성입니다.

• let 변수는 재할당이 가능하지만, 동일한 블록 내에서는 동일한 변수 이름으로 재선언하면 오류가 발생합니다.

let message = "Hello, World!";
console.log(message); // "Hello, World!" 출력

message = "Hello, JavaScript!";
console.log(message); // "Hello, JavaScript!" 출력

let message = "Hello again!"; // SyntaxError: Identifier 'message' has already been declared

• let변수는 호이스팅에 영향을 받지 않는다는 것입니다. 사실, let 선언도 호이스팅되지만, let으로 선언된 변수를 초기화 전에 참조하려고 시도하면 Temporal Dead Zone(TDZ) 라는 개념에 의해 ReferenceError가 발생합니다.

console.log(myVar); // ReferenceError: myVar is not defined
let myVar = 10;

const

• const 변수는 자바스크립트에서 상수를 선언하는 데 사용됩니다. 상수는 값이 변경될 수 없는 변수입니다.

const PI = 3.14;

• const로 선언된 변수는 초기화된 값을 변경할 수 없습니다. 즉, 재할당이 금지됩니다.

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.

• const는 let과 마찬가지로 블록 스코프를 가집니다. 즉, 선언된 블록 스코프(Block Scope) 안에서만 접근이 가능하며 블록 밖에서는 접근할 수 없습니다.

if (true) {
  const MAX_VALUE = 100;
  console.log(MAX_VALUE); // 출력: 100
}
console.log(MAX_VALUE); // ReferenceError: MAX_VALUE is not defined

	재선언	재할당	변수의 스코프 (유효범위)	변수 호이스팅 (변수를 선언하기 전에 참조가능 여부)
var	o	o	함수 레벨 스코프	o
let	x	o	블록 레벨 스코프	x
const	x	x	블록 레벨 스코프	x

---

참고

• 변수와 함수 호이스팅(Hoisting)에 대해 알아보자