[JavaScript] 유효범위(Scope), 지역변수와 전역변수

이 게시물은 인프런 강의 [생활코딩 - 자바스크립트(JavaScript) 기본] 강의를 바탕으로 개인적 기록 목적으로 작성하였습니다.

 

 

지역변수의 유효범위

function func() {
    var a = 10;
    console.log(a);
}
func();
console.log(a);

 

함수 내에서 변수 a 를 선언하였고, 함수에서 바로 a 값을 사용하고 있다.

함수 밖에서는 a값이 존재하지 않는 지역변수이므로 마지막의 출력문은 실행되지 않는다.

 

결과

 

첫번째 출력만 출력되고 두번째는 에러가 난 것을 확인할 수 있다.

 

결론적으로, 지역 변수의 유효범위는 그 변수가 속한 함수, 혹은 객체의 범위 안이다.

 

 

 

 

 

전역변수의 유효범위

var a = 30; // 함수 밖에서 변수 선언
function func() {
    console.log(a);
}
func();
console.log(a);

 

위처럼 함수의 밖에서 a에 30이라는 값을 넣었다. 함수의 밖에서 선언하였고, func 함수 안에서 a라는 값을 콘솔로 출력하는데, a는 함수 내부에 존재하지 않는다.

따라서 함수 밖의 a를 가져오는데, 이 a는 함수 외에도 어느 곳에서도 접근할 수 있으므로 전역 변수이다.

 

 

위 코드에서는 두 출력문 다 전역변수인 a의 값을 가져오는 것을 확인할 수 있다.

이처럼 전역변수는 함수 안이 아니더라도 모든 범위에서 접근할 수 있다.

 

하지만 모든 범위에서 접속할 수 있다는 점에서 메모리 사용이나 코드 에러 측면에서 사용성이 좋지 않아 되도록이면 전역변수는 사용하지 않는 편이다.

 

 

이러한 위험성들을 줄이기 위해 전역변수를 사용하지 않고 코드를 작성하는 방법을 기록하겠다.

 

 

1. 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 법

MINUAPP = {}
MINUAPP.calculator = {
    'left': null,
    'right': null
}
MINUAPP.coordinate = {
    'left': null,
    'right': null
}

MINUAPP.calculator.left = 50;
MINUAPP.calculator.right = 80;
function sum() {
    return MINUAPP.calculator.left + MINUAPP.calculator.right;
}
console.log(sum());

 

 

 

2. 익명함수를 호출하여 사용

(function () {
    MINUAPP = {}
    MINUAPP.calculator = {
        'left': null,
        'right': null
    }
    MINUAPP.coordinate = {
        'left': null,
        'right': null
    }

    MINUAPP.calculator.left = 50;
    MINUAPP.calculator.right = 80;
    function sum() {
        return MINUAPP.calculator.left + MINUAPP.calculator.right;
    }
    console.log(sum());
}())