자바스크립트 딥다이브 4일차

변수의 생명주기 

지역변수의 생명주기 

- 변수는 자신이 선언된 위치에사 생성되고 소멸된다. 전역변수의 생명주기는 애플리케이션 생명주기와 같다, 하지만 함수 내부에서 선언된 지역변수는 함수가 호출되면 생성되고 함수가 종료되면 소멸한다. 

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

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

- 지역변수 x는 foo 함수가 호출되지 않으면 생성이 되지 않는데, foo 함수를 호출하지 않으면, 함수 내부의 변수 선언문이 실행되지 않기 때문이다. 

자바스크립트 엔진에 의해 식별자들은 런타임 이전에 의해 실행이 된다. 
하지만 이는 전역변수만 해당한다.

 

🤔 전역변수만 해당한다?? 
- 위 foo 함수 예제를 보면 foo 함수를 호출하면 자바스크립트 엔진은 x가 선언되고 undefined로 초기화 된다. 그 후 함수 몸채 내부에 문들이 순차적으로 실행된다. 그리고 함수가 종료되면 x 변수도 소멸되어 생명주기가 종료된다.
즉 지역변수의 생명주기는 함수의 생명주기와 같다

 

- 변수의 생명주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 폴에 반환되는 시점까지다. 

var x = 'global';

function add() {
 console.log(x);
 var x = 5;
}

add()

- 위 예제로 보면 foo 함수 내부에 x는 undefined로 초기화 되어있다. 이 결과를 보면 전역변수 x를 참조하는 것이 아닌 지역변수 x를 참조해 값을 출력한다. 위에서 값은 undefined가 나온다. 

- 이처럼 호이스팅은 스코프로를 단위로 동작한다. 전역변수 호이스팅은 전역 변수의 선언이 전역 스코프의 선두로 끌어 올려진 것처럼 동작한다. 전역변수는 전역 전체에서 유효한다. 

- 지역변수의 호이스팅의 경우는 지역변수의 스코프의 선두로 끌어올려진 것을 말한다. 지역변수의 경우는 함수 전체에서 유효하다. 

- 호이스팅은 변수 선언이 스코프의 선두로 꿀어 올려진 것처럼 동작하는 자바스크립트의 동작을 말함

 

전역변수의 생명주기

- 함수와 달리 전역 코드는 명시적인 호출없이 실행한다. 즉 전역변수는 코드가 리로드 되지마자 곧바로 해석돠고 살행된다. 

- var 키워드로 선언한 전역변수는 전역 객체의 프로퍼티가 된다. 

⚙️ 전역객체 

- 전역 객체는 코드가 실행되기 이전에 자바스크립트 엔진에 의해 어떤 객체보다 먼저 생성되는 특수한 객체다. 

- 전역 객체는 클라이언트 사이드에서는 window, 서버사이드에서는 global을 말한다. 

- 브라우저 환경에서 전역 객체는 window 이므로 브라우저 환경에서 var 키워드로 선언한 전역변수는 전역 객체의 window의 프로퍼티다. 전역 객체 window는 웹페이지를 닫기 전까지 유효하다. 즉 var 키워드로 선언한 전역 변수의 생명주기는 전역 객체의 생명주기와 같다.

 

전역변수의 문제점

- 전역변수로 선언하면 모든 코드가 전역변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다.

- 변수의 유효범위가 크면 클수록 가독성이 떨어지고 의도치 않게 상태 변경이 될 수 있어 위험하다. 

- 전역변수는 생명주기가 길다. 이로인해 메모리 리소스도 오랜 기간 소비하고 변수 변경이 가능해 의도치 않게 재할당이 이뤄질 수 있다. 

- 전역변수는 변수를 검색할 때 가장 마지막에 검색이 되는데, 이로인해 변수의 검색속도가 가장 느리다고 한다.

- 네임스페이스 오염이 발생할 수 있다. 

 

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

- 무분별한 전역변수의 사용은 위험하다

- 전역변수를 사용해야할 이유가 없으면 지역변수를 사용하자. 

즉시 실행 함수 

-모든 코드를 즉시 실행 함수로 감싸며 모든 변수는 즉시 실행 함수의 지역변수가 된다.

- 이 방법은 라이브러등에 많이 사용된다고 한다. 

(function() {
  var foo = 10;
}());

console.log(foo); //ReferenceError

네임스페이스 객체

- 전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법이다. 

var MYAPP = {}; 

MYAPP.name = 'Lee';

console.log(MYAPP.name); // 'Lee'

- 하지만 결국 네임스페이스 객체도 전역변수에 할당되므로 유용해보이지는 않는다. 

모듈패턴

- 모듈 패턴은 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행함수로 감싸 하나의 모듈을 만든다. 

- 모듈 패턴은 자바스크립트이 강력한 기능인 클로저 기법으로 동작한다. 

- 모듈 패턴의 특징은 전역변수의 억제는 물론 캡슐화까지 구현이 가능하다.

캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 
하나로 묶는 것을 말한다. 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 '은닉화'라고 한다. 

 

ES6 모듈

- ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다. 

- 모든 브라우저에서는 ES6를 사용이 가능한데