JavaScript 변수의 범위(scope)

 

 

자바스크립트에서 변수의 범위는 변수가 접근할 수 있는 객체와 함수를 포함한 변수의 집합을 의미한다. 

 

지역변수

지역변수는 함수 내에서 선언된 변수로 변수가 선언된 함수내에서 유효하고 함수가 종료되면 메모리에서 사라진다.

function func1(x, y){
        let sum = 0; // 지역변수
        ...
        console.log(x, y, sum); // 값 출력
    }
console.log(x, y, sum); // undefined

함수내 지역변수는 함수 밖에서 사용할 수 없어 undefined가 출력된다.

 

 

 

전역변수

전역변수는 함수의 외부에서 선언된 변수로 프로그램의 어느 영역에서나 접근 할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라진다.

let global = 0; // 전역변수
function func1(x, y){
    console.log(global); // 값 출력
}
console.log(global); // 값 출력

함수밖에서 선언한 전역 변수는 함수 안 밖으로 사용 가능하다.

 

 

 

---

 

 

변수타입 var와 let의 차이를 알아보자.

var num1 = 50;  // 전역변수
if(num1 == 50){ // var는 블록에서는 전역변수를 사용함. 함수에서는 전역, 지역변수를 사용함.
    var num1 = 100;                // 전역변수
    console.log(`num1 : ${num1}`); // 전역변수 100
    num1 = 200;                    // 전역변수 200
    console.log(`num1 : ${num1}`); // 전역변수 200
}
console.log(`num1 : ${num1}`);	 // 전역변수 200

위 코드들을 보면 var를 사용하면 함수 내에서 같은 이름의 변수를 선언하여도 지역변수가 아닌 전역변수로 선언되는 것을 확인 할 수있다. 따라서 함수 이전에 선언한 전역변수의 값을 계속 변경되어 나중되면 혼란을 빚을 수 있다.

 

let num2 = 50;  // 전역변수
if(num2 == 50){
    let num2 = 100;                // 지역변수
    console.log(`num2 : ${num2}`); // 지역변수 100
    num2 = 200;                    // 지역변수 200
    console.log(`num2 : ${num2}`); // 지역변수 200
}
console.log(`num2 : ${num2}`); // 전역변수 50

 

그러나 let를 사용하게 되면 함수내에서 같은 이름의 변수를 선언하면 앞서 선언한 전역변수와 별개로 지역변수를 선언함으로 함수 내에서 지역변수를 사용하고 전역변수에는 영향을 주지않는 차이점이 있다. 이처름 var를 사용한 변수를 재선한 할 수 있는 실수를 방지하고자 var보다는 let의 사용을 더 권장한다.