자바스크립트 변수의 범위, 스코프 이해하기

스코프(scope)를 직역하면, "범위" 또는 "영역"을 뜻합니다. 프로그래밍에서 스코프는 주로 "변수, 함수, 객체가 선언된 위치에 따라 접근할 수 있는 범위"를 뜻합니다. 쉽게 말하면 "적용 범위"를 의미합니다.

프로그래밍에서범위를 구분하는 방식은 다양합니다. 대부분 중괄호 { }나 들여쓰기로 코드 블록을 정의하고 스코프를 범위를 구분합니다. 그렇다면 자바스크립트(JavaScript)는 어떤 방식으로 스코프를 정의할까요?

자바스크립트의 스코프(Scope)

자바스크립트의 스코프 유형으로는 전역 스코프, 함수 스코프, 블록 스코프가 있습니다.

기본적으로 자바스크립트는 함수 스코프를 지원하지만, 2015년 이후 ES6로 도입된 let과 const는 블록 스코프를 갖습니다.

1. 전역 스코프 (Global Scope)

전역 스코프는 코드의 최상위 레벨에서 선언된 변수나 함수가 어플리케이션의 어느 곳에서나 접근이 가능합니다.

const name = "Jang";

function printName() {
    console.log(name); // Jang
}

if (true) {
    console.log(name); // Jang
}

console.log(name); // Jang

위 코드에서 name은 코드의 최상위에서 선언된 변수이기 때문에, 함수나 if 문의 내부와 외부 모두에서 변수에 접근할 수 있습니다.

2. 함수 스코프 (Local Scope)

함수 스코프는 특정 함수에서 선언된 변수를 함수의 안에서만 사용할 수 있는 범위입니다.

function calculateSalary() {
    var name = 'jangdu';
    var age = 8;

    console.log(name, age); // jangdu 8
}

console.log(name, age); // ERROR

예시 코드에서 두 변수는 선언된 함수 내부에서는 접근이 가능하지만, 함수의 밖에서 변수에 접근하면 코드에 에러가 발생하며 실행할 수 없게 됩니다.

3. 블록 스코프 (Block Scope)

블록 스코프는 중괄호{} 안에서만 유효한 범위입니다. 블록 안에서 let과 const로 변수를 선언하면 선언된 블록의 내부에서만 접근이 가능합니다.

if (true) {
    let department = "개발팀";
    const position = "프론트엔드";

    console.log(department); // "개발팀"

    console.log(position); // "프론트엔드"
}

console.log(department); // ERROR

console.log(position); // ERROR

위 코드에서 department와 position은 if문 안에서 선언된 변수로, if문의 코드블럭 내부에서만 변수에 접근이 합니다. 코드블럭의 외부에서 변수에 접근하면, 에러가 발생하며 코드를 실행할 수 없습니다.

스코프 체이닝 (Scope Chaining)

스코프 체이닝(Scope Chaining)은 자바스크립트에서 변수를 찾는 과정을 뜻합니다.

예를들어 food라는 변수가 3번 선언되고 그 변수에 접근한 경우, 해당 변수가 어디서 선언된 변수인지 확인하기 위해서 찾아가는 과정은 다음과 같습니다.

let food = "김치"; // 전역 변수

function outerFunction() {
    let food = "피자";  // 지역 변수

    function innerFunction() {
        let food = "과자";  // 지역 변수

        console.log(food); // 과자
    }

    console.log(food); // 피자

    innerFunction();
}

outerFunction();

자바스크립트는 접근가능한 스코프 중, 가장 가까운 변수부터 점점 바깥으로 찾아갑니다. 따라서 innerFunction의 안에서 사용되는 food는 가장 가까운 변수의 값인 "과자"가 출력되고, outerFunction의 경우에는 "피자"가 출력됩니다.

스코프의 특성을 잘 이해하고 활용하면 코드에서 발생할 수 있는 변수의 이름 충돌을 방지하고, 코드의 안정성을 높일 수 있습니다. 또한 문제가 발생했을 때 디버깅이 더욱 용이해지며, 메모리도 더욱 효율적으로 관리할 수 있습니다.