[TCP School/자바스크립트] 함수 - 변수의 유효 범위

자바스크립트에서 객체나 함수는 항상 변수(variable)이다.

변수의 유효 범위(scope)란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다.

 

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

1. 지역 변수

2. 전역 변수

---

지역 변수

지역 변수란 함수 내에 선언된 변수를 의미한다.

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

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

function localNum() {
    var num = 10;
    document.write('함수 내부에서 변수 num의 타입은 ' + typeof num + '입니다.<br>');  // number
}

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

---

전역 변수

전역 변수란 함수의 외부에서 선언된 변수를 의미한다.

이러한 전역 변수는 프로그램의 어느 영역에서든 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라진다.

var num = 10;

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

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

 

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

 

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

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

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

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

 

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

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

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

 

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

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

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

---

TCP School의 강의 내용을 정리한 포스트입니다.

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

코딩교육 티씨피스쿨