범위 scope

var function level scope

• 함수 밖에서 선언한 함수 스코프 변수는 전역 변수, 함수 안에서 사용하면 함수 내부에서만 접근이 가능합니다.
• 함수 스코프 레벨 변수는 메모리 누수, 디버깅이 어렵고 가독성이 떨어진다는 문제점이 있습니다.
  이러한 문제점을 피하고자 블록 스코프 변수를 생성하기 위한 let, const 키워드가 탄생했습니다. 출처

<script>
// 전역 변수 선언
var x = 100, y = 200, z = 300; 

// 함수 선언
function num() {
//var 지역변수 선언
  var x = "지역 변수"; //var = function level scope : 함수 내에서만 유효한 값. 바깥으로 빠져나오지 못함.
  y = "전역 변수"; // var 키워드 생략시 전역 변수로 인식. 지역 변수 내부에서 선언 했지만 값이 바깥으로 빠져나옴.
  
  //함수 내에서의 console.log
  console.log(x); //지역변수
  console.log(z); //300. 전역 변수는 모든 페이지에서 유효(전역 변수 선언값). 함수 내부에도 들어갈 수 있음
}

//함수 바깥에서의 console.log
console.log(x); //100(지역변수는 밖으로 나오지 못 해 전역변수 출력
console.log(y); //200
console.log(z); //300

num(); // 함수 호출. 함수 내에 있는 console.log만 출력
출력: 지역 변수 (var x)
     300 (y 전역변수)

console.log(x); // 100 함수 내부에 있는 x는 적용되지 않음. 외부에 지역 선언 값을 가져옴(맨위에)
console.log(y); // 전역 변수. 함수 호출 이후이기 때문.
console.log(z); // 300
</script>

let, const block level scope : 중괄호{ } 안에서만 유효하기 때문에 if, for문 등 다른 문에서도 사용 가능

• var는 블록레벨 스코프를 따르지 않음
• 블록은 0개 이상의 구문(statement)을 묶기위해 사용하고, 중괄호{}로 경계를 구분합니다.
• 블록 스코프 변수는 함수 밖에서 선언하면 함수 스코프 변수처럼 전역 변수가 됩니다. 블록 안에서 선언하면 자신을 정의한 블록과 하위 블록에서만 접근이 가능합니다.

<script>
let b = 200; //전역변수
let c = 300;

{
  let b = 300; //블록 내 선언
  c = 100; //전역변수(let 키워드가 없기 때문)
  console.log(`b: ${b}`); //b: 300. 블록 내 변수 재선언 때문
  console.log(c); // 100 블록 내 변수 재할당 때문
}

console.log(`b: ${b}`); //200. 전역변수값. 블록 내 재선언 값은 밖에서 접근 불가.
console.log(`c: ${c}`); //500. {}내에서 var 키워드 없이 전역으로 값이 재할당 됐기 때문.
</script>

차이점
함수 레벨 스코프: 함수 안에서 선언하면 함수 밖을 제외한 내부 어디서든 접근이 가능
블록 레벨 스코프: 블록 안에서 선언하면 자신을 정의한 블록과 하위 블록에서만 접근이 가능
참고하기 좋은 글