변수의 유효 범위

변수의 유효 범위(variable scope)

변수(variable) - 객체나 함수

변수의 유효 범위(scope) - 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합

 

변수(유효 범위에 따라 다음과 같이 구분)

1. 지역 변수(local variable)

2. 전역 변수(global variable)

---

지역 변수(local variable)

함수 내에서 선언된 변수

변수가 선언된 함수 내에서만 유효

함수가 종료되면 메모리에서 사라짐

함수의 매개변수 >> 함수 내에서 정의되는 지역 변수처럼 동작

 

예제

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

/*
결과 값
함수 내부에서 변수 num의 타입은 number입니다.
함수의 호출이 끝난 뒤 변수 num의 타입은 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

코딩연습 ▶

외부뿐만 아니라 내부에서도 접근하여 변경할 수 있음

 

지역 변수를 선언할 때에는 반드시 var 키워드를 사용하여 선언해야 함

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

예제

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

코딩연습 ▶

 

전역 변수와 같은 이름의 지역 변수를 선언하면, 해당 블록에서는 해당 이름으로 지역 변수만을 호출할 수 있음

예제

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

코딩연습 ▶

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

예제

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

코딩연습 ▶

 

window 객체에 대한 더 자세한 사항은 자바스크립트 window 객체 수업에서 확인

 

자바스크립트 window 객체 수업 확인 =>

---

참고

http://www.tcpschool.com/javascript/js_function_variableScope

코딩교육 티씨피스쿨