변수의 생명 주기

Chan·2023년 1월 12일

JavaScript 변수의 생명주기

javascript

목록 보기

3/6

변수의 생명 주기

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

전역 변수의 생명 주기

함수와 다리 전역 코드는 코드가 로드 되자마자 곧바로 해석되고 실행되어 웹페이지를 닫을 때까지 유효
var 키워드로 선언한 전역 변수의 생명 주기 = 전역 객체의 생명 주기

지역 변수의 생명 주기

함수가 종료될 때 지역 변수도 같이 소멸된다. 즉 지역 변수의 생명 주기 = 함수의 생명 주기

전역 변수의 문제점

암묵적 결합 유효 범위가 크므로 상태가 변경될 수 있는 위험도가 높다.
긴 생명 주기 메모리 리소스에 계속 값이 남아 있으므로 오랜 기간 소비
네임페이스 오염 파일이 분리되어 있어도 하나의 전역 스코프를 공유할 일이 생길 수 있음

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

즉시 실행 함수

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

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

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

네임스페이스 객체
```
var MYAPP = {}; // 전역 네임스페이스 객체

MYAPP.name = 'Lee';

console.log(MYAPP.name); // Lee
```
전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법 → 전역 네임스페이스 객체가 생성되어 이 자체가 전역 변수에 할당되므로 좋은 방법 이라고 얘기 못함
모듈 패턴 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸는 것 모듈 패턴은 전역 변수의 억제 + 캡슐화 가능 javascript에는 public, private, protected가 존재하지 않는데 해당 방법으로 이와 비슷한 기능을 구현하는 것이 가능
```
var Counter = (function() {
  //private 변수
  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
```
Counter의 스코프 밖에서 바라볼 때는 어떤 객체도 직접 접근 불가 즉시 실행 함수는 한 번만 실행되므로 Counter이 호출될 때마다 num의 값이 0으로 계속 초기화되지 않음 즉시 실행 함수가 반환한 closure ( increase, decrease) 는 Counter 변수에 할당됨
var ,let, const
자바스크립트에서 변수 선언 및 특징 자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거친다.
- 선언 : 자바스크립트 엔진에 변수의 존재를 알린다.
- 초기화 : 변수를 처음에 undefined로 초기화를 한다.
  
  자바스크립트에서 변수는 호이스팅이라는 특징이 존재한다.
```
console.log(kmj) // output: undefined
var kmj
```
- 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 것을 말한다.
- 즉 런타임 때 실행 되는 것이 아닌 그 이전 단계에서 먼저 실행 된다.
  
  스코프
  
  각 변수는 선언된 위치에 따라 변수의 유효범위가 정해진다.
- 전역에 선언된 변수 → 전역 스코프
- 지역에 선언된 변수 → 지역 스코프
  
  var의 문제점
- 변수 중복 선언이 가능하다.
```
var i = 0; 
for(var i =0; i < 5; i++)
	console.log(i); // 0 1 2 3 4 
console.log(i); // 4 
```
  → for 문에서 var 변수에 의해 i의 값이 갱신 되어 값이 재 할당 됨을 볼 수 있다.
- 변수 선언문 이전에 변수를 참조하면 undefined를 반환한다. ( 호이스팅에 의해 )
- 함수 외부에서 선언된 변수는 모두 전역 변수로 된다.
  
  → let, const는 해당 문제점을 해결한다.
  
  let
- 변수 중복 선언을 금지한다.
  
  변수 값이 재할당 되어 생기는 부작용 억제
- 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.
  
  (if, for, while, try/catch)
```
let a = 1

if (true) {
  let a = 5
}

console.log(a) // output: 1
```
  var로 선언을 했으면 마지막 결과에서 5가 나오지만
  
  let으로 선언을 했기 때문에 1이 나온다.
- 변수 호이스팅이 발생하지 않는 것처럼 작동
```
**let 키워드로 선언한 변수는 `선언` 단계와 `초기화` 단계가 분리되어 진행** 

⇒ var에서는 선언하자마자 초기화 단계가 함께 진행 

⇒ let에서는 변수 초기화 단계 이전에 변수 접근 시 참조 에러 발생 

```jsx
  /// 런타임 이전에 선언 단계 실행
  // 아직 변수 초기화는 되지 않음 
  
  console.log(foo); // ReferenceError 
  
  let foo; // 변수 선언문에서 초기화 단계 실행
  console.log(foo);
  
  foo = 1; // 할당문에서 할당 단계 실행 
  console.log(foo); // 1 
```
```
  하지만 다음 예제를 보면 let도 함수 호이스팅을 한다는 것을 알 수 있다.
```
let foo = 1;
{
	console.log(foo); // reference error 
	let foo = 2; 
}
```
  → 위에 전역으로 선언된 let foo = 1; 이 있으므로 console.log(foo)에서 1이 출력해야 할 것 같지만 let foo =2; 에서 호이스팅 됐기 때문에 참조 에러 발생
  
  const
- const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화
```
const foo = 1;
```
- 재할당 금지
```
let foo = 1;
foo = 2;

const bar = 1;
bar = 2; // TypeError: Assignment to constant variable.
```
  let 은 재할당이 가능하고 const는 재할당이 불가능

Chan

이전 포스트

apply, call, bind method

다음 포스트

변수의 생명 주기

javascript

변수의 생명 주기

전역 변수의 생명 주기

지역 변수의 생명 주기

전역 변수의 문제점

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

var ,let, const

apply, call, bind method

클로저

0개의 댓글