전역 변수

전역 변수는 많이 사용하면 참조하는 모든 값에 영향을 끼쳐 코드의 흐름을 읽기 힘들어지고 생명주기가 길어 메모리 리소스도 오랜 기간 소비하게 된다. 이해하기 편하려면 바탕화면에 안녕하세요.txt 파일이 있고 폴더를 만들어 내부에 안녕하세요.txt 파일을 만들었는데 바탕화면에 있는 txt파일에도 영향을 끼치게 된다고 보면 된다.

변수의 생명주기

변수는 선언에 이해 생성되고 할당을 통해 값을 가진다. 전역 변수의 생명주기는 애플리케이션의 생명 주기와 같지만 함수 내부에서 선언된 변수는 함수의 호출에 생성 종료에 소멸한다.
전역 변수 같은경우는 호이스팅에 의해 코드 한줄씩 실행되기 전에 선언된다고 배웠다.
하지만 함수 내부에 있는 지역 변수 같은경우 함수의 호출에 의해 먼저 변수가 선언된 후 코드가 한줄씩 실행된다.

함수에 선언된 변수의 생명주기

전역 객체??
코드가 실행되기전 먼저 생성되는 특수한 객체다. window,self,this,frames,global 식별자가 존재했으나 globalThis로 통일됐다.

전역 변수를 줄이자

이제 전역 변수가 어떤 특성화 흐름을 가졌고 어떤 문제점을 가지는지 이해했다. 줄여보자

즉시 실행 함수

전에 다뤘었는데 함수 정의와 동시에 호출되고 한번만 호출되는 특성을 가졌다. 생명주기에 의해 함수 종료와 동시에 변수도 삭제된다.

(function () {	
	return 1 + 2
}())

네임 스페이스 객체

네임스페이스는 전역 변수처럼 사용할 변수를 프로퍼티로 추가하는 방법이다.

var global = {} // 객체 생성
global.person = {
	name: "hi"
}
console.log(global)

모듈 패턴

클래스와 비슷하다. 변수와 함수를 싹 모와다 즉시 실행함수()로 감싸 하나의 모듈을 만든다. 전역 변수의 제거와 캡슐화를 구현 할 수있다. 캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 메서드를 하나로 묶는걸 말한다. 객체의 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 정보 은닉이라 한다.

var result = (function () {
	var num = 0	// 프라이빗 멤버
    return {
    	increase() {	// 퍼블릭 멤버
        	return ++num
        },
        decrease() {	//	퍼블릭 멤버
        	return --num
        }
    }
}())
console.log(result.increase())	//	1	
console.log(result.decrease())	//	0	
console.log(result.num)		// undefined 변수를 정보 은닉했다. 

ES6 모듈

ES6 모듈을 사용하면 전역 변수를 사용 할 수 없다. script 태그에 어트리뷰트를 추가하면 자바스크립트 파일은 모듈로서 동작한다

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

단 아직 구형 브라우저에서는 동작하지 않으며 트랜스 파일링이나 번들링이 필요하기 때문에 아직은 Webpack등의 모듈 번들러를 사용한다.