지역 변수와 전역 변수

728x90

지역변수 / 전역변수

변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나눠집니다.
'전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 '지역 변수'는 함수 블록{}내에서만 사용할 수 있습니다.

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

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

아래 예시에서 함수 블록{}안에 있는 kor 변수는 전역변수이다. 따라서 getScore()함수를 호출하게 되면 변수 값이 90에서 100으로 바뀐다.

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

결과보기

아래 예시에서 함수 블록{}안에 있는 kor 변수를 var로 정의, 함수 블록{}안에서 var로 선언된 함수는 지역 변수가 되며 밖의 전역 변수 kor과 다른 별도의 변수가 된다.
함수 블록{}안에 지역 변수는 반드시 var로 선언해 줘야하며 함수 블록{} 밖에서 사용할 수 없다.

   var kor = 90; 
    function getScore(){ 
        var kor = 100;      //지역변수
        console.log(kor);  //100 
    } 
    getScore(); 
    console.log(kor);     //100

결과보기

블록에 의해 변수 범위가 달라지는 예시

아래처럼 변수 범위가 달라지는 것을 변수의 scope라고 합니다. 전역 변수는 블록{}내외에서 사용 할 수 있기 때문레 자칫 동일한 이름으로 덫어질 수 있습니다. 이런 이유로 전역 변수보다는 지역 변수가 안전하다.

function getScore(){
var kor = 100; //지역변수
console.log(kor); //100
}
getScore();
console.log(kor); //에러

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

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

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

let num = 10;
{
let num = 20; //num은 지역 변수입니다.
console.log(num); //20
}
console.log(num); //10

const num = 10;
{
const num = 20; //num은 지역 변수입니다.
console.log(num); //20
}
console.log(num); //10

블록{} 안에서 let과 const로 선언한 변수는 위에 처럼 블록{}의 지역 변수로 인식합니다.

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

let num = 10;
if(num ===10){
let sum = 20; //전역 변수
}
console.log(sum); //20

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

   // 함수의 전역변수
    var sum1 = 10;
    function add1(){
        sum1 = 20;
    }
    add1();
    document.write('전역'+sum1);

    //함수의 지역변수
    var sum2 = 30;
    function add2() {
        var sum2 = 40;
        document.write('지역'+sum2);
    }
    add2();
    document.write('전역'+sum1);
    
    //함수의 지역변수
    var sum2 = 30;
    document.write('전역'+sum2);

    //블록의 지역변수 
    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);

결과보기

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

var, let, const 비교 정리

변수 범위	변수 선언	특징
함수 레벨 스코프	var	- 변수를 중복해서 선언할 수 있다. - 함수 블록{}내에서만 지역 변수가 존재합니다.
블록 레벨 스코프	let	- var와 같지만 같은 블록{}에서는 이미 선언한 존재를 중복해서 선언할 수 없습니다. - 블록{}, 제어문 블록{}에서도 지역 변수가 존재합니다.
블록 레벨 스코프	const	- var와 같지만 같은 블록{}에서는 이미 선언한 변수를 중복해서 선언할 수 없고 저장된 값을 변경할 수도 없습니다. - 블록{}, 제어문 블록{}에서도 지역 변수가 존재합니다.