지역변수와 전역변수

지역변수 VS 전역변수

유효범위(scope)는 변수의 수명을 의미합니다.

다음의 코드를 살펴보겠습니다.

JavaScript

var scope = 'global';
function fnScope() {
    console.log(scope);
}
fnScope();

위 코드의 취지는 함수 안에 선언되어 있지 않고 함수 밖에 선언되어 있는 scope 라는 변수에 접근할 수 있다라는 것이 포인트입니다. 

함수 밖에서 변수를 선언하면 그 변수는 전역변수가 되고 전역변수는 애플리케이션 전역에서 접근이 가능한 변수입니다.

다시 말해서, 어떤 함수 안에서도 그 변수에 접근 할 수가 있다. 그렇기 때문에 fnScope 내에서 scope를 호츨했을 때 함수 밖에서 선언된 scope의 값인 global이 반환된 것입니다.

JavaScript

var scope = 'global';
function fnScope() {
    var scope = 'local';
    console.log('함수안 '+scope);
}
fnScope();
console.log('함수밖 ' + scope);

위 코드는 함수 안에서 scope를 조회 했을때 함수 내에서 선언한 지역변수인 local이 사용되었습니다.

하지만 함수 밖에서 scope를 호출했을때는 전역변수인 global이 사용된 것입니다.

이렇게 지역변수의 유효범위는 함수 안이고, 전역 변수 유효범위는 애플리케이션 전역인데, 같은 이름의 지역변수와 전역 변수가 동시에 정의되어 있다면 지역변수가 우선한다는 것을 알수 있습니다.

아래 예제를 보면 결과는 모두 local 입니다.

JavaScript

var scope = 'global';
function fnScope() {
    scope = 'local';
    console.log('함수안 '+scope);
}
fnScope();

console.log('함수밖 ' + scope);

함수밖에서도 scope의 값이 local인 이유는 무엇일까? 

그것은 함수 fnScope의 지역변수를 선언할 때 var를 사용하지않았기 때문입니다. 

var를 사용하지 않은 변수는 전역변수가 됩니다. 

따라서 전역변수의 값을 local로 변경하게 된 것이다.

그렇기 때문에 var를 쓰는 것과 쓰지 않는 것의 차이를 이해해야 합니다.

전역변수는 사용하지 않는 것이 좋고 여러가지 이유로 그 값이 변경될 여지가 많기 때문입니다.

예를 들어 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까?

그 해당함수는 의도치 않은 결과로 인해 함수의 동작이 달라지게 되고 버그의 원인이 됩니다.

또한 함수를 다른 애플리케이션에 이식하는데도 어려움을 초래하게 됩니다. 

함수의 핵심은 로직의 재활용이라는 점을 기억하고, 변수를 선언할 때는 꼭 var를 붙이는 것을 습관화하도록 합시다.

JavaScript

var scope = 'global';
function fnScope() {
    var scope = 'local';
    scope = 'local'; // 지역변수로 var scope가 이미 정의되었기 때문에 지역변수로 사용된다.
}
fnScope();
console.log(scope); // global;

Jaehee's WebClub