[Javascript]자바스크립트 스코프 완벽 가이드: 기초부터 고급까지

자바스크립트를 다루는 데 있어서 '스코프'는 매우 중요한 개념입니다. 스코프를 이해하면 코드의 가독성을 높이고, 버그를 줄이는 데 큰 도움이 됩니다. 이번 글에서는 자바스크립트 스코프에 대해 기초부터 고급까지 체계적으로 알아보겠습니다.

≣ 목차

• 자바스크립트 스코프란❓
• 자바스크립트 스코프의 종류🗂️
• 변수 선언과 스코프📝
• 스코프 체인(Scope Chain)🔗
• 호이스팅(Hoisting)⬆️
• 스코프 관련 주의사항⚠️

---

01. 자바스크립트 스코프란❓

자바스크립트에서 스코프(scope)는 변수나 함수가 접근할 수 있는 유효 범위를 의미합니다. 이는 코드의 실행 컨텍스트와 밀접한 관련이 있으며, 스코프를 잘 이해해야 코드의 흐름을 정확히 파악할 수 있습니다. 자바스크립트에는 주로 전역 스코프와 지역 스코프 두 가지 유형의 스코프가 있습니다.

• 전역 스코프: 전역 스코프에 선언된 변수는 코드 어디에서나 접근할 수 있습니다. 전역 변수는 함수 밖이나 코드 블록 밖에서 선언된 변수입니다.
• 지역 스코프: 지역 스코프에 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다. 함수 내에서 선언된 변수는 지역 변수입니다.

---

02. 자바스크립트 스코프의 종류🗂️

1. 전역 스코프 (Global Scope)

• 전역 스코프에 선언된 변수와 함수는 코드 어디서든 접근할 수 있습니다.
• 전역 스코프에 변수를 선언할 때는 var, let, const를 사용할 수 있지만, var는 전역 객체의 속성으로 추가되고, let과 const는 전역 객체의 속성이 되지 않습니다.

var globalVar = "I'm a global variable";
let globalLet = "I'm also global";
const globalConst = "I'm a constant global variable";

---

2. 함수 스코프 (Function Scope)

• 함수 스코프에 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다.
• var로 선언된 변수는 함수 레벨 스코프를 가지며, 함수 내부 어디서든 접근 가능합니다.

function myFunction() {
    var functionVar = "I'm inside a function";
    console.log(functionVar); // 접근 가능
}
console.log(functionVar); // 접근 불가, 오류 발생

---

3. 블록 스코프 (Block Scope)

• 블록 스코프는 {}로 감싸진 블록 내에서만 변수가 접근 가능하도록 합니다.
• let과 const는 블록 레벨 스코프를 가지며, 블록 내부에서만 접근할 수 있습니다.

if (true) {
    let blockLet = "I'm inside a block";
    const blockConst = "I'm also inside a block";
    console.log(blockLet); // 접근 가능
    console.log(blockConst); // 접근 가능
}
console.log(blockLet); // 접근 불가, 오류 발생
console.log(blockConst); // 접근 불가, 오류 발생

---

4. 모듈 스코프 (Module Scope)

• 자바스크립트 ES6부터 모듈이 도입되면서 모듈 스코프가 생겼습니다.
• 모듈 내에서 선언된 변수와 함수는 모듈 내부에서만 접근 가능하며, 다른 모듈에서 접근하려면 명시적으로 export와 import를 사용해야 합니다.

// module.js
export const moduleVar = "I'm in a module";

// main.js
import { moduleVar } from './module.js';
console.log(moduleVar); // "I'm in a module"

---

03. 변수 선언과 스코프📝

자바스크립트에서 변수 선언과 스코프는 변수의 생명 주기와 접근 가능성을 정의합니다. 변수 선언에는 var, let, const 키워드가 사용되며, 각각은 서로 다른 스코프 규칙을 따릅니다. 이를 이해하기 위해 각 키워드와 스코프의 관계를 자세히 살펴보겠습니다.
Javascript var, let, const 변수에 관한 내용은 아래 포스팅을 참고해 주세요😁

[Javascript]자바스크립트 변수 이해하기: var, let, const 차이점

var

var 키워드는 함수 스코프를 따릅니다. 즉, 함수 내에서 선언된 변수는 함수 내 어디서나 접근할 수 있으며, 블록 스코프는 무시됩니다.

function varTest() {
    if (true) {
        var x = 1;
    }
    console.log(x);  // 1 (var는 함수 스코프를 따르므로 함수 내부 어디서든 접근 가능)
}

varTest();

위 예시에서 x는 if 블록 내에서 선언되었지만, 함수 스코프를 따르므로 함수 내 어디서든 접근할 수 있습니다.

---

let

let 키워드는 블록 스코프를 따릅니다. 즉, 중괄호 {}로 감싸진 블록 내에서만 유효합니다.

function letTest() {
    if (true) {
        let y = 1;
        console.log(y);  // 1 (let은 블록 스코프를 따름)
    }
    console.log(y);  // ReferenceError: y is not defined (블록 외부에서는 접근 불가)
}

