본문 바로가기
Book/JavaScript

[모던 자바스크립트 Deep Dive] #14~15. 전역변수의 문제점, let/const와 블록 레벨 스코프

by 이지이즤 2022. 3. 10.
728x90

 

▣ 14장: 전역 변수의 문제점
14.1 변수의 생명 주기
____14.1.1 지역 변수의 생명 주기
              지역 변수의 생명 주기는 함수의 생명 주기와 일치함.
____14.1.2 전역 변수의 생명 주기
             전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치함.

14.2 전역 변수의 문제점
      암묵적 결합 : 코드 어디서든 참조하고 변경 가능, 가독성 나빠짐, 의도치 않은 상태 변경 위험.
      긴 생명 주기 : 메모리 리소스 오랜 기간 소비, 변수 상태 변경 시간 길고 기회 많음 -> 오류 확률 큼.
      스코프 체인 상에서 종점에 존재 : 전역 변수가 가장 마지막에 검색됨(검색 속도 가장 느림).
      네임스페이스 오염 : 파일 분리되어도 하나의 전역 스코프 공유, 다른 파일 동일 이름 변수나 함수 -> 오류.

14.3 전역 변수의 사용을 억제하는 방법
____14.3.1 즉시 실행 함수
              즉시 실행 함수 : 함수 정위와 동시에 단 한 번만 호출됨.
                                    모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 됨.

    (function () {
      var foo = 10; // 즉시 실행 함수의 지역 변수
      // ...
    }());

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


____14.3.2 네임스페이스 객체
____14.3.3 모듈 패턴
              정보 은닉(캡슐화)

    var Counter = (function () {
      // private 변수
      var num = 0;

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

    // private 변수는 외부로 노출되지 않는다.(프라이빗 멤버)
    console.log(Counter.num); // undefined

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


____14.3.4 ES6 모듈



▣ 15장: let, const 키워드와 블록 레벨 스코프
15.1 var 키워드로 선언한 변수의 문제점
____15.1.1 변수 중복 선언 허용
              var은 중복 선언 가능. 초기화문이 없는 변수 선언문은 무시됨.
              의도치 않게 먼저 선언된 변수 값이 재할당되어 변경되는 부작용 발생.
____15.1.2 함수 레벨 스코프
            함수 레벨 스코프 : var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정함.

    var i = 10;

    // for문에서 선언한 i는 전역 변수이다. 이미 선언된 전역 변수 i가 있으므로 중복 선언된다.
    for (var i = 0; i < 5; i++) {
      console.log(i); // 0 1 2 3 4
    }

    // 의도치 않게 i 변수의 값이 변경되었다.
    console.log(i); // 5


____15.1.3 변수 호이스팅


15.2 let 키워드
____15.2.1 변수 중복 선언 금지
              let은 변수 중복 선언 시 에러 발생.
____15.2.2 블록 레벨 스코프
              블록 레벨 스코프 : let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정.
____15.2.3 변수 호이스팅
              let 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행됨.
              일시적 사각지대 : 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간.

    // 런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
    // 초기화 이전의 일시적 사각 지대에서는 변수를 참조할 수 없다.
    console.log(foo); // ReferenceError: foo is not defined

    let foo; // 변수 선언문에서 초기화 단계가 실행된다.
    console.log(foo); // undefined

    foo = 1; // 할당문에서 할당 단계가 실행된다.
    console.log(foo); // 1


____15.2.4 전역 객체와 let

 
15.3 const 키워드
      상수 선언 위해 사용.
____15.3.1 선언과 초기화
             const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야함.
____15.3.2 재할당 금지
              var, let과 달리 재할당 금지임.
____15.3.3 상수
             상수 : 재할당이 금지된 변수.
____15.3.4 const 키워드와 객체

15.4 var vs. let vs. const
      변수 선언에는 기본적으로 const을 사용하고 let은 재할당이 필요한 경우에 한정해 사용.
      const 키워드를 사용하면 의도치 않은 재할당을 방지하기 때문에 좀 더 안전함.

728x90

댓글