[3주차] 14장 전역 변수의 문제점

전역 변수 사용은 위험하다.

지역 변수를 사용해라.

 

14.1 변수의 생명 주기

 

1. 지역 변수 생명 주기

함수 내에서...  var x 너의 인생이 다하리라~

생성 : 변수 선언

할당 : 값을 가짐

소멸 : 생명 주기, 자신이 등록된 스코프가 소멸(메모리 해제)될 때까지 유효

메모리 공간은 누구도 참조하지 않을 때 가비지 콜렉터에 의해 해제되어 가용 메모리 풀에 반환 됨.

 

 

지역 변수는 foo 함수가 호출 전까지 생성되지 않는다.

foo(); 호출되어야 지역 변수가 생성된다.

 

전역변수에 적용되는 것: 호이스팅

런타임 이전 단계, 자바스크립트 엔진에 의해서 변수 선언은 먼저 실행된다.

var x 는 foo 안에서 생명이 사리진다. 지역 변수의 생명 주기 == 함수 생명 주기

 

호이스팅: 스코프 단위로 동작한다.

x 변수는 전역, 지역으로 둘 다 있는데.... 지역 x에서는 전역 x의 값을 가져오지 않는군, 호이스팅 스코프로 동작한다

2. 전역 변수 생명 주기

윈도우가 꺼지는 그 순간까지 너는 살아있구나 var x여

 

전역 코드 <---> 함수

명시적 호출이 없어도 실행됨.

더 이상 실행할 문이 없을 때 종료.

 

var 키워드로 선언한 전역 변수

전역 객체의 프로퍼티

: 자바스크립트 엔진에 의해 제일 먼저 생성 되는 특수한 객체

브라우저: window, self

node.js : global 객체

환경에 따라 전역 객체를 가리키는 다양한 식별자에서 globalThis로 통일 됨

환경에 따라 다르다.. 모든 브라우저마다 다르니까~~

환경과 무관.

 

 

 

 

var x 는 전역이라 undefined 나옴. const yy 는 정의안됨으로 나옴

 

 

 

 

 

 

 

 

 

자바스크립트란? 언어 : 웹브라우저에서. 여러 요소를 동적으로 움직이거나, 외부와 통신하기 위해. 사용하는 언어.

웹브라우저에서. 여러 요소를 동적으로 움직이거나, 외부와 통신하기 위해. 사용하는 언어.

 

 

nodeJS 란? 웹브라우저에서 벗어나. 자바스크립트를 실행시켜주는. 또 다른 자바스크립트 실행 환경

웹 브라우저 밖에서도 자바스크립트를 실행할 수 있는  환경

1. 서버에서 사용하는 프로그램을 만들 수 있다.

서버: 웹브라우저, 모바일 앱 요청 --> 응답을 해주는 컴퓨터

 

 

globalThis 는 객체이다.

globalThis 는 객체이다.

3.4부터 사용 가능

globalThis 와 Window는 같군

globalThis에는 var는 들어가지만 let, const 전역 객체로 안들어가짐

참고: https://youtu.be/PB88qStKpgM

 

window 객체의 프로퍼티다

window를 닫을 때까지 유효하다.

 

14.2 전역 변수 문제점 

 

암묵적 결합

모든 코드가 전역 변수를 참조하고, 변경할 수 있다!

변수의 유효범위가 클수록 코드의 가독성은 나빠진다.

 

긴 생명 주기

전역 변수는 생명 주기와 같다

var 중복 선언을 허용. 변수 이름 중복 가능성 있다.

원치 않은 재할당이 생김

 

속도가 느리다

젼역 변수의 검색 속도가 느리다.

포든 스코프 체인 상에 마지막에 존재 함.

가장 마지막에 검색된다.

 

 

inner() 함수에서 시작해서 ---> var x 찾는건 가장 마지막에 찾는다. 이래서 느리다는거임

 

 

네임스페이스 오염

파일이 분리되어 있어도 전역 스코프를 공유한다.

파일 내에 동일한 이름으로 전역 변수, 전역 함수가 재할당 되면 꼬여버린다.

 

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

전역 변수 ------> 지역 변수 바꿔버려

스코프 넓다 << 스코프 좁을수록 좋다

 

1. 즉시 실행 함수

한번만 호출된다

모든 코드를 즉시 실행 함수로 바꾼다? --> 모든 변수는 즉시 실행 함수의 지역 변수가 됨

 

 

가로의 차이,,, 이건 뭐지 걍 함수 리터럴을 만들어낸건가.

응 이게 즉시실행함수. 지역변수가 되어서 aa가 출력안되잖아

 

 

2. 네임스페이스 객체

전역에 네임스페이스 역할을 담당할 객체를 생성

전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가

 

 

MYAPP 은 네임스페이스 객체

3. 모듈 패턴

클래스 모방

관련 있는 변수, 함수를 모아 

즉시 실행 함수로 감싸 하나의 모듈로 만든다.

전역 변수 억제, 캡슐화 구현 

 

캡슐화:

  객체의 상태: 프로퍼티 : 프로퍼티 값

   동작: 메서드1

           메서드2

 

메서드를 하나로 묶는 것.

캡슐화: 프로퍼티, 메서드를 감출 수 있다. (정보 은닉 informaiton hiding)

모듈패턴.. 선언하면 Counter(); 안된다. Counter.num 변수는 외부로 노출되지 않는다. 마치 자바의 private처럼

자바에서는 public, private, protected 처럼 접근제한자가 있으

자바스크립트에는 접근제한자 없음. 그래서 모듈패턴으로 한다.

4. ES6 모듈

 

전역 변수 사용할 수 없다.

모듈 내에서 var 는 더는 전역 변수가 아니다.

window 객체의 프로퍼티도 아니다.

 

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

script 태그에 

type="module"을  어트리뷰트를 추가하면

로드된 자바스크립트 파일 lib.mjs 이

모듈로서 동작한다.