letTest();

위 예시에서 y는 if 블록 내에서만 유효하며, 블록 외부에서는 접근할 수 없습니다.

---

const

const 키워드는 let과 마찬가지로 블록 스코프를 따릅니다. 또한, const로 선언된 변수는 선언 시 값을 할당해야 하며, 이후에 값을 변경할 수 없습니다.

function constTest() {
    if (true) {
        const z = 1;
        console.log(z);  // 1 (const는 블록 스코프를 따름)
    }
    console.log(z);  // ReferenceError: z is not defined (블록 외부에서는 접근 불가)
}

constTest();

위 예시에서 z는 if 블록 내에서만 유효하며, 블록 외부에서는 접근할 수 없습니다. 또한, const는 값을 재할당할 수 없습니다.

---

04. 스코프 체인(Scope Chain)🔗

스코프 체인(Scope Chain)은 자바스크립트의 변수 접근 규칙을 이해하는 데 핵심적인 개념입니다. 이는 특정 스코프 내에서 변수를 찾지 못할 경우 외부 스코프로 범위를 확장하며 변수를 찾는 메커니즘을 설명합니다. 스코프 체인을 통해 자바스크립트는 변수를 검색하는 과정을 단계적으로 수행합니다.

스코프 체인의 구조

스코프 체인은 현재 스코프에서부터 시작하여 상위 스코프로 이동하며 변수를 검색합니다. 이 체인은 전역 스코프까지 이어지며, 전역 스코프에서도 변수를 찾지 못하면 ReferenceError를 발생시킵니다.

예시 코드

아래 예시를 통해 스코프 체인이 어떻게 작동하는지 설명하겠습니다.

var globalVar = "I am a global variable";

function outerFunction() {
    var outerVar = "I am an outer variable";
    
    function innerFunction() {
        var innerVar = "I am an inner variable";
        
        console.log(innerVar);   // "I am an inner variable"
        console.log(outerVar);   // "I am an outer variable"
        console.log(globalVar);  // "I am a global variable"
    }
    
    innerFunction();
}

outerFunction();

스코프 체인의 동작

1. innerFunction의 스코프:

• innerVar는 innerFunction의 지역 변수입니다. 따라서 바로 찾을 수 있습니다.
• outerVar는 innerFunction의 스코프에 없으므로, 한 단계 위의 스코프인 outerFunction에서 찾습니다.
• globalVar는 outerFunction에도 없으므로, 최상위 스코프인 전역 스코프에서 찾습니다.

2. outerFunction의 스코프:

• outerFunction 내에서는 outerVar를 바로 찾을 수 있습니다.
• 전역 변수 globalVar도 찾을 수 있습니다.
• 하지만 innerVar는 innerFunction 내부의 변수이므로 outerFunction에서는 접근할 수 없습니다.

---

스코프 체인의 시각적 표현

Global Scope
  - globalVar
    |
Outer Function Scope
  - outerVar
    |
Inner Function Scope
  - innerVar

---

함수 클로저와 스코프 체인

스코프 체인은 클로저와 밀접한 관련이 있습니다. 클로저는 함수가 선언될 때의 렉시컬 스코프(lexical scope)를 기억하고 이를 참조할 수 있는 기능입니다.

function makeFunction() {
    var name = "Mozilla";
    function displayName() {
        console.log(name);
    }
    return displayName;
}

var myFunc = makeFunction();
myFunc();  // "Mozilla"

makeFunction이 실행되고 나면 displayName이 반환됩니다. 반환된 함수는 여전히 makeFunction의 스코프 체인을 기억하고 있어 name 변수에 접근할 수 있습니다. 이는 클로저와 스코프 체인이 어떻게 상호작용하는지를 보여줍니다.

---

05. 호이스팅(Hoisting)⬆️

호이스팅(Hoisting)은 자바스크립트에서 변수와 함수 선언이 그 범위의 맨 위로 끌어올려지는 동작을 의미합니다. 즉, 코드가 실제로 실행되기 전에 변수와 함수 선언이 해당 범위의 맨 위로 이동된 것처럼 동작합니다. 그러나 변수 할당은 호이스팅 되지 않으며, 초기화는 여전히 코드의 원래 위치에서 이루어집니다.

변수 호이스팅

자바스크립트는 var 키워드를 사용하여 선언된 변수를 스코프의 최상단으로 호이스팅합니다. 그러나 변수의 초기화는 코드 실행 흐름에서 변수 선언 이후에 이루어집니다.

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

위 예시는 다음과 같이 해석될 수 있습니다.

var x;           // 변수 선언이 호이스팅됨
console.log(x);  // 초기화되지 않았으므로 undefined 출력
x = 5;           // 변수에 값 할당
console.log(x);  // 5 출력

---

let과 const의 호이스팅

let과 const 키워드로 선언된 변수도 호이스팅되지만, 이들은 "일시적 사각지대(Temporal Dead Zone, TDZ)"에 놓이게 되어 초기화 전에 접근하려고 하면 ReferenceError가 발생합니다.

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

