Languages/Java Script

[Js] 함수지향 | javascript 함수 | 유효범위 | 지역변수 전역변수

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

함수지향

자바스크립트의 함수는 매우 강력하다. 함수에 대한 이해 없이는 자바스크립트를 잘 다루기 어렵다.

또한 자바스크립트에서 함수는 객체를 이해하는 데 가장 중요한 기초를 이룬다.

이번 강좌에서는 함수형 언어로서 자바스크립트의 면모를 다뤄보도록 하겠다.

유효범위

유효범위(Scope)는 변수의 수명을 의미한다. 아래의 예제를 보자.

<script>
    var vscope = 'global';
    function fscope(){
        alert(vscope);
    }
    fscope();
</script>

결과는 global이다.

함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다.

전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다.

그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다.

아래 예제를 보자. 결과는 '함수안 local'과 '함수밖 global'이 출력된다.

<script>
    var vscope = 'global';
    function fscope(){
        var vscope = 'local';
        alert('함수안 '+vscope);
    }
    fscope();
    alert('함수밖 '+vscope);
</scrip>

즉 함수 안에서 변수 vscope을 조회(5행) 했을 때 함수 내에서 선언한 지역변수 vscope(4행)의 값인 local이 사용되었다. 하지만 함수 밖에서 vscope를 호출(8행) 했을 때는 전역변수 vscope(2행)의 값인 global이 사용된 것이다.

즉 지역변수의 유효범위는 함수 안이고, 전역변수의 유효범위는 에플리케이션 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다는 것을 알 수 있다.

아래 예제를 보자. 결과는 모두 local이다.

<script>
    var vscope = 'global';
    function fscope(){
        vscope = 'local';
        alert('함수안'+vscope);
    }
    fscope();
    alert('함수밖'+vscope);
</script>

함수밖에서도 vscope의 값이 local인 이유는 무엇일까?

그것은 함수 fscope의 지역변수를 선언할 때 var를 사용하지 않았기 때문이다.

var를 사용하지 않은 지역변수는 전역변수가 된다.

따라서 3행은 전역변수의 값을 local로 변경하게 된 것이다. var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다.

전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다.

함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까?

함수의 동작도 달라지게 된다.
이것은 버그의 원인이 된다. 또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다.

함수의 핵심은 로직의 재활용이라는 점을 상기하자.

변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

▼ 주의

※ 이미 지역변수가 만들어져있는데, var을 쓰지 않고 전역변수로 만든다면 우선순위는 지역변수가 된다.

※ var를 써서 전역변수를 만들고, 이후 var를 쓰지않고 그 변수의 값을 바꾼다면, 그 값이 전역변수 값으로 변경된다.

유효범위의 효용

아래 두개의 예제는 변수 i를 지역변수로 사용했을 때와 전역변수로 사용했을 때의 차이점을 보여준다. 전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않은 문제를 발생시킨다.

지역변수의 사용

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
  function a(){
  	var i =0;
  }
  for(var i = 0; i <5; i++){
  	a();
  	document.write(i);
  }
</script>


</body>
</html>

실행결과

만일 위 코드에서, function a 의 변수 i를 선언할 때, var 키워드를 적지 않는다면 어떻게 될까?

바로 무한반복으로 브라우저가 다운된다.

그 이유는 현재 for문에서 선언된 변수 i가 전역변수이고, function a의 변수 i는 지역변수 인데,

var키워드를 적지 않아주면 a함수의 변수 i가 전역변수가 되어,

전역변수 i의 값이 항상 0이 되어 for문 조건에 만족하므로 끊임없이 돌게 되는 것이다.

전역변수의 사용

본 예제는 위의 설명된 경우이며 무한반복을 발생시킨다.

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
  function a(){
   i =0; //var가 생략됨. 즉 전역변수를 의미함.
  }
  for(var i = 0; i <5; i++){
  	a();
  	document.write(i);
  }
</script>


</body>
</html>

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다.

<script>
    MYAPP = {}//객체임
    MYAPP.calculator = {//객체안에 또다른 객체
        'left' : null,//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());
</script>

전역변수를 사용하고 싶지 않다면 아래와 같이 익명함수를 호출함으로서 이러한 목적을 달성할 수 있다.

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

위와 같은 방법은 자바스크립트에서 로직을 모듈화하는 일반적인 방법이다.

이렇게 되면 MYAPP이 더이상 전역변수가 아닌, 함수에 지역변수가 되는 것이다.

만약 함수에 이름을 주고 싶다면 주고, 호출하여도 관계가 없지만 그렇게 되면 그 또한 전역 변수가 되는 것이기 때문에

전역 변수를 하나도 쓰지 않고 싶다면 위와 같이 익명함수 방법을 사용하면 된다.

유효범위의 대상 (함수)

자바스크립트는 함수에 대한 유효범위만을 제공한다.

많은 언어들이 블록(대체로 {,})에 대한 유효범위를 제공하는 것과 다른 점이다. 아래 예제의 결과는 coding everybody이다.

<script>
    for(var i = 0; i < 1; i++){
        var name = 'coding everybody';
    }
    alert(name);
</script>

자바에서는 아래의 코드는 허용되지 않는다.(에러가 남)

name은 지역변수로 for 문 안에서 선언 되었는데 이를 for문 밖에서 호출하고 있기 때문이다.

for(int i = 0; i < 10; i++){
    String name = "egoing"; //var name ="egoing"과 같은 느낌
}
System.out.println(name); //console.log(name)의 느낌

자바스크립트의 지역변수는 함수에서만 유효하다.

즉 함수 밖에서 사용되는 지역변수는 그 의미가 지역변수를 가르키지 않는다.

그렇기 때문에 for문과 같은 곳에서 사용 후, alert(name)으로 출력 하여도 에러가 나지 않는다.

정적 유효범위

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다.

이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고 한다.

<script>
    var i = 5;

    function a(){
        var i = 10;
        b();
    }

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

    a();
</script>

이 코드에서 function b ()에서 출력되는 i는

과연, 전역변수 i = 5의 값일까, 아니면 function a()에서 선언된 지역변수 i = 10 의 값일까?

정답은 전역변수 5의 값이다.

즉, 호출된 시점을 보는 것이 아닌 (사용될 때) 정의될 때의 전역변수가 사용되게 되는 것이다.

메소드가 정의 되어진 시점에서 사용되는 것, 이러한 범위를 정적 유효범위라고 한다.

'Languages > Java Script' 카테고리의 다른 글

[Js] 클로저 \| 외부함수, 내부함수 (0)	2021.02.04
[Js] 값으로서의 함수와 콜백 \| 콜백 \| 비동기 처리 (0)	2021.02.04
[Js] 정규 표현식 \| 컴파일? \| 정규표현식 리터럴 (0)	2021.02.04
[Js] UI와 API 그리고 문서보는 법 \| API란? \| javascript API (0)	2021.02.04

Contents

새소식

인기 검색어