[TIL] 자바스크립트(JavaScript) 기초 개념 - 변수, 블록 스코프, 함수 스코프, 호이스팅, 일시적 사각지대

TIL은 "Today I Learned"의 약자입니다. "오늘 내가 배운 것"이라는 뜻입니다. 새롭게 알게 된 흥미로운 사실, 정보, 또는 지식을 잊지 않기 위해 기록으로 남깁니다.  

 

학습 날짜 : 2024년 8월 27일 (화) 

---

0 학습 목표

• 자바스크립트 기초 개념 중 '변수'에 대해서 이해한다. 
  
  

1. 변수를 선언하는 방법 3가지 

자바스크립트에서는 주로 세 가지 방법으로 변수를 선언할 수 있습니다. let, const, 그리고 var입니다.

 

1. let:

• 재할당이 가능한 변수를 선언할 때 사용합니다.
• 블록 스코프를 가집니다.

let age = 25;
console.log(age); // 출력: 25

age = 26; // 재할당 가능
console.log(age); // 출력: 26

let age = 27; // 오류: 같은 스코프 내에서 재선언 불가능

 

 

2. const:

• 상수를 선언할 때 사용합니다. 한 번 할당하면 재할당할 수 없습니다.
• 블록 스코프를 가집니다.

const PI = 3.14159;
console.log(PI); // 출력: 3.14159

PI = 3.14; // 오류: const로 선언된 변수는 재할당 불가능

const PI = 3.14; // 오류: 같은 스코프 내에서 재선언 불가능

 

 

3. var:

• 옛날 방식의 변수 선언 방법입니다. 현재는 let과 const를 사용하는 것이 권장됩니다.
• 함수 스코프를 가집니다.
• 호이스팅(hoisting)이 발생합니다.

var name = "John";
console.log(name); // 출력: John

var name = "Jane"; // var는 재선언 가능
console.log(name); // 출력: Jane

// 호이스팅 예제
console.log(x); // 출력: undefined (오류가 발생하지 않음)
var x = 5;

 

2. 변수 선언 시 주의사항:

1. let과 const는 블록 스코프를 가지므로, 선언된 블록 내에서만 접근 가능합니다.
2. const로 선언된 객체나 배열의 내부 값은 변경할 수 있습니다. 변경할 수 없는 것은 변수 자체에 대한 재할당입니다.
3. 가능한 var 대신 let과 const를 사용하는 것이 좋습니다. 이는 더 예측 가능한 코드를 작성하는 데 도움이 됩니다.

 

3. 블록 스코프와 함수 스코프에 대하여

두 가지 스코프는 변수의 접근성과 생명주기를 결정하는 중요한 개념입니다. 

 

1. 블록 스코프 (Block Scope):

• 중괄호 {} 로 둘러싸인 영역을 블록이라고 합니다.
• let과 const로 선언된 변수는 블록 스코프를 가집니다.
• 변수는 선언된 블록 내에서만 접근 가능하며, 블록 밖에서는 접근할 수 없습니다. 

{
    let x = 10;
    const y = 20;
    console.log(x); // 출력: 10
    console.log(y); // 출력: 20
}
console.log(x); // 오류: x is not defined
console.log(y); // 오류: y is not defined

if (true) {
    let z = 30;
    console.log(z); // 출력: 30
}
console.log(z); // 오류: z is not defined

 

2. 함수 스코프 (Function Scope):

• 함수 내에서 선언된 변수는 해당 함수 내에서만 접근 가능합니다.
• var로 선언된 변수는 함수 스코프를 가집니다.
• 함수 스코프는 블록 스코프보다 더 넓은 범위를 가집니다. 

function exampleFunction() {
    var a = 1;
    let b = 2;
    if (true) {
        var c = 3; // 함수 스코프
        let d = 4; // 블록 스코프
        console.log(a); // 출력: 1
        console.log(b); // 출력: 2
    }
    console.log(a); // 출력: 1
    console.log(b); // 출력: 2
    console.log(c); // 출력: 3
    console.log(d); // 오류: d is not defined
}

