지역변수/전역변수

 

지역변수/전역변수

변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역변수'로 나누어집니다.

'전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 '지역변수'는 함수 블록{} 내에서만 사용할 수 있습니다.

전역 변수와 지역 변수 선언 위치

전역 변수	지역 변수
var 변수; function 함수(){ }	function 함수(){      var 변수; }

예시3-14

 // 함수블록안에 kor 변수는 전역변수인데 func함수를 호출 하게 되면 kor 변수 값이 90에서 100으로 바뀐다.
var kor = 90;

function func(){
    kor = 100; // 전역변수
    document.write(kor); // 100
}
func();
document.write(kor); // 100

결과 확인하기

100 100

예시3-15

//함수 블록안에 출력문을 적는다면 지역변수 100이 출력되고, 함수밖에 출력문을 적는다면 전역변수 90이 출력된다.
var kor = 90;

function func(){
    var kor = 100; // 지역변수
    document.write(kor); // 100
}
func();
document.write(kor); // 90

결과 확인하기

100 90

예시3-15-1

// 출력문을 함수 안에 적는다면 지역변수 100이 나오지만,
// 출력문을 함수 밖에 적는다면 전역변수가 없기 때문에 에러가나온다.
function func(){
    var kor = 100;
    document.write(kor); //100
}
func();
document.write(kor); <= 에러가나온다

결과 확인하기

100

이렇게 블록{}에 의해 변수의 범위가 달라지는 것을 변수의 scope라고 하는데, 전역 변수는 블록에서 사용할 수 있기 때문에 자칫 동일한 이름으로 덮어 써질수 있는 문제가 있습니다. 그러므로 전역 변수보다는 지역 변수가 안전하다.

함수 레벨 스코프와 블록 레벨 스코프

var는 함수 블록{}에서만 지역 변수가 존재하며 블록{}이나 제어문 블록{}에서는 지역 변수가 존재하지 않는다. ES6에서 새로 추가된 let 과 const는 블록{}이나 제어문 블록{}에서도 지역 변수를 선언 할 수 있다.

예시3-16-1

var num = 10;
{
    var num = 20; //num은 전역 변수입니다.
    document.write(num); //20
}
document.write(num); //20

예시3-16-2

var num = 10;
{
    var num = 20; //num은 지역 변수입니다.
    document.write(num); //20
}
document.write(num); //10

예시3-16-3

var num = 10;
{
    var num = 20; //num은 지역 변수입니다.
    document.write(num); //20
}
document.write(num); //10

블록{}안에서 let과 const로 선언된 변수는 예시 3-16처럼 블록{}의 지역 변수로 인식합니다. *var과는 다르다*

예시3-17-1

var num = 10;
if (num === 10) {
    var sum = 20; // 전역 변수
}
document.write(sum); // 20

예시3-17-2

let num = 10;
if (num === 10) {
    var sum = 20; // 지역 변수
}
document.write(sum); // 에러

var는 제어문 블록{}에서 전역 변수만 존재하기 때문에 예시 3-17과 같이 sum 변수를 블록{} 밖에서도 호출 할 수 있지만, 제어문 블록{} 안에서 let으로 선언된 변수는 지역 변수이기 때문에 제어문 블록{} 밖에서 호출할 수 없다.

예제 3-29

<script>
    //함수의 전역변수
    var sum1 = 10;
    function add1() {
        sum1 = 20;
    }
    add1();
    document.write('전역' + sum1);        //답 전역20
    //함수의 지역변수
    var sum2 = 30;
    function add2() {
        var sum2 = 40;
    document.write('지역' + sum2);
    }
    add2();
    document.write('전역' + sum2)        //답 지역40 전역30
    //블록의 지역변수
    var num1 = 50;
    if (num1 === 50) {
        var num1 = 60;
    }
    document.write('전역' + num1);
    let num2 = 70;
    if (num2 === 70) {
        let num2 = 80;
        document.write('지역' + num2);
    }
    document.write('전역' + num2);          //답 전역60 지역80 전역70
</script>

결과 확인하기

전역20
지역40전역30
전역60지역80전역70

 

예제3-29 실행모습