아래의 문제는 자바스크립트에서 유효범위인 전역변수와 지역변수에 대해 아는 가에 관한 문제인데요.

유효범위(Scope)는 변수의 수명을 의미합니다.

먼저 고민해서 풀어보시고 난 후에 정답을 확인하면 좋을 것 같아요!

<script type="text/javascript">
$(document).ready(function(){
    function A(){
        console.log(myVar);
        var myVar = 1;
        console.log(myVar);
			
        function B(){
            console.log(myVar);
            myVar = 2;
            console.log(myVar);
				
            var myVar = 3;
            console.log(myVar);
        }
        B();
    }
    var myVar = 4;
    A();
		
});
</script>

정답은 다음과 같습니다!

1번째 값과 3번 째 값이 undefined가 된 이유는 지역 변수가 적용 되는 범위 내에서 변수가 선언되기 전까지의 값은 주지 않았기 때문에 undefined가 됩니다. 이름이 같은 전역 변수가 있다해도 함수내에서 무시됩니다. B() 함수내 값을 할당함으로 인해 변수를 선언한 효과가 있습니다.

*함수의 중괄호 안에 선언된 변수만이 함수 안의 지역변수이므로 for, if 중괄호에 선언된 함수는 지역변수로의 의미를 갖지 않습니다.

자바스크립트 유효범위: 전역변수와 지역변수

유효범위(Scope)는 변수의 수명을 의미합니다.

var vscope = 'global';

function fscope(){

    alert(vscope); //global을 출력

}

fscope();

fscope함수는 함수 바깥에 선언된 vscope에 접근할 수 있습니다.

var vscope = 'global';                                        var vscope = 'global';

function fscope(){                                                        function fscope(){

    var vscope = 'local';                                       vscope = 'local';

    alert('함수안 '+vscope); //local을 출력                alert('함수안 '+vscope); //local을 출력

}                                                                  }

fscope();                                                         fscope();

alert('함수밖 '+vscope); //global을 출력                alert('함수밖 '+vscope); //local을 출력

var vscope = 'global';

function fscope(){

var vscope = 'local' //지역변수에 해당

 vscope = ‘local’ //역시 지역변수에 해당

}

fscope();

alert(vscope); //global을 출력

이미 var으로 vscope의 지역변수가 생성되었습니다.

전역변수는 사용하지 않는 것이 좋습니다. 여러가지 이유로 그 값이 변경될 수 있기 때문입니다.함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까요? 함수의 동작도 달라지게 됩니다. 이는 버그의 원인이 됩니다. 또한 함수를 다른 애플리케이션에 이식하는데도 어려움을 초래합니다. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 합니다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 사용해야합니다.

전역변수를 사용하는 법

MYAPP = {}                                         (function(){

MYAPP.calculator = {                                       var MYAPP = {}

    'left' : null,                                                MYAPP.calculator = {

    'right' : null                                               'left' : null,

}                                                                  'right' : null

MYAPP.coordinate = {                                       }

    'left' : null,                                                MYAPP.coordinate = {

    'right' : null                                                          'left' : null,

}                                                                             'right' : null

MYAPP.calculator.left = 10;                                            }

MYAPP.calculator.right = 20;                               MYAPP.calculator.left = 10;

function sum(){                                                MYAPP.calculator.right = 20;

    return MYAPP.calculator.left + MYAPP.calculator.right;     

function sum(){

}                                                                   return MYAPP.calculator.left + MYAPP.calculator.right;

document.write(sum());                                   }

                                                                document.write(sum());

                                                        }())

오른쪽 코드처럼 함수로 감싸주어 바로 호출할 수 있습니다. = 익명함수

Var MYAPP은 function()내에 있기 때문에 지역변수입니다.

이러한 코드는 자바스크립트에서 로직을 모듈화하는 일반적인 방법입니다.

자바스크립트 유효범위의 대상(함수)

for(var i = 0; i < 1; i++){                         for(int i = 0; i < 10; i++){

 var name = 'coding everybody';               String name = "egoing"; //name은 지역변수

}                                                       }

alert(name);                                         System.out.println(name); //에러가 납니다.

*함수의 중괄호 안에 선언된 변수만이 함수 안의 지역변수이므로 for, if 중괄호에 선언된 함수는 지역변수로의 의미를 가지 않습니다.

자바스크립트 정적 유효 범위

var i = 5; //전역 변수

function a(){

    var i = 10; //지역 변수

    b();

}

function b(){

    document.write(i); //b함수 내에 i라는 변수가 존재하지 않기 때문에 전역 변수를 찾게 된다.

}                         //사용될 때가 아니라 정의될 때의 전역 변수가 사용됩니다. 이를 정적

//유효범위 또는 렉시컬이라고 부릅니다.

a(); //실행 결과는 5

출처 : 생활코딩 강의