[모던 자바스크립트 Deep Dive] 13 - 15 장

13. 스코프

스코프

• 식별자가 유효한 범위
• 종류
  • 전역 스코프
  • 지역 스코프
  • 함수 레벨 스코프
  • 동적 스코프 : 함수를 호출한 위치에 따라 함수의 상위 스코프 결정
  • 렉시컬 스코프(정적 스코프) : 함수를 정의한 위치에 따라 상위 스코프 결정
• var : function-level-scope 중복 선언 가능
• let, const : block-level-scope 중복 선언 불가능
• 매개변수 : inner-function-level-scope

전역	지역
코드의 가장 바깥 영역	함수 몸체 내부
어디서든 참조 가능	본인 스코프, 하위 스코프 참조 가능
우선순위 ↓	우선순위 ↑

14. 전역 변수의 문제점

변수 생명 주기

• 선언된 위치에서 생성 → 소멸
• 지역 변수 생명 주기 = 함수의 생명 주기
• 전역 변수 생명 주기 = 전역 객체 생명 주기(window, 즉 웹페이지 닫을 때까지 유효)
• 호이스팅은 스코프 단위로 동작

전역 변수의 문제점

• 암묵적 결합 허용 —→ 의도치 않게 변경 가능, 가독성 bad
• 긴 생명 주기 —→ 메모리 소비, 오류 발생 확률 ↑
• 스코프 체인 상 종점에 존재 —→ 검색 속도 가장 느림
• 네임스페이스 오염 —→ 파일 분리되어 있어도 전역 스코프 공유, 예상치 못한 결과 발생

전역 변수 사용 억제 방법

• 변수의 스코프는 좁을수록 좋다
• 즉시 실행 함수
  • 함수 정의와 동시에 단 한 번만 호출되는 함수
  • 라이브러리 등에 자주 사용됨
• 네임스페이스 객체
  • 전역 네임스페이스 객체 생성
  • 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가
  • 네임스페이스 안에 또 다른 네임스페이스 프로퍼티로 추가해서 계층적 구성 가능
  • 이 자체가 전역 변수에 해당되므로 유용하지 않음
• 모듈 패턴
  • 클로저 기반 동작
  • 클래스를 모방 —> 관련 변수, 함수 모아서 즉시 실행 함수로 감싸 하나의 모듈 생성
  • 캡슐화 구현 가능 —> 프로퍼티 & 메서드 묶는 것, 정보 은닉 가능

  var Count = (function () {
    var num = 0;
  
    return {
      increase() {
        return ++num;
      },
      decrease() {
        return --num;
      },
    };
  })();
  
  console.log(Count.num); // undefined (즉시 실행 함수의 지역 변수이므로 외부에서 사용 불가능)
  console.log(Count.increase()); // 1
  console.log(Count.decrease()); // 0
  

• ES6 모듈
  • 전역 변수 사용 불가
  • 파일 자체의 독자적인 모듈 스코프 제공 —→ var는 더이상 전역 변수가 아님
  • script 태그에 type=”module” 속성 추가

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

var 변수의 문제점

• ES5까지는 var 키워드밖에 없었음
• 변수 중복 선언 허용
• 중복 선언될 때 초기화문이 없는 선언문은 무시
• 함수 레벨 스코프 —→ 함수 외부에서 선언할 경우 코드 블록 내에서 선언해도 지역 변수가 됨
• 전역 변수 남발하게 됨
• 변수 호이스팅에 의해 가독성을 떨어뜨리고 오류 발생 가능성 높임

let 키워드

• var의 단점 보완 위해 새로 생긴 키워드
• 변수 중복 선언 금지 (SyntaxError)
• 블록 레벨 스코프
• 변수 호이스팅 발생하지 않는 것처럼 동작 (ReferenceError) —→ 초기화 할 때까지 변수 참조 불가능
• window의 프로퍼티가 아니기 때문에 window.let전역변수 접근 불가능

const 키워드

• 선언과 동시에 초기화 해야 한다. (SyntaxError)
• 변수 호이스팅 발생하지 않는 것처럼 동작 (ReferenceError) —→ 초기화 할 때까지 변수 참조 불가능
• var와 let과는 다르게 재할당 불가능 (TypeError) ——> 상수
• 유지보수성 향상
• 일반적으로 대문자로 선언 —→ 스네이크 케이스로 표현( _로 연결)
• 객체를 할당할 경우 객체의 프로퍼티를 변경해 변경 가능

상황에 따른 키워드 사용

• 변수 선언에는 기본적으로 const 사용
• 재할당이 필요한 경우에는 let을 한정적으로 사용 —→ 변수의 스코프 최대한 좁게
• ES6에서는 var사용 x