Understanding Scope in JavaScript
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

JavaScript에서 스코프 이해하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • 초보자 및 중급자 개발자
  • JavaScript의 스코프 개념을 이해하고자 하는 프론트엔드 개발자
  • 난이도: 기초 개념 설명 (변수 범위, var/let/const 차이점 등)

핵심 요약

  • 전역 스코프(Global Scope): var로 선언된 변수는 전역에서 접근 가능하며, 전역 오염(Global Pollution) 위험 존재
  • 함수 스코프(Function Scope): 함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근 가능 (var 사용 시)
  • 블록 스코프(Block Scope): let/const로 선언된 변수는 {} 블록 내에서만 유효 (ES6+ 기준)

섹션별 세부 요약

1. 전역 스코프(Global Scope)

  • 전역 스코프는 브라우저 환경에서 최상위 레벨에 선언된 변수/함수를 의미
  • var로 선언된 변수는 전역 객체(window 객체)에 자동 추가되어 전역에서 접근 가능
  • 예: var globalVar = 10;console.log(window.globalVar)로 접근 가능

2. 함수 스코프(Function Scope)

  • 함수 내부에서 var로 선언된 변수는 해당 함수 내부에서만 유효
  • 외부에서 접근 불가능하며, 중첩 함수 간 스코프 허용 (closure 생성 가능)
  • 예:
  • function example() {
      var funcVar = 20;
      console.log(funcVar); // 20 출력
    }
    console.log(funcVar); // ReferenceError 발생

3. 블록 스코프(Block Scope)

  • let/const로 선언된 변수는 {} 블록 내부에서만 유효
  • if, for, while 등의 블록 내에서 선언 시 해당 범위에서만 접근 가능
  • 예:
  • if (true) {
      let blockVar = 30;
      console.log(blockVar); // 30 출력
    }
    console.log(blockVar); // ReferenceError 발생

결론

  • 실무 팁: let/const를 사용해 블록 스코프를 활용하면 전역 오염 방지 가능
  • 코드 예시:
  • function createCounter() {
      let count = 0;
      return function() {
        return count++;
      };
    }
    const counter = createCounter();
    console.log(counter()); // 0
    console.log(counter()); // 1
  • 핵심: 스코프 이해는 메모리 관리, 변수 충돌 방지, 모듈화 개발에 필수적