본문 바로가기

Javascript/기초공부

[Javascript: 유효범위] 전역변수 / 지역변수 / 전역변수 사용법 / 유효범위의 대상(함수) / 정적 유효범위

전역변수와 지역변수

var vscope = 'global'; // 전역변수
function fscope(){
    var vscope = 'local'; // 지역변수
    alert('함수안 '+vscope);
}
fscope(); // 함수안 local
alert('함수밖 '+vscope); // 함수밖 global

* 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있으면 지역변수가 우선한다.

 

그런데 만약 코드가 다음과 같다면 결과는 이렇게 바뀐다.

var vscope = 'global';
function fscope(){
    vscope = 'local'; // var 키워드 삭제
    alert(vscope); // local
}
fscope();
alert(vscope); // local

* var을 생략하면 전역변수가 된다.

* 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화하자!

 

전역변수 사용법

불가피하게 전역변수를 사용해야 하는 경우,

하나의 객체를 전역변수로 만든 후

객체의 속성으로 변수를 관리하는 방법 사용

MYAPP = {} // 전역변수
MYAPP.calculator = { // 속성
    'left' : null,
    'right' : null
}
MYAPP.coordinate = { // 속성
    'left' : null,
    'right' : null
}
 
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
    return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());

 

그러나 전역변수 하나라도 사용하고 싶지 않으면 익명함수를 이용한 방법이 있다.

(function(){
    var MYAPP = {}
    MYAPP.calculator = {
        'left' : null,
        'right' : null
    }
    MYAPP.coordinate = {
        'left' : null,
        'right' : null
    }
    MYAPP.calculator.left = 10;
    MYAPP.calculator.right = 20;
    function sum(){
        return MYAPP.calculator.left + MYAPP.calculator.right;
    }
    document.write(sum());
}())

* 익명함수 포스트 참조 https://jisun-rea.tistory.com/entry/Javascript-%ED%95%A8%EC%88%98Function-%EB%8B%A4%EC%96%91%ED%95%9C-%ED%95%A8%EC%88%98-%EC%A0%95%EC%9D%98-%EB%B0%A9%EB%B2%95?category=761595

 

유효범위의 대상(함수)

자바스크립트에서 유효범위는 함수에만 해당된다. 즉, 블록({})과 같은 것은 해당되지 않는다.

for(var i = 0; i< 1; i++)
	var name = 'coding everybody'; // name은 for문 안에서만 해당되는 지역변수가 아니다.
}
alert(name); // 오류 없이 출력된다.

 

정적 유효범위(Static/Lexical scoping)

var i = 5; // 전역변수

function a() {
    var i = 10; // 지역변수
    b();
}

function b() {
    document.write(i); // i라는 지역변수가 함수안에 없기에 전역변수를 가져온다.
}

a(); // 5

* 즉, 정의될 때의 변수가 사용된다. (사용될 때가 아닌)