위 예시는 다음과 같이 해석될 수 있습니다.

let y;           // 변수 선언이 호이스팅됨, TDZ에 들어감
console.log(y);  // TDZ에 있으므로 ReferenceError 발생
y = 10;          // TDZ를 벗어나며 변수에 값 할당
console.log(y);  // 10 출력

const도 마찬가지입니다.

console.log(z);  // ReferenceError: z is not defined
const z = 15;
console.log(z);  // 15

---

함수 호이스팅

함수 선언도 호이스팅됩니다. 함수 전체가 끌어올려지므로 함수가 선언되기 전에 호출할 수 있습니다.

sayHello();  // "Hello, World!" 출력

function sayHello() {
    console.log("Hello, World!");
}

위 예시는 다음과 같이 해석될 수 있습니다.

function sayHello() {  // 함수 선언이 호이스팅됨
    console.log("Hello, World!");
}

sayHello();  // "Hello, World!" 출력

그러나 함수 표현식은 호이스팅되지 않습니다. 변수 호이스팅 규칙에 따라 처리됩니다.

sayGoodbye();  // TypeError: sayGoodbye is not a function

var sayGoodbye = function() {
    console.log("Goodbye, World!");
};

위 예시는 다음과 같이 해석될 수 있습니다.

var sayGoodbye;       // 변수 선언이 호이스팅됨
sayGoodbye();         // 초기화되지 않았으므로 TypeError 발생
sayGoodbye = function() {
    console.log("Goodbye, World!");
};

---

06. 스코프 관련 주의사항⚠️

자바스크립트의 스코프와 관련된 주의사항을 이해하면 코드 작성과 디버깅이 훨씬 수월해집니다. 스코프와 관련된 몇 가지 주요 주의사항을 살펴보겠습니다.

1. 변수 선언과 초기화의 분리 (var)

var 키워드를 사용할 때는 변수 선언과 초기화가 분리되어 있다는 점에 주의해야 합니다. 선언은 스코프의 최상단으로 호이스팅 되지만, 초기화는 실제 코드 위치에서 이루어집니다.

console.log(a); // undefined (호이스팅으로 인해 선언된 상태)
var a = 10;
console.log(a); // 10

위 코드는 다음과 같이 해석될 수 있습니다.

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

---

2. 블록 스코프 (let, const)

let과 const는 블록 스코프를 따르므로, 이를 사용할 때는 블록 범위를 벗어나지 않도록 주의해야 합니다.

if (true) {
    let b = 20;
    const c = 30;
}
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined

---

3. 중복 선언 피하기

let과 const는 같은 스코프 내에서 동일한 변수명을 중복 선언할 수 없습니다.

let d = 40;
let d = 50; // SyntaxError: Identifier 'd' has already been declared

const e = 60;
const e = 70; // SyntaxError: Identifier 'e' has already been declared

---

4. const 사용 시 초기화 필수

const 키워드는 선언과 동시에 초기화를 해야 하며, 이후에 값을 변경할 수 없습니다.

const f; // SyntaxError: Missing initializer in const declaration
f = 80;

const g = 90;
g = 100; // TypeError: Assignment to constant variable.

---

5. 함수 스코프와 블록 스코프

함수 스코프와 블록 스코프의 차이를 이해하고 있어야 합니다. var는 함수 스코프를 따르고, let과 const는 블록 스코프를 따릅니다.

function scopeTest() {
    if (true) {
        var h = 110;
        let i = 120;
    }
    console.log(h); // 110 (var는 함수 스코프를 따름)
    console.log(i); // ReferenceError: i is not defined (let은 블록 스코프를 따름)
}
scopeTest();

---

6. 클로저와 스코프

클로저를 사용할 때 외부 함수의 변수에 접근할 수 있다는 점을 주의해야 합니다. 이는 의도하지 않은 동작을 초래할 수 있습니다.

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 1 (각 호출은 별도의 클로저를 만듦)

---

7. IIFE (즉시 실행 함수 표현식) 사용

IIFE는 변수를 블록 스코프 안에 가두어 전역 네임스페이스 오염을 방지하는 데 유용합니다.

(function() {
    let j = 130;
    console.log(j); // 130
})();
console.log(j); // ReferenceError: j is not defined

---

8. 함수 내부에서의 var

함수 내부에서 var를 사용할 때는 함수 전체에 걸쳐 변수가 유효하다는 점에 주의해야 합니다. 이는 의도치 않은 변수 충돌을 초래할 수 있습니다.

function example() {
    for (var k = 0; k < 5; k++) {
        // do something
    }
    console.log(k); // 5 (루프가 끝난 후에도 k는 유효함)
}
example();

---

9. 전역 객체와 암시적 전역

변수를 선언하지 않고 사용하면 전역 객체의 프로퍼티로 암시적 선언이 됩니다. 이를 피하기 위해 항상 var, let, const를 사용해 변수를 선언해야 합니다.

function implicitGlobal() {
    l = 140; // 암시적 전역 변수
}

implicitGlobal();
console.log(l); // 140 (전역 변수로 생성됨)