자바스크립트 변수의 생명주기, 모듈패턴, var const let 차이

p.200

변수의 생명주기

전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다.

 

4.4 "변수 선언의 실행 시점과 변수 호이스팅"에서 살펴보았듯이

변수 선언은 선언문이 어디에 있든 상관없이 가장 먼저 실행된다.

 

그러나 엄밀히 말하자면 위 설명은 전역 변수에 한정된 것이다.

 

함수 내부에서 선언한 변수는 함수가 호출된 직후에

함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다.

var foo = function () {
	//변수 x의 생명주기 1.변수 x 생성
    var x = 'local'; // 2. 변수 x에 값 할당
    console.log(x);
    return x; // 3. 변수 x 소멸
}

Quiz.?

var x = 'global';

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

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

이유 : foo(); 가 실행되는 순간 지역변수 x가 호이스팅되고 undefined로 초기화되어 있다.

 

전역변수의 문제점

- 암묵적 결합 : 모든 코드가 전역변수를 참조하고 변경할 수 있는 암묵적 결합을 허용

- 긴 생명주기 : 전역 변수는 생명 주기가 길기 때문에 메모리 리소스도 오랜 기간 소비한다. 중복선언도 일어난다.

- 스코프체인 상에서 종점에 존재 : 가장 상위 스코프에 전역변수가 속하기 때문에 전역 변수의 검색 속도가 가장 느리다.

- 네임스페이스 오염 : 다른 파일 내에서 동일한 이름으로 명명된 전역변수,함수가 같은 스코프 내에 존재 할 수 있다.

 

p.206

모듈패턴

//즉시실행함수를 사용하여 객체를 반환
//즉시실행함수는 재 호출이 안되기 때문에 변수를 초기화 하는 일이 없음

var Counter = (function () {

// 외부로 노출하고 싶지 않은 변수나 함수는 반환하는 객체에 추가하지 않으면 
// 외부에서 접근할 수 없는 프라이빗 멤버  
  var num = 0;

// 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환하는데 이를 퍼블릭멤버
  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    },
  };
})();

console.log(Counter.increase()); //1
console.log(Counter.increase()); //2

//클로저와 연관이 깊음
//전역변수 억제 가능, 정보은닉가능, 캡슐화 가능

p.208

let, const 키워드와 블록 레벨 스코프

 

📌 var 키워드의 문제점

- 변수 중복선언 허용

- 함수레벨 스코프를 따름

- 변수호이스팅으로 인해 가독성이 떨어지는 코드가 발생

 

🎉ES6 let , const 키워드

📌 let 키워드

- 변수 중복선언 금지

- 블록 레벨 스코프

- 전역객체에 속하지 않는다 : var 키워드의 경우 선언하면 window(window.x 로 접근가능)의 프로퍼티가 된다.

    => let은 window 프로퍼티에 속하지 않는다.

- 🔥변수 호이스팅 : 변수 호이스팅이 발생하지 않는 것처럼 행동한다.

   그러나 사실은 호이스팅이 발생한다.

   정확히는 선언단계와 초기화 단계를 분리시켜 선언만하고 초기화를 하지 않아

   변수를 참조할 수 없는 구간인 "일시적 사각지대" 에 놓인다. 

let foo = 1; // 전역변수
{
    console.log(foo); //참조에러
    let foo = 2;
}

// 윗 예제에서 호이스팅이 일어나지 않았다면 전역변수인 1이 출력되어야한다.
// 그러나 호이스팅은 일어났으나 초기화단계를 하지 않아 일시적 사각지대에 놓여
// 참조에러를 발생시켰다.

📌 const 키워드

- 블록레벨 스코프

- 재할당 금지되기 때문에 상수로 이용한다. (대문자로 변수를 선언하면 상수임을 명확히 나타낸다.)

- 선언과 동시에 초기화가 반드시 이루어져야 한다.

const foo; // SyntaxError: 'const' declarations must be initialized.

 

🚀 var  VS  const  VS  let

- ES6에서는 var 키워드를 사용하지 않는다.

- 재할당이 필요한 경우에 한정해 let 키워드를 사용한다.

- 변경이 필요하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const 키워드를 사용한다.

- 변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많기 때문에 일단 const를 필요에 따라 let으로 변경한다.