자바스크립트 : 전역 변수와 지역 변수

전역 변수와 지역 변수

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

---

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

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

위의 예시에서 함수 블록{} 안에 있는 kor 변수는 전역 변수입니다. 따라서 getScor() 함수를 호출하게 되면 kor 변수의 값이 90에서 100으로 바뀌게 됩니다.

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

위의 예시에서는 함수 블록{} 안의 kor 변수를 var로 정의했습니다. 함수 블록{} 안에서 var로 선언된 변수는 지역 변수가 되며, 지역 변수는 함수 블록{} 밖의 전역 변수 kor과는 다른 별도의 변수가 됩니다. 함수의 지역 변수는 함수 블록{} 밖에서 사용할 수 없습니다. 이렇게 블록{}에 의해 변수의 범위가 달라지는 것을 변수의 scope라고 합니다.

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

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

let num = 10;
{
    let num = 20;            //num은 지역 변수
    document.write(num);    //20
}
document.write(num);    //20

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

const num = 10;
{
    const num = 20;          //num은 지역 변수
    document.write(num);    //20
}
document.write(num);    //20

위 예시에 나타난 것처럼, 블록{} 안에서 let과 const로 선언된 변수는 블록 {}의 지역 변수로 인식합니다.

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

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

//블록의 지역 변수
var num1 = 50;
if (num1 === 50) {
    var num1 = 60;
}
document.write('전역' + num1);        //전역60

let num2 = 70;
if (num2 === 70) {
    let num2 = 80;
    document.write('지역' + num2);        //지역80
}
document.write('전역' + num2);        //전역70

var, let, const 비교 정리

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