자바스크립트 변수의 지역 설정 방법

자바스크립트에서 변수를 선언할 때, 변수의 범위(scope)는 매우 중요한 개념입니다. 변수의 범위를 올바르게 설정하는 것은 코드의 가독성과 유지보수에 큰 영향을 미칩니다. 이번 블로그 포스트에서는 자바스크립트에서 변수의 지역(scope)을 설정하는 방법에 대해 알아보겠습니다.

var, let, const

자바스크립트에서 변수를 선언하는 키워드로는 var, let, const가 있습니다. 이들 키워드는 변수의 범위를 결정하며, 지역 변수를 선언하기 위해 사용됩니다.

function example() {
    var x = 10;
    console.log(x); // 10
}

example();
console.log(x); // ReferenceError: x is not defined
function example() {
    if (true) {
        let x = 10;
        console.log(x); // 10
    }
    console.log(x); // ReferenceError: x is not defined
}

example();
function example() {
    const x = 10;
    console.log(x); // 10
    x = 20; // TypeError: Assignment to constant variable.
}

example();

함수 내부의 지역 변수

함수 내부에서 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다. 함수 외부에서는 해당 변수에 접근할 수 없습니다. 이는 var, let, const 키워드로 지역 변수를 선언함으로써 가능합니다.

function example() {
    var x = 10;
    console.log(x); // 10
}

console.log(x); // ReferenceError: x is not defined

example();

블록 내부의 지역 변수

함수 내부뿐만 아니라, {}로 묶인 블록 내에서도 변수의 지역 범위(scope)를 설정할 수 있습니다. 이때 사용되는 키워드는 letconst입니다.

function example() {
    if (true) {
        let x = 10;
        console.log(x); // 10
    }
    console.log(x); // ReferenceError: x is not defined

    for (let i = 0; i < 3; i++) {
        console.log(i); // 0, 1, 2
    }
    console.log(i); // ReferenceError: i is not defined
}

example();

전역 변수와 지역 변수의 충돌

전역 변수(global variable)와 지역 변수(local variable)는 이름이 같을 경우 충돌할 수 있습니다. 이때에는 가장 가까운 스코프에 정의된 변수가 우선적으로 사용됩니다.

var x = 10;

function example() {
    var x = 20;
    console.log(x); // 20
}

example();
console.log(x); // 10

결론

변수의 지역 범위(scope)를 정확히 설정하는 것은 좋은 코드를 작성하는 데 있어서 중요한 요소입니다. 자바스크립트에서 var, let, const 키워드를 사용하여 함수 스코프와 블록 스코프를 활용하여 변수의 범위를 제한할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.