함수 레벨 스코프 vs 블록 레벨 스코프

함수 레벨 스코프란.

말 그대로 함수 코드 블록만 지역 스코프로 인정하는 것이다.

var x = 1;

function foo() {
  var x = 2;
  console.log(x); // 2
}

foo();
console.log(x); // 1

위 예시같이 같은 변수명을 가졌다고 하더라도 다른 값이 나오는 이유다.
var가 여기에 속한다.

블록 레벨 스코프란.

중괄호로 되어있는 모든 코드 블록을 지역 스코프로 인정하는 것이다.

let x = 1;

{
  let x = 2;
  let y = 1;
}

console.log(x); // 1
console.log(y); // ReferenceError: y is not defined.

이게 var은 적용되지 않는다.
let & const가 여기에 속한다.

var x = 1;

{
  var x = 2;
}

console.log(x); // 2

왜냐하면, var는 함수 레벨 스코프를 따르기 때문이다.
그래서 호이스팅이 일어나는 이유이기도 하다.

추가 고려 사항

레벨 스코프만 신경써야 하는 것이 아니다.
전역 변수도 생각해야 한다.
var 변수는 다른 .JS파일에서도 읽을 수 있고,
심지어는 window를 통해 불러올 수도 있다.
그만큼 사용을 할 때에는 고려를 많이 해야 한다.