[javascript] 전역 변수와 지역 변수의 값 변경 시 컴파일러의 동작 방식

자바스크립트에서 코드를 작성할 때 전역 변수와 지역 변수를 사용할 수 있습니다. 전역 변수는 어디서든 접근 가능한 변수이며, 지역 변수는 특정 함수나 블록 안에서만 접근할 수 있습니다. 이러한 변수들의 값 변경 시, 컴파일러는 어떻게 동작할까요? 이에 대해 알아보겠습니다.

전역 변수의 값 변경

var globalVariable = 10;

function updateGlobalVariable() {
    globalVariable = 20;
}

console.log(globalVariable); // 10
updateGlobalVariable();
console.log(globalVariable); // 20

위의 예제에서 globalVariable은 전역 변수로 선언되었습니다. 처음에는 10의 값을 가지고 있습니다. updateGlobalVariable 함수 내에서 전역 변수 globalVariable의 값을 20으로 변경했습니다. 이후 console.log를 통해 변수의 값을 출력하면 20을 볼 수 있습니다. 여기서 주의할 점은 함수 내에서 전역 변수를 변경하더라도 함수 외부에서도 그 값이 변경된다는 것입니다.

지역 변수의 값 변경

function updateLocalVariable() {
    var localVariable = 10;
    localVariable = 20;
    console.log(localVariable); // 20
}

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

위의 예제에서 updateLocalVariable 함수 내에서 localVariable이라는 지역 변수를 선언하고 값을 변경했습니다. 함수 내에서는 정상적으로 20이 출력되지만, 함수 외부에서는 localVariable이 정의되지 않았다는 ReferenceError가 발생합니다. 이는 지역 변수가 함수 내에서만 유효하기 때문입니다.

동일한 변수명의 전역 변수와 지역 변수

var x = 10;

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

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

위의 예제에서 전역 변수 x와 지역 변수 x가 동시에 존재합니다. 함수 내에서 선언된 지역 변수 값은 함수 내부에서만 유효하며, 함수 외부에서는 전역 변수 값이 출력됩니다. 따라서 함수 내에서 x 값을 변경해도 전역 변수 x에는 영향을 끼치지 않습니다.

결론

전역 변수와 지역 변수의 값 변경 시, 컴파일러는 각각의 범위에서 변수 값을 처리합니다. 전역 변수 값 변경은 해당 변수의 범위를 가진 스코프에서 모두 영향을 받으며, 지역 변수 값 변경은 해당 함수나 블록 내에서만 유효합니다. 상황에 맞게 변수의 범위와 유효성을 고려하여 변수를 사용해야 한다는 점을 명심해야 합니다.


참고 자료: