<Javascript> 지역변수와 전역변수의 차이

이번 포스팅은 자바스크립트에서 지역변수와 전역변수의 차이에 대해서 포스팅할 것이다.

 

>>> 변수의 유효 범위(variable scope)

 자바스크립트에서 객체나 함수는 모든 변수(variable)이다. 
 변수의 유효 범위 (scope) 란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다.

 자바스크립트에서 변수는 유효 범위에 따라 다음과 같이 구분된다.

1. 지역 변수(local variable)

2. 전역 변수(global variable)


A. 지역 변수(local variable)
먼저, 지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킨다.
 이러한 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다.
함수의 매개변수 또한 함수 내에서 정의되는 지역 변수처럼 동작한다.

function localNum() {
    const num = 10;         // 지역 변수 num에 숫자 10을 대입함.
    document.write("함수 내부에서 변수 num의 타입은 " + typeof num + "입니다.<br>"); // number
}


localNum();       // 함수 localNum()을 실행.
document.write("함수의 호출이 끝난 뒤 변수 num의 타입은 " + typeof num + "입니다."); // undefined
//함수가 종료 된 후 , num 변수를 불러왔기 때문에 undefined

B. 전역 변수(global variable)
전역 변수(global variable)란 함수의 외부에서 선언된 변수를 가리킨다.
이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라진다.

const num = 10; //전역변수 num을 선언함. 

function globalNum() {
    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10
    num = 20; // 전역 변수 num의 값을 함수 내부에서 변경함.
}

globalNum();  // 함수 globalNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 20

위의 예제처럼 전역 변수는 함수 외부뿐만 아니라 내부에서도 접근하여 변경할 수 있다. 

자바스크립트에서 지역 변수를 선언할 때에는 반드시 var 키워드를 사용하여 선언해야 한다.
함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면, 해당 변수는 지역 변수가 아닌 전역 변수로 선언된다.

var num = 10; // 전역 변수 num을 선언함.

function globalNum() {
    var num = 20; // 같은 이름의 지역 변수 num을 선언함.
    document.write("함수 내부에서 지역 변수 num의 값은 " + num + "입니다.<br>");
    document.write("함수 내부에서 전역 변수 num의 값은 " + window.num + "입니다.<br>");
}

globalNum(); // 함수 globalNum()을 호출함.


//   20
//   10

위의 예제와 같은 경우 해당 블록에서 전역 변수를 호출하려면, 전역 변수가 window 객체의 프로퍼티임을 명시하면 된다.