[딥 다이브 스터디] 24.03.07 전역 변수의 문제점

지역 변수의 생명주기

function foo() {
    var x = 'local';
    console.log(x);

    return x;
}

foo();
// console.log(x);

변수

1. 하나의 값을 저장하기 위해 확보한 메모리 공간 자체

2. 그 메모리 공간을 식별하기 위해 붙인 이름

변수의 생명주기

전역 변수의 생명주기

전역 코드

1. 명시적인 호출이나 특별한 진입점 없이 곧바로 해석되고 시작된다.

2. 더 이상 행할 문이 없을 때 종료된다.

전역 객체

1. 코드 실행 이전에 어떤 객체보다 먼저 생성되는 특수한 객체

2. 클라이언트 사이드 환경의 window, 서버 사이드 환경의 global 객체를 의미

3. 표준 빌트인 객체(obj, string, fun, array)와 환경에 따른 호스트 객체(클라이언트 Web API, Node.js의 호스트 API), var 키워드로 선언한 전역 변수와 전역함수를 프로퍼티로 갖는다.

전역 변수의 문제점

암묵적인 결합

• 변수의 유효 범위가 커지면서 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성이 도사린다… 실제로 프로젝트에서 이걸로 애를 먹는다…

긴 생명 주기

스코프 체인 상에서 종점에 존재

네임스페이스 오염

전역 변수의 사용을 억제하는 방법

즉시 실행 함수

(function () {
	var foo = 10; // 즉시 실행 함수의 지역 변수
    console.log(foo);
}());

// 10

// console.log(foo); // ReferenceError: foo is not defined

모듈 패턴

캡슐화

정보 은닉

var Counter = (function () {
    var num = 0;
    
    return {
    	increase() {
        	return ++num;
        },
        decrease() {
        	return --num;
        }
    };
}());

console.log(Counter.num); // undefined

console.log(Counter.increase()); // 1
console.log(Counter.increase()); // 2
console.log(Counter.decrease()); // 1
console.log(Counter.decrease()); // 0

ES6 모듈

<script type="module" src="app.mjs></script>