exampleFunction();
console.log(a); // 오류: a is not defined

 

3. 주요 차이점:

1. 범위: 블록 스코프는 가장 가까운 중괄호 쌍으로 제한되지만, 함수 스코프는 전체 함수 내에서 유효합니다.
2. 변수 선언 키워드: let과 const는 블록 스코프를, var는 함수 스코프를 가집니다.
3. 호이스팅: var로 선언된 변수는 함수의 최상단으로 호이스팅되지만, let과 const는 호이스팅되지 않습니다(정확히는, 일시적 사각지대(TDZ)에 있게 됩니다).
4. 재선언: 같은 스코프 내에서 var는 재선언이 가능하지만, let과 const는 불가능합니다.

블록 스코프를 사용하면 변수의 생명주기를 더 정확하게 제어할 수 있어 예기치 않은 버그를 줄일 수 있습니다. 이 때문에 현대 자바스크립트에서는 var 대신 let과 const를 사용하는 것이 권장됩니다.

 

 

4. 호이스팅이란? 

호이스팅(Hoisting)은 자바스크립트의 중요한 동작 방식 중 하나입니다.

• 변수와 함수 선언이 그들이 속한 스코프의 최상단으로 "끌어올려지는" 것처럼 동작하는 자바스크립트의 메커니즘입니다.
• 코드가 실행되기 전에 자바스크립트 엔진이 먼저 전체 코드를 훑어보며 변수와 함수 선언을 메모리에 저장하는 과정을 의미합니다. 

조금 더 쉽게 설명하자면 

호이스팅은 자바스크립트가 동작하는 과정을 이해해야 합니다. 자바스크립트 엔진이 먼저 해석해야 하는 코드를 실행하기 전에 먼저 쭉 스캔하는데요.  책을 꼼꼼하게 읽어보기 전에 어떤 내용인지 빠르게 훑어보는거랑 비슷한 겁니다. 그때 어떤 변수가 있고 어떤 함수가 있는지 파악을 먼저 해두는 것을 의미합니다. 

 

호이스팅을 이해하면 코드의 동작을 더 잘 예측할 수 있고, 잠재적인 버그를 방지할 수 있습니다. 하지만 실제 코딩에서는 호이스팅에 의존하기보다는, 변수와 함수를 사용하기 전에 명확하게 선언하는 것이 좋은 습관입니다. 

 

더 자세히 알아보기

 

5. 일시적 사각지대란? 

일시적 사각지대(Temporal Dead Zone, 줄여서 TDZ)는 ES6(ECMAScript 2015)에서 let과 const가 도입되면서 생긴 개념입니다.

• 변수가 선언된 시점부터 초기화되기 전까지의 구간을 말합니다.
• 이 구간에서 변수에 접근하려고 하면 ReferenceError가 발생합니다

주요 특징:

1. let과 const에 적용: var와 달리 let과 const로 선언된 변수는 TDZ의 영향을 받습니다.
2. 블록 스코프:TDZ는 블록 스코프 내에서 발생합니다.
3. 호이스팅과의 관계: let과 const도 호이스팅되지만, TDZ로 인해 초기화 전 접근이 금지됩니다.

TDZ의 중요성:

1. 더 안전한 코드: 변수를 선언하기 전에 사용하는 실수를 방지합니다.
2. 명확한 스코프: 변수의 스코프를 더 명확하게 정의합니다.
3. 의도치 않은 동작 방지: var의 호이스팅으로 인한 혼란을 줄입니다.

모범 사례:

• 변수를 사용하기 전에 항상 선언과 초기화를 먼저 하세요.
• 가능한 var 대신 let과 const를 사용하세요.
• 복잡한 초기화 로직이 필요한 경우, 별도의 함수나 즉시 실행 함수(IIFE)를 사용하세요. 

 

TIL 한 마디

오늘은 변수 선언 하는 법을 배우다가 호이스팅과 TDZ까지 와버렸습니다. 다시 되돌아가야겠어요. 너무 멀리 온 듯.