# 자바스크립트 변수 선언 방식별 함수 스코프(function scope) 차이점 !

자바스크립트의 변수는 선언 방식에 따라 스코프(유효 범위)가 달라집니다.

 

• var : 함수 스코프(function scope)
• let, const : 블록 스코프(block scope)

여기서 "스코프"는 그 변수를 사용할 수 있는 코드의 범위를 말합니다.

---

함수 스코프란?

var로 선언된 변수는 함수 전체에서 유효합니다.
즉, if, for, { } 같은 블록({}) 내부에 선언해도 블록 밖에서 접근 가능합니다.

 

블록 스코프란?

let이나 const는 해당 블록({}) 안에서만 유효합니다. ECMAScript 2015(ES6)에서 추가된 기능입니다.

---

예제

(1) var는 함수 스코프

if (true) {
  var x = 5;
}
console.log(x); // 5

 

 

• var x는 if문 블록 {} 안에서 선언됐지만,
  자바스크립트는 블록 스코프를 인식하지 않고, 함수 전체(또는 전역)에 올림(hoisting).
• 그래서 실제로는 이렇게 동작합니다:

var x;         // 선언이 위로 끌어올려짐
if (true) {
  x = 5;
}
console.log(x); // 5

 

---

(2) let이나 const는 블록 스코프

if (true) {
  let y = 10;
}
console.log(y); // ReferenceError: y is not defined

 

• y는 if 블록 내부에서만 존재함.
• 블록이 끝나면 y는 메모리에서 사라짐.
• 그래서 외부에서 접근하면 에러가 남.

---

한눈에 정리

선언 방식	스코프 종류	if/for/블록 안에서 유효?	블록 밖 접근 가능?	비고
var	함수 스코프	❌ (블록 무시됨)	✅ 가능	ES5 이하 문법
let	블록 스코프	✅	❌ 불가	ES6 이후 문법
const	블록 스코프	✅	❌ 불가	상수 (값 재할당 불가)

 

---

왜 이런 설계일까?

옛날 JS(ES5 이전)는 함수 단위 언어 설계를 따랐다고 합니다. C나 Java처럼 블록 스코프를 가진 게 아니라,
“변수는 함수가 기준” 이었기 때문에 if나 for 안에서 선언해도 밖에서 쓸 수 있었던 것 입니다.

ES6 이후 개발자들이 많이 헷갈려해서,
현대 JS에서는 let과 const로 블록 스코프를 명확히 구분하도록 바뀌었습니다.

---

결론

var는 블록({})을 무시하고 함수 단위로만 스코프를 만든다.
그래서 if, for 안에서 선언해도 밖에서 접근 가능하다.

반면 let과 const는 블록 단위 스코프라,
블록이 끝나면 변수도 사라진다.