🚧자바스크립트 스코프( 유효 범위 ) && let var const

🚧스코프

JS에서 생성된 '변수' 또는 '함수'는 모두 유효 범위를 갖게됨

유효 범위❓
👉 변수 & 함수가 영향을 미치는 범위, 영어론 '스코프'

🤩 스코프는 JS 뿐만 아니라 모든 프로그래밍 언어에서 중요한 개념
✅ JS로 프로그래밍 하기 위해선 스코프에 대한 개념 확실히 이해하고 있어야 함

---

🐱‍💻여러 개의 스코프가 있는데 하나씩 알아보자⚡

💡스코프는 크게 '전역' & '지역'으로 분류

📌전역 스코프

let globalNum = 100;

function testFunc() {
  console.log(globalNum);
}

testFunc();  // 100
console.log(globalNum);  // 100

출력 결과 살펴보면 콘솔 탭에 숫자 100이 2번 출력된 걸 볼 수 있음👀

전역 공간에 선언한 globalNum 변수는 전역 스코프를 갖음✔
전역 공간에서든 이 testfunk 함수의 내부에서든 globalNum 변수에 항상 접근🙆‍♀️

전역에 선언된 변수➡어디에서나 접근 가능한 '전역 스코프' 갖기 때문에
👉 '전역 변수' 혹은 '외부 변수' 라고 부름

📌지역 스코프

💥로컬 스코프, '특정 지역'에서만 접근 할 수 있는 범위

let globalNum = 100;

function testFunc() {
  let innerNum = 50;
  console.log(globalNum);  // 100
  console.log(innerNum);  // 50
}

testFunc();  // 100 50
console.log(globalNum);  // 100
console.log(innerNum);  // 에러

이전관 다르게 에러 발생하는 걸 볼 수 있음
🚨innerNum 변수가 선언되지 않았다는 오류 발생🚨

❗발생 이유 : innerNum는 전역이 아닌 testfunk 함수의 내부에
특정 지역에서 선언된 함수이기에 '지역 스코프'를 갖는 변수이기 때문

innerNum은 함수 내부에서만 접근 가능⭕

이렇게 바깥에서 식별자에게 접근하려 한다면 오류 발생🚨

✅특정 지역에서만 유효한 범위를 갖는 변수➡'지역 변수'✅

👇이번엔 코드의 흐름을 같이 봐보자🧐

let global = '나는 전역 변수입니다';

function outerFunction() {
  let outer = '나는 외부 함수의 변수입니다';

  function innerFunction() {
    let inner = '나는 내부 함수의 변수입니다';
    console.log(global);  // ✅ '나는 전역 변수입니다'
    console.log(outer);   // ✅ 클로저로 접근 → '나는 외부 함수의 변수입니다'
    console.log(inner);   // ✅ '나는 내부 함수의 변수입니다'
  }

  innerFunction();         // ✅ 위의 3개 콘솔 실행
  console.log(global);     // ✅ '나는 전역 변수입니다'
  console.log(outer);      // ✅ '나는 외부 함수의 변수입니다'
  console.log(inner);      // ❌ ReferenceError: inner is not defined
}

outerFunction();

🔥 핵심 포인트 요약

• 전역 변수 global➡어디서든 접근 가능⭕
• outer➡outerFunction 안에서만 접근 가능⭕
• inner➡innerFunction 안에서만 접근 가능⭕
  🚨outerFunction에서 console.log(inner) 하면 에러난 것🚨

🔻지역 스코프 - 함수 & 블록 스코프

function print() {
  // 특정 코드를 반복적으로 실행할 수 있는 반복문
  // (초기화식 조건식 증감식)
  for(let i=0; i<10; i++) {
  	// 코드를 해당 조건식에 만족할 때까지 반복적으로 수행
    console.log(i);  // 0~9까지
  }
  console.log(i);  // 오류 발생
}

print();  // 함수 호출

코드 실행하면 0~9까지 값이 순서대로 출력되지만
마지막에 오류가 발생한 걸 볼 수 있을거임👀
🚨print 함수에 i가 정의되지 않아서 오류 발생🚨

🧱let 이라는 키워드로 작성된 변수
👉 { 블록 단위에서만 유효한 '블록 스코프'를 갖기 때문 } 🤓

이전 코드에서 let➡var로 수정하면
변수 i를 '함수 스코프'를 갖는 변수로 만들 수 있음✨

코드 실행해보면 이번엔 오류 발생하지 않고
숫자 0~10까지 전부 출력되는 것을 볼 수 있음❗

💁‍♀️ let & var

이 둘의 차이점은 let 키워드로 선언된 변수는 '블록 스코프',
var 키워드로 선언된 변수는 '함수 스코프'를 갖음

❌let 재할당 불가❌

⭕var 재할당 가능⭕
👉 같은 이름의 변수 여러 번 재선언 가능
기존에 선언된 변수는 무시되는 것을 볼 수 있음

JS 초기 버전에 도입된 변수 선언 방식으로
오래된 변수 선언 키워드( 잘 사용하지 않음✔ )

'함수 스코프', 함수 내부 어디서든 접근 가능
❌함수 외부에선 접근 불가❌

◽ let & const
👉 JS ES6 버전에 도입된 선언 방식
🧱 '블록 스코프' 지원하며 { 코드 블록 }의 내부에서만 유효

🧱'블록 스코프'➡블록 내부에서 같은 이름의 변수 재선언 시 에러 발생🚨
🆙 코드의 신뢰성 & 예측 가능성 높인다는 특징 ⤴

var로 선언된 변수가 let 으로 선언된 변수보다 유연하다고 생각할 수 있지만
var로 변수 선언 시 특정 변수가 이미 선언되어 있는지 판단🙅‍♀️
어디에서 어떻게 사용되고 있는지 파악 어렵🥴
💫단점 : 프로그램 상의 오류 발생시킬 수 있게됨💫

var : let과 다르게 변수 중복해서 선언할 수 있는 이유
👉 '함수 스코프' 가지며 '호이스팅' 이라는 특성 갖기 때문🎣