Javascript var, let, const 알아보기

본 문서는 var, let, const 에 대한 내용을 제공해요.

JavaScript 의 let, const 키워드는 2015년에 발표된 ES6(ECMA2015) 에서 도입되었어요.

ES6 이전에는 var 키워드를 사용해 변수와 상수를 명확히 구분할 수 없었어요.

변수 선언 및 할당, 호이스팅, 스코프의 문제점을 개선하기 위해 let 과 const 가 추가되었어요.

변수

데이터를 저장할 수 있는 이름이 붙은 메모리 공간을 의미해요.

변수는 데이터를 보관하고, 필요할 때 가져와 사용할 수 있도록 도와줘요.

1️⃣ 변수와 메모리

자바스크립트에서 변수는 값의 종류에 따라 다르게 저장 돼요.

원시 타입 (Primitive Type) : 값 자체를 저장해요.

객체 타입 (Object Type) : 실제 데이터는 다른 메모리 공간에 저장되고, 변수는 메모리 주소를 저장해요.

2️⃣ 원시 타입 (Primitive Type)

원시 타입에는 string, number, boolean, null, undefined 등이 포함돼요.

📌 예제

let a = 10;
let b = a; 👉 b 에 a 의 '값'이 복사 됨
b = 20;

👉 a : 10
👉 b : 20

a 와 b 는 각각 독립적인 값을 저장하고 있어요.

b = a; 하면 a 의 값 10이 복사될 뿐, a 와 b는 서로 연결되지 않아요.

그래서 b = 20; 해도 a 에는 영향을 주지 않아요.

즉, 원시 타입 변수는 '값 자체'를 직접 저장해요.

3️⃣ 객체 타입 (Object Type)

객체 타입에는 배열, 함수, 객체 등이 포함돼요.

📌 예제

let obj1 = { value: 10 };
let obj2 = obj1;
obj2.value = 20;

👉 obj1 value : 20
👉 obj2 value : 20

obj1 에는 { value: 10 } 객체의 메모리 주소 (ex. 0012A) 가 저장돼요.

obj2 = obj1; 하면 메모리 주소만 복사돼요.

그래서 obj2.value = 20; 하면, obj1 과 obj2 가 같은 객체를 가리키므로 obj1 도 변경돼요.

obj1 과 obj2 는 0012A 의 메모리 주소를 가리키고 있는거에요.

즉, 객체 타입 변수는 메모리 주소(참조 값)를 저장하고, 실제 객체 데이터는 힙 메모리에 저장돼요.

💡 스택 메모리에는 변수 이름과 해당 객체의 메모리 주소(참조 값) 가 저장되고, 힙 메모리에는 객체의 실제 데이터가 저장돼요.

💡 힙 메모리는 크기가 크고 동적으로 관리되지만, 접근 속도는 스택보다 느려요.

4️⃣ 변수 선언과 할당

• 변수 선언은 var, let, const 키워드를 사용할 수 있어요.
• 변수 선언 과정은 선언 ➔ 초기화 ➔ 할당 순서로 진행돼요. ▪️ 선언 단계 : 변수를 선언하여 자바스크립트 엔진에 변수의 존재를 알려요.

▪️ 초기화 단계 : 변수를 위한 메모리 공간을 확보하고, var 의 경우 undefined 로 초기화가 돼요.

▪️ 할당 : 값을 변수에 저장하는 단계에요.

호이스팅

자바스크립트에서 변수와 함수 선언이 코드 상에서 실제로 작성된 위치와 관계없이 위로 끌어 올려지는 현상을 의미해요.

코드가 실행되기 전에 선언된 변수나 함수들을 메모리에 미리 등록하고, 해당 변수나 함수들을 참조할 수 있도록 해요.

1️⃣ var

var 로 선언한 변수는 함수나 코드 블록의 시작 부분으로 끌어 올려져요.

호이스팅 되었지만, 첫 번째 코드는 undefined 를 출력해요.

📌 예제

console.log(variable); 👉 undefined
var variable = "Hello, world";
console.log(variable); 👉 Hello, world

2️⃣ let, const

let 과 const 는 선언된 위치부터 사용 가능해요.

let 과 const 로 선언된 변수들은 호이스팅되지만, 선언 전에 참조하려고 하면 ReferenceError 가 발생해요.

이러한 현상을 TDZ ( Temporal Dead Zone ) 라고 해요.

TDZ 는 변수의 선언과 초기화 사이에 접근할 수 없는 구간을 의미하며, 이 구간에서는 변수를 사용할 수 없어요.

📌 예제

console.log(variable); 👉 ReferenceError 에러 발생
let variable = "Hello, world";

3️⃣ 함수 선언

함수 선언은 호이스팅이 되면서 전체 함수 정의가 끌어 올려져요.

그러나, 함수 표현식으로 선언된 함수는 변수처럼 동작하며, 변수와 마찬가지로 할당되기 전까지는 undefined 상태이기 때문에 호출하면 에러가 발생해요.

