JavaScript - var, let, const, 전역 변수

아래 내용은 모던 자바스크립트 Deep Dive 14챕터 전역 변수의 문제점과 15챕터 let, const 키워드와 블록 레벨 스코프를 읽고 정리한 내용입니다.

 

Keyword 1. var 키워드로 선언한 변수의 문제점

1. 변수의 중복 선언이 허용된다.

같은 스코프 내 중복 선언이 허용된다.

초기화 문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고, 초기화 문이 없는 변수 선언문은 무시된다.

2. 함수 레벨 스코프를 사용한다.

함수의 코드 블록만을 지역 스코프로 인정한다.

함수 외부에서 var 키워드로 선언한 변수는 코드 블록내에서 선언해도 모두 전역 변수가 된다. 

3. 변수 호이스팅

변수 선언문 이전에 참조가 가능해, 코드의 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남김

4. 전역 객체의 프로퍼티

 

Keyword 2. let 키워드

1. 변수의 중복 선언 금지

let 키워드로 중복 선언 시 문법 에러 발생

2. 블록 레벨 스코프

모든 코드 블록 (함수, if문, for문, while문, try/catch문)을 지역 스코프로 인정

함수도 코드 블록이므로 스코프를 만든다. 이때 함수 내의 코드블록은 함수 레벨 스코프에 중첩됨

let i = 10;							
function foo() {
  let i = 100;					
  for (let i = 1; i < 3; i++) {	
    console.log(i); // 1, 2		
  }								
  console.log(i); // 100		
}									
foo();								
console.log(i); // 10

3. 변수 호이스팅이 발생하지 않는 것처럼  동작

var는 선언 단계와 초기화 단계가 동시에 진행되지만, let은 선언 단계와 초기화 단계가 분리되어 진행됨

런타임 이전 자바스크립트 엔진에 의해 선언 단계가 실행되나, 초기화는 변수 선언문에 도달했을 때 실행됨

선언 후 초기화 되기 전까지는 변수를 참조할 수 없는데, 이 사이를 일시적 사각지대(TDZ)라고 함

let foo = 1;
{
  console.log(foo); // undefined
  let foo = 2;
}

4. 전역 객체의 프로퍼티가 아님

 

Keyword 3. const 키워드

- 상수(재할당이 금지된 변수, 상수 사용 시 상태 유지와 가독성 및 유지보수 편의 증가, 대문자로 선언해 상수임을 분명히 나타냄)를 선언하기 위해 사용됨

1. const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화 해야함

초기화하지 않을 시 SyntaxError 발생

2. 블록 레벨 스코프

3. 변수 호이스팅이 발생하지 않는 것처럼 동작

4. 재할당은 금지되나, '불변'을 의미하진 않음

변경 불가능한 원시 값인 경우 재할당 없이 변경할 방법이 없지만, 객체는 재할당없이도 직접 변경가능하기 때문

 

var, let, const 정리

- ES6 사용 시 var 키워드 사용하지 않기

- 재할당이 필요한 경우 한정해 let 키워드를 사용하기, 최대한 변수의 스코프를 좁게 만들기

- 변경이 불필요하고 읽기 전용인 경우 const 키워드 사용하기

 

Keyword 4. 전역 변수

전역 변수를 반드시 사용해야 할 이유가 없다면 지역 변수를 사용해야 함

'변수' 이전 글 참고 : 2022.10.05 - [FRONT-END/JAVASCRIPT] - Javascript - 메모리, 식별자, 변수, 변수 호이스팅

변수의 생명주기 : 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에서 반환되는 시점

전역 변수의 생명 주기는 애플리케이션의 생명 주기와 일치, 하지만 함수 내부에서 선언된 지역 변수는 함수의 생명 주기와 일치

 

전역 변수의 문제점

1. 암묵적 결합 : 모든 코드가 전역 변수를 참조하고 변경 가능2. 긴 생명주기 : 메모리 리소스를 오랜 기간 소비하게 됨3. 스코프 체인 상 종점에 존재 : 변수 검색 시 전역 변수가 가장 마지막에 검색되어 검색 속도 느림4. 네임스페이스 오염 : 파일이 분리되어있어도 하나의 전역 스코프를 공유

 

전역 변수 사용 억제 방법

1. 즉시 실행 함수를 사용모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역변수가 됨2. 네임스페이스 객체 사용전역에 네임스페이스 역할을 담당할 객체 생성 후 전역변수처럼 사용하고 싶은 변수를 프로퍼티로 추가3. 모듈 패턴클래스를 모방해 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만드는 것자바스크립트의 강력한 기능인 클로저 기반으로 동작

하며 캡슐화 구현 가능

4. ES6 모듈파일 자체의 독자적인 모듈 스코프를 제공

 

---

추가 용어 정리

- 전역 객체 : 코드 실행 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이다. 표준 빌트인 객체와 환경에 따른 호스트 객체, 그리고 var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.

- 캡슐화 : 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것, 캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라 한다.