(Javascript) 자바스크립트 심화 (1) 함수 유효범위

안녕하세요 , 영감을 주는 개발자 방민방민입니다.

앞선 자바스크립트 기초문법 및 실습을 통해서 자바스크립트에 가장 기초적인 문법들을 살펴보았습니다.

이제부터는 자바스크립트에서 조금 심화된 내용으로 들어가서 자바스크립트에 대한 이야기를 해보고자 합니다.

본 스크립트는 생활코딩의 javascript 강의를 토대로 작성되었습니다.

1. 유효범위

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

	var vscope = 'global';
	function fscope(){
		var vscope = 'local';
		alert(vscope);
	}

	fscope();

위의 코드는 아래와 같은 결과를 알람으로 출력합니다. 

그 이유는 함수 내부에서 선언된 vscope(local) 가 함수밖에서 선언된 vscope(global) 에서 우선순위를 갖기 때문입니다. 만약 함수 내부에서 vscope 에 대해 새로운 선언을 하지 않는다면, global 을 출력하게 됩니다.

아래의 코드를 생각해보겠습니다, 아래의 코드는 끊임없이 반복되는 무한루프를 돌게 됩니다.

for 문에서 선언되는 i 는 전역변수이고, function 내부에서 i 를 접근할때는, var 이 붙어있지 않기 때문에, 

새로운 지역변수를 생성하는 것이 아니라, for 문에서 선언된 i 에 접근합니다, 즉 반복문 내에서 계속해서 i 의 값을 0 으로 초기화 한다. 그렇기 때문에 계속해서 반복이 되는 것입니다.

function a(){
	i = 0;
}

for (var i = 0; i<5; i++){
	a();
	document.write(i);
}

이러한 변수에 중복에 대한 문제는 위의 예시와 같은 간단한 코드에서는 금방 확인이 가능하지만, 코드가 길어지게 되면 큰 문제가 발생할 수 있습니다. 그렇기 때문에, 변수를 선언하고 사용함에 있어서도 반드시 지역과 전역에 관련된 내용을 이해하고 사용해야만 합니다.

2. 전역변수 최소화

전역변수를 사용할 경우 변수의 충돌이 발생할 가능성이 증가하기 때문에, 

아래와 같이 MYAPP 이라는 객체를 만들고 그 내부에 calculator 라는 객체 내부에 left 와 right 를 생성합니다.

이를 통해 다른 곳에서 사용되는 left 혹은 right 변수와의 충돌을 방지할 수 있습니다.

var myApp = {};

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;
}

이 예제의 결과값은 30이 됩니다.

그러나 위의 경우에도 MYAPP 이라는 객체를 전역변수로 선언하게 되기 때문에 

이조차도 허락하고 싶지 않은 경우

아래와 같이 익명 함수를 선언함과 동시에 호출하는 방식으로 내부에서 동작하도록 함으로써, 전역변수 생성을 방지합니다.

(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());
}())

이러한 자바스크립트에서의 지역변수는 함수내에서만 유효합니다.

이 말은 자바스크립트가 다른 언어와 다르게 function () { } 에서 선언될 때만, 지역변수가 된다는 것입니다.

for문과 같은 반복분 내에서 선언된 변수는 자바스크립트에서는 "전역변수" 가 됩니다.

3. 정적 유효범위

전역변수 i 와 지역변수 i 를 호출하고, 다른 함수를 통해서 i 를 출력하게 되면 어떻게 될까요?

아래의 예제를 살펴보겠습니다.

var i = 5;//전역변수

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

}

function b(){
	document.write(i);
}

a();

위의 예제에는 전역변수 i 와 지역변수 i 가 존재하며,  b() 라는 함수를 통해 i 를 출력합니다.

이때 그 값은 5가 될까, 10이 될까요?

전역변수를 사용할지, 지역변수를 사용할지는 함수를 사용할때 결정하는 것이 아니라 함수가 선언될 때 결정됩니다. 해당 함수를 선언할 때, 함수 내부에 사용할 지역변수가 없다면 이후에는 전역변수를 사용하는 것으로 인식합니다.

자 그러면 출력되는 답이 뭔지 아시겠나요??

오늘은 함수에서 발생하는 유효범위에 대한 이야기를 해보았습니다.

위의 예제로 제시된 프로그램은 아주 간단하지만, 실제 프로그래밍의 크기가 커지면 이러한 변수문제가 아주 커질수 있습니다. 그렇기 때문에 이 개념을 확실하게 잡고 가는 것이 아주 중요합니다.

질문이 있으시면 댓글로 부탁드립니다.

지금까지 영감을 주는 개발자 방민방민이었습니다. :)