2021_12_07 변수의 생명주기

딥다이브 변수의 생명주기 정리

 

1. 변수의 생명주기

 1.1 지역 변수의 생명주기

   - 변수에 생명주기가 필요한 이유는??

   - 변수에 생명주기가 없으면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유한다.

   - 변수는 기본적으로 자신이 선언된 위치에서 생성되고 소멸 ( 함수 내부에서 호출되면 종료시 소멸 )

   - 이전 책 내용에서 변수 선언은 런타임 이전에 실행된다 라고 했는데 전역 변수 한정이다.

   - 메모리 공간이 확보 된 시점 (변수 선언) 메모리 공간이 해제 되어 메모리 풀에 반환되는 시점 (소멸)  

   - 함수 스코프 내부에 있는 경우 함수가 종료될때 가비지 콜렉터에 의해 데이터 소멸

* c++ 에서는 동적으로 생성된 메모리들을 수작업으로 소모 시켜줘야하는데

  js는 임의로 데이터 소멸을 해준다 문제는 C# 처럼 수작업으로도 가능하고 가비지 콜렉터가 잇는게 아니라

  오로지 가비지 콜렉터만 있어서 임의로 소멸시킬 수 없다. (라고 책에 적혀있었음)

 

   - 오래 살아남는 지역 변수는 함수보다 오래 생존하는 경우도 있다 

     -> 수업 중 배운 closure 즉, 함수 바깥에서 함수 내부의 변수를 건들이고 있을 경우에는 함수가 계속 살아있다.

// 문제1
var value = 100;

function x(){
	console.log(value);
	var value = 10;
}

x();
console.log(value);

// 문제2

var value = 100;

function x(){
	var value = 10;
	console.log(value);
}

x();
console.log(value);

2. 함수 내부의 변수 선언

   - 함수 스코프 내의 지역 변수는 함수가 실행될 때 최상단의 올라온 것과 유사하게 작동 된다 ( js 고유 특징 )

   - 유사하기만 하지 똑같지는 않음... 

   - 1번의 value 변수는 함수가 실행되고 변수가 할당되는 런타임 이전에 undefined 값만 가진다. (호이스팅)

   - 만약 value가 호이스팅 안되고 console.log(value) 아래에만 있다고 이건 에러 문법이다! 라고 생각하면 안된다.

   

   - var value가 아래에 있더라도 초기화(undefined)는 되고 있다는 소리 고로 최상단의 올라온 것과 유사한 작동

   - 또 하나의 이유는 해당 x 함수를 할당해서 로그를 뽑아 보면 값이 10이 잇다는 것을 알 수 있다.

 

   - 2번으로 함수 스코프 내부에서 변수 선언된 후 함수가 종료 시 바로 소멸되기 때문에

   - 함수 내부에서 똑같이 value를 해봤자 바로 소멸되어 함수 내부에 있는 value 내부에 영향을 끼치는게 없다.

 

정답

// 1번
undefined;
100;

// 2번
10;
100;

// 1번 호이스팅 증명 문법
var value = 100;

function x(){
console.log(value);
var value = 10;
	return value;
	
}

let value2 = x();
console.log(value2); // 10
console.log(value);  // 100

 3. 전역 변수의 생명 주기

   -  전역 변수는 반환문을 사용할 수 없으므로 마지막 문이 실행될때, 더 이상 실행할 문이 없을 때 종료

   - 전역 변수 var는 window의 프로퍼티이다. ( 2021_12_07 수업 기준 전역변수는 window의 유전자이다!)

   - 고로 window가 죽을때 죽는다

   

4. 전역 변수의 문제점

   4.1 암묵적 결합

     - 전역 변수는 전역 즉, 코드 어디서든 할당할 수 있는 변수를 사용 하겠다는 것

     - 모든 함수, 코드가 참조, 변경 할 수 있는 암묵적 결합을 허용한다.

     - 변수의 유효 범위(사용범위) 가 클수록 코드의 가독성은 나빠지고 의도치 않게 변경 될 수 있는 위험성이 있다

     - 코드의 신뢰성이 하락한다!!

 

   4.2 긴 생명 주기 및 리소스 낭비

     - 전역 변수는 window의 프로퍼티이기 때문에 생명 주기가 아주 길다. 리소스도 오랜 기간 소비한다.

     - 전역 변수는 스코프 체인 상에서 종점 즉, 마지막에 찾게된다.

     - 문제를 풀어보자

// 퀴즈 - 스코프 체인이란?

 

     - 스코프 체인이란?

     - 전역 변수로 x 선언하고 sum 함수로 x 참조 받는 상황이 있다고 가정

     - sum 함수가 Number 함수 내부, Cac함수 내부에 있을 경우 변수 x를 찾기 위해 Number 함수 다 검색

     - Cac함수 내부를 다 검색 하고 다 돌아 다닌 뒤에 찾는게 전역 변수이다.

     - 이처럼 스코프들을 타고타고 넘어다니면서 찾는 것을 스코프 체인이라 한다

 

     - 물론 현대 사회 좋은 컴퓨터들은 문제가 안되겠지만 지역변수로 했을 경우가 더 빠르긴한다.

     - 또한 수업 중 js 파일이 전역변수를 공유한다고 했으니 스코프체인 및 변수가 겹쳐서 대참사가 일어날 수 있다.

 

   4.3 전역 변수 억제법

     - 너무 당연한 내용이라 넣을까 말까 고민했지만...

     - 모든 코드를 함수 안에서만 쓰자

     - 변수 자체를 하나의 오브젝트로 만들어서 내부 데이터가 있는 방식으로 쓰자

     - 오브젝트로 만드는건 그다지 유용해 보이지않는다.

   

 

5. 모듈 패턴

   - 모듈 패턴이란?? 보통 일반적인 함수를 생각하면 마음 편하다.

   - 장점은 전역 변수 억제, 캡슐화, 구현 은닉성 까지 갖춤!

   - 모듈 패턴은 closure 을 기반으로 한다 

   - c++ 은 public, private, protected 가 있지만

   - js의 모듈에서는 public과 private가 반반 섞인 오염도를 막으면서 외부에서 접근도 어느정도 허용 가능하다.

 

   - 독자적인 모듈 스코프를 제공 받아 사용하는 것이고 해당 모듈 내부에서 var 키워드로 선언한 변수는

   - 전역 변수도 아니고 window 프로퍼티도 아니다.

   - 모듈 추가 후 

   - 사용법은 <script type="module" src="lib.mjs> </script>

   - 그러나 IE에서는 작동하지 않는다...

 

   - 모듈에 대한 자세한 설명은 49장에서 설명