[리액트 기초 스터디] JavaScript 스코프(scope)

목차 (OPEN)

• 📑 JavaScript 스코프 (scope)
• 🟥 전역 스코프 (Golbal Scope)
• 🟧 지역 스코프 (Local Scope)
• 🟨 블록 스코프 (Block Scope)
• 🟩 함수 안의 함수 (중첩 함수 스코프)
• 📚 결론

 

 

 

 

 

 

📑 JavaScript 스코프 (scope)

코딩을 하다 보면, "이 변수는 여기서는 되는데 왜 전기서는 안 되지?" 같은 상황을 종종 만난다.

이런 혼란의 정체가 바로 스코프(scope, 변수의 유효 범위)다.

 

스코프는 변수와 함수가 접근 가능한 범위를 의미하는데,

쉽게 말하자면, 변수를 선언했을 때 그 변수가 살아있는 영역이라고 이해하면 된다.

 

 

---

🟥 전역 스코프 (Golbal Scope)

전역 스코프는 말 그대로 프로그램 전체 영역에서 접근 가능한 변수이다.

어디서든 불러 쓸 수 있으니까 편하긴 하겠지만,

너무 많이 쓰면 충돌이나 예기치 못한 버그를 만들 수 있으니 항상 주의해야 한다.

 

let a = 1; //전역 스코프

function funcA() {
  console.log(a); // 함수 안에서도 접근 가능
}

funcA(); // 1
console.log(a); // 1 (함수 외부에서도 당연히 호출 가능)

 

 

---

🟧 지역 스코프 (Local Scope)

지역 스코프는 특정 영역 안에서만 접근 가능한 변수이다.

따라서 해당 영역이 끝나면 변수는 사라지고, 더이상 접근할 수 없게 된다.

 

function funcB() {
  let b = 2; // 지역 스코프
  console.log(b); // 2
}

funcB();

console.log(b); // ❌ ReferenceError: b is not defined

 

b라는 변수는 funcB 함수 안에서만 유효하기 때문에

함수 밖에서 접그나려고 하면 에러가 발생한다.

 

 

---

🟨 블록 스코프 (Block Scope)

자바스크립트에서 let과 const로 선언한 변수는 블록 { } 안에서만 유효하다.

 

if (true) {
  let c = 1;
  console.log(c); // 1
}

console.log(c); // ❌ ReferenceError: c is not defined

 

이처럼 변수 c는 if 블록 안에서만 쓸 수 있고, 블록을 벗어나는 순간 사라지게 된다.

 

 

📌 참고

var는 블록 스코프가 아니라 함수 스코프만 지원하기 때문에

이런 상황에서도 접근이 가능하다고 한다.

 

 

---

🟩 함수 안의 함수 (중첩 함수 스코프)

함수 안에 또 다른 함수를 정의하면, 안쪽 함수는 바깥에서 호출할 수 없다.

 

function funcA() {
  function funcB() {
    console.log("hello");
  }
}

// 바깥에서 funcB를 실행하려고 하면
funcB(); // ❌ ReferenceError: funcB is not defined

 

이처럼 funcB는 오직 funcA 안에만 존재하는 함수이기 때문에 외부에서는 전혀 접근할 수 없다.

(이런 구조 덕분에 불필요하게 바깥에서 접근하지 못하게 막는 캡슐화 효과를 얻을 수 있다.)

 

 

---

 📚 결론

스코프에 대해 정리하면서 느낀 건, 변수를 어디에 선언하느냐에 따라 접근 가능 여부가 완전히 달라진다는 점이었다.

전역 변수를 쓰면 편할 것 같지만, 코드가 커질수록 충돌 위험이 크기 때문에

가능한 한 지역 스코프 안에서 변수를 관리하는 습관을 들이는게 좋을 것 같다.

(실제로 .. 모든 변수를 전역 변수로 선언하는 분을 뵌 적이 있었는데 .. 뭐만 하면 여기저기서 에러가 나서 너무 힘들었다 .........)

 

앞으로는 "이 변수가 어디까지 살아있어야 하는가?"를 먼저 고민하고,

꼭 필요한 최소 범위 안에서 변수를 선언하는 습관을 들여야겠다. 😎