변수 타입 (var, let, const)와 스코프 연산자(scope) 개념

var, let, const 의 차이

• var은 function scope(함수블록 {}이외 모든 변수는 전역 변수)이고 
  let과 const는 block scope(모든 코드 블록 -if, for 등에서 선언된 변수는 해당 코드 블록 내에서만 유효)임
• var은 재선언 및 재할당이 가능하고, hoisting이 가능하다.
• var은 초기값이 없으면 자동으로 undefined를 초기값으로 메모리 할당하므로 에러가 발생하지 X
• let은 한번 선언 한 후로는 재선언이 불가능하다. 다만 재할당은 가능, const는 상수로서 변하지 않는 값이기에
  재선언 및 재할당이 불가능하다.
• let & const는 hoisting이 불가능(Template Dead Zone이 선언과 초기화 사이에 생긴다.)
• 단, const로 변수선언을 하더라도, object 자체 변경은 불가능하지만, 내부의 속성 및 값 변경은 가능하다.

요약

👉 const 키워드

• 유효 범위: 블록 스코프 / 함수 스코프
• 값 재할당: 불가능
• 재선언: 불가능 

👉 let 키워드

• 유효 범위: 블록 스코프 / 함수 스코프
• 값 재할당: 가능 
• 재선언: 불가능

👉 var 키워드

• 유효 범위: 블록 스코프 / 함수 스코프
• 값 재할당: 가능
• 재선언: 가능

for (let i = 0; i < 10; i++) {
  console.log(i);
}

// 전역 스코프에서 선언한 변수 i는 존재하지도 않기에 
// RefenceError 가 발생한다.
console.log(i)

• 블록 스코프 안에서는 let과 const 키워드로 선언한 변수는 스코프 안에서만 참조가 가능하다
• 그런데 var 키워드로 선언한 변수는 블록 스코프를 무시하고 스코프 울타리 밖에서도 접근이 가능.
  (단 var은 오직 함수 스코프만 따른다.)

for (var i = 0; i < 10; i++) {
  console.log(i)
}

// var 키워드로 선언한 변수 i 는 지역 스포프에서 선언되었지만 모든 스코프에 접근이 가능하다.
console.log(i) // 9

• var키워드로 선언한 변수는 오직 함수 스코프만 따른다.

변수 타입별 Scope의 차이

• scope는 변수의 유효범위이다.
• 유효범위를 결정하는 두 가지 요소로 프로그래밍 구문만으로 유효범위를 정하는 lexical scope와 프로그램
  실행 중에 유효범위를 지정하는 dynamic scope가 있다. (lexical scope는 함수를 호출할 때가 아닌 함수를
  선언할때 scope가 발생하는 개념)
• JS 변수는 변수의 유효범위에 따라서 전역변수와 지역변수로 나눈다.
• scope chain은 내부함수부터 외부로 단계적으로 변수를 찾아가는 순서이다.(내부함수에서 외부함수의
  변수에 접근 가능하지만, 외부함수에서 내부함수 변수에 접근할 수 없다.)

스코프와 관련한 변수 선언시 주의점

👉  전역 객체(window)의 이해

• Window 객체는 only 브라우저에만 존재하는 객체이다.
• 브라우저의 창(window)를 의미하는 객체이다.
• 그런데 별게로 전역 영역을 담고 있기도 하다.
• 그래서 함수 선언식(function declearation) 으로 함수를 선언하거나 var키워드로 변수를 선언하면 
  window 객체에 속해진다.

👉 전역 변수는 최소화 하기 

• 가장 바깥 스코프에 정의한 변수가 전역변수이다.
• 즉, 어디서든 접근이 가능하다.
• 전역 변수를 최소화 하면 side effect(의도하지 않은 로직에 의한 문제 발생)을 줄일 수 있다.
• 그런데 그러한 전역 변수를 var을 이용해 선언하는 경우도 문제가 발생할 수 있다.
  • 전역 변수는 어디서나 접근이 가능
  • var키워드는 block scope(블록 스코프)를 무시
  • 재선언 & 재할당 가능
  • 전역 변수를 var로 선언해 브라우저 내장 기능을 못하게 만들수 있다.

👉 선언 없는 변수 할당 금지

• 선언 없이 변수를 할당하면 해당 변수에는 var로 선언된 전역 변수처럼 취급한다.
• 실수를 방지하기 위해 Strict Mode(엄격한 모드)를 사용하자.
  • Strict Mode는 브라우저 보다 더 엄격한 모드에서 작동할 수 있도록 도와준다.
  • "선언 없는 변수 할당"의 경우도 에러로 판단해준다.
  • 적용하기 위 .js파일 상단에 "use strict" 라고 입력하면 된다. 

 

참고 자료

변수 타입(var, let, const)과 스코프(scope) 개념

[JavaScript] 스코프(Scope)와 변수 선언 (var, let, const 키워드 차이점) - 하나몬