[자바스크립트 ES6+ 기본] let 변수, const 변수

변수 구분

• 로컬(지역) 변수, 글로벌(전역) 변수
• 변수를 구분하는 이유는 기능과 목적이 다르기 때문이다.
• 글로벌 변수의 기능, 목적
  • 다른 js 파일에서 변숫값을 공유할 수 있다.
  • 파일에서 공통 변수 개념으로 사용한다.
  • 의도는 좋으나 처리 속도가 떨어진다.
• 로컬 변수의 기능, 목적
  • 빠르게 식별자를 해결하기 위해 가까운 스코프의 변수를 사용하려는 것이다.

글로벌 변수 오해

• 글로벌 변수는 글로벌 오브젝트의 로컬 변수이다.
  • var 키워드를 사용하는 것이 정상
• 그러나 var 키워드를 작성하지 않으면 글로벌 변수로 간주한다.

use strict 사용

• 함수 안에서 var 키워드를 사용하지 않으면 에러가 발생한다.
• ES5에서 도입했으나 근본적인 접근은 아니다.
• ES6+에서는 전체는 아니지만 “use strict”가 디폴트 환경이다.

블록 스코프 유형

function 블록

• function name(){} 도 블럭 스코프이다.
• function 안과 밖에 같은 이름의 let 변수를 선언할 수 있다.
  • 스코프가 다르기 때문
• function 밖의 let 변수를 function 안에서 사용할 수 있다.(클로저)

try-catch

• try 블록{} 기준으로 안과 밖에 같은 이름의 let 변수를 선언할 수 있다.

switch-case

• switch 문도 블록 스코프이다.
• switch 블록 기준으로 같은 이름의 let 변수를 작성할 수 없다.
• case, default는 블록 스코프가 아니다.

let 변수 개요

• 블록 스코프를 가진 변수이다.
• 변수가 선언된 블록이 스코프이다.
• 스코프 적용 기준: 블록{}, 문, 표현식
• 블록{} 안과 밖이 스코프가 다르다.
  • 변수 이름이 같아도 값이 대체되지 않는다.

let 변수와 var 변수 차이

• for()문에서 반복할 때마다 var 변수는 스코프를 갖지 않지만 let 변수는 스코프를 갖는다.

let 변수와 this

• 글로벌 오브젝트에서 let 변수를 this 로 참조할 수 없다.

다수의 js 파일 사용

• 모든 js 파일에서 글로벌 오브젝트에 작성한 var 변수와 let 변수를 공유한다.
• 하지만 블록 안에 작성하면 공유하지 않는다.

정리

• 글로벌 오브젝트에 작성
  • var 변수: window에 설정, 공유
  • let 변수: Script에 설정, 공유
  • { let 변수 }: 블록에 설정, 공유하지 않는다.
    • 글로벌 오브젝트에서만 사용하는 로컬 변수로 사용된다.
• 함수에 작성
  • var 변수, let 변수: Local
  • { let 변수 }: Block

호이스팅

ES5의 실행 콘텍스트 처리 순서

1. 함수 선언문 설정
2. 변수 이름을 바인딩, 변숫값은 undefined
3. 소스 코드 실행

• let 변수는 호이스팅(Hoisting)되지 않는다. 즉, let 변수 앞에서 변수를 사용할 수 없다.

try {
    log(sports);
} catch(e) {
    log("호이스팅 불가");
};
let sports = "축구";
// 호이스팅 불가

const 변수

• 값을 바꿀 수 없는 변수 선언
• JS에서 상수는 대문자 사용이 관례이다.
• const 변수 전체를 바꿀 수는 없지만 Object의 프로퍼티 값을 바꿀 수 있다. 또한 배열의 엘리먼트 값도 바꿀 수 있다.