자바스크립트 변수(var, let, const)와 스코프(function vs block) - FE study5

1. var let const

1. var : 변수 재선언 가능

const, let : 변수 재선언 불가능

2. const : 변수 재할당 불가능 (상수)

let : 변수 재할당 가능

3. var : functional-scope 로 호이스팅됨

const, let : block-scope 로 호이스팅됨

console.log(a)
var a = "hi"

출력 : undefined

console.log(b)
const b = "hi"

출력 : 에러!

즉, let const는 변수를 선언과 초기화 후, 참조해야한다.

2. function-level scope vs block-level scope

1. function-level scope

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

var foo = 123; // 전역 변수

console.log(foo); // 123

{
  var foo = 456; // 전역 변수
}

console.log(foo); // 456

2. block-level scope

모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

let foo = 123; // 전역 변수

{
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

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

[참고] https://poiemaweb.com/es6-block-scope

3. const, let 의 호이스팅

깊이 이해하지는 못했지만

var 는 호이스팅시 선언과 동시에 undefined가 초기화되고

let과 const 는 호이스팅은 되지만, undefined로 초기화되는 것이 아니라 초기화가 필요한 상태가 되며, 이 때 변수를 불러올 경우 ReferenceError가 발생한다.