📌 예제

func(); 👉 에러 발생하지 않음

function func() {
    console.log("Hello, world");
}

func(); 👉 에러 발생

const func = function() {
    console.log("Hello, world");
};

스코프

스코프란 선언된 변수에 접근할 수 있는 유효한 범위를 의미해요.

스코프의 종류는 전역 스코프, 함수 스코프, 블록 스코프, 스코프 체인으로 분류돼요.

1️⃣ 전역 스코프

코드 최상위에 선언된 변수는 어디서든 접근 가능해요.

📌 예제

var globalVariable = "Hello, world";

function getVariable() {
    console.log(globalVariable); 👉 함수 안에서도 접근 가능
}

console.log(globalVariable); 👉 함수 밖에서도 접근 가능

2️⃣ 함수 스코프

함수 내에서 선언된 변수는 해당 함수 내에서만 유효해요.

📌 예제

function getVariable() {
    var funcVariable = "Hello, world";
    console.log(funcVariable); 👉 함수 내에서 사용 가능
}
console.log(funcVariable); 👉 함수 밖에서 접근 불가능 ( ReferenceError 발생 )

3️⃣ 블록 스코프

블록 {} ( 중괄호 ) 에서 선언된 변수는 해당 블록 내에서만 유효해요.

📌 예제

💡 let 과 const 로 선언된 변수는 블록 내에서만 접근 가능해요.
{
    let blockLetVariable = "Hello, world";
    let blockConstVariable = "Hello, world";
    console.log(blockLetVariable); 👉 블록 내에서 사용 가능
    console.log(blockConstVariable); 👉 블록 내에서 사용 가능
}
console.log(blockLetVariable) 👉 블록 밖에서 접근 불가능 ( ReferenceError 발생 )
console.log(blockConstVariable) 👉 블록 밖에서 접근 불가능 ( ReferenceError 발생 )

💡 var 은 블록 스코프를 가지지 않아요.  
즉, 블록 안에서 선언해도 블록 밖에서도 접근 가능해요.
{
    var blockVariable = "Hello, world";
}

console.log(blockVariable); 👉 블록 밖에서도 접근 가능

4️⃣ 스코프 체인

변수를 찾을 때 현재 스코프에서 변수를 찾고, 없으면 한 단게씩 상위 스코프를 탐색하는 과정을 의미해요.

쉽게 안에서 ➔ 밖으로 찾는다고 생각하면돼요.

현재 스코프 ➔ 부모 스코프 ➔ 전역 스코프 순으로 진행돼요.

📌 예제

const globalVariable = "전역 변수";

function outer() {
    const outerVariable = "outer 함수 변수";

    function inner() {
        const innerVariable = "inner 함수 변수야";

        console.log(innerVariable); 👉 가장 가까운 innerVariable
        console.log(outerVariable); 👉 inner 함수에는 없으므로 outer 함수에서 찾음
        console.log(globalVariable); 👉 inner 와 outer 함수에 없으므로 전역에서 찾음
    }

    inner();
}

outer();

💡 변수를 찾지 못하면 ReferenceError 발생해요.

var

var는 자바스크립트에서 오래된 변수 선언 방식이에요.

• 중복 선언과 재할당이 가능해요.
• 블록 스코프를 갖지 않아요.
• 호이스팅 시, undefined 로 초기화되기 때문에 선언 전에 접근해도 오류가 발생하지 않아요.

🔗 호이스팅

🔗 스코프

📌 예제

1️⃣ 중복 선언
var variable = "Hello, world !";
console.log(variable); 👉 Hello, world !

2️⃣ 재할당
variable = "Hello, world";
console.log(variable); 👉 Hello, world

var 는 블록 스코프를 무시하고, 중복 선언을 허용해 실수를 유발할 수 있어요.

또한, 호이스팅 값이 undefined 로 초기화되어 예기치 않은 결과를 초래할 수 있어요.

💡 코드의 예측 가능성과 안정성을 높이기 위해 필자는 let 과 const 사용을 추천해요.

let, const

• var 와 다르게 중복 선언이 불가능해요.
• let 은 재할당이 가능하지만, const 는 재할당이 불가능해요.
• 블록 스코프를 갖고 있어요.
• 호이스팅되지만, 초기화되지 않아요.

💡 let 은 값 변경이 필요한 경우, const 는 변하지 않는 경우 사용해요.

🔗 호이스팅

🔗 스코프

📌 예제

1️⃣ 중복 선언
const variable = "Hello, world";
let age = 20;

const variable = "Hello, world !"; 👉 Identifier 'variable' has already been declared 발생
let age = 28"; 👉 Identifier 'age' has already been declared 발생

2️⃣ 재할당
const variable = "Hello, world";
let age = 20;

age = 28;
console.log(age); 👉 28

variable = "Hello, world !" 👉 Assignment to constant variable error 발생