[JavaScript] 자바스크립트 지역 변수 전역 변수

---

[Javascript] 자바스크립트 지역 변수 전역 변수

---

지역 변수 (local variable)

지역 변수란 함수 내에서 선언된 변수를 뜻합니다.

이러한 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 삭제됩니다.

함수의 매개 변수 또한 함수 내에서 정의되는 지역 변수처럼 동작합니다.

function localNum() {

    var num = 10; // 지역 변수 num에 숫자 10을 대입함.

    document.write("함수 내부에서 변수 num의 타입은 " + typeof num + "입니다.<br>"); // number

}

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

document.write("함수의 호출이 끝난 뒤 변수 num의 타입은 " + typeof num + "입니다."); // undefined

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

 

 

함수 내부에서 선언한 변수 num 값을 function localNum() { } 종료 후에 document.write 에서 호출하였지만 변수는 삭제되어 undefined 값으로 반환된 것을 확인할 수 있습니다.

자바스크립트에서는 선언되지 않은 변수를 사용 또는 접고하고자 하면 오류가 발생됩니다.

하지만 선언되지 않은 변수에 대한 typeof 연산자의 결과값은 undefined 값을 반환합니다.

반응형

---

전역 변수(global variable)

전역 변수란 함수의 외부에서 선언된 변수를 뜻합니다.

이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 프로그램이 종료되어야만 메모리에서 삭제됩니다.

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

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

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

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

위의 겺과 값처럼 전역 변수는 함수 외부뿐만 아니라 내부에서도 접근하여 사용할 수 있습니다.

 

자바스크립트에서 지역 변수를 선언할 때에는 반드시 var 키워드를 사용하여 선언해야 합니다.

함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면 해당 변수는 지역 변수가 아닌 전역 변수로 선언됩니다.

function globalNum() {
    num = 10; // var 키워드를 사용하지 않고 변수 num을 선언함.
    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10
}

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

 

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

 

또한, 전역 변수와 같은 이름의 지역 변수를 선언하면, 해당 블록에서는 해당 이름으로 지역 변수만을 호출합니다.

즉 지역 변수가 전역 변수보다 우선 순위가 높습니다.

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

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

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

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

 

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

windows.num

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

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

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

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

 

출처: TCPschool.com