자바스크립트 스코프(Scope)

zenoan·2024년 10월 1일
JavaScript
0

Back to the basics

목록 보기
1/1
post-thumbnail

자바스크립트에서의 스코프(Scope)란?

스코프(Scope)란 변수, 함수, 객체가 코드의 어느 부분에서 접근 가능하고 어디에서 사용할 수 있는지를 정의하는 범위를 의미합니다. 자바스크립트에서는 스코프를 통해 특정 변수나 함수가 어느 위치에서 유효한지를 결정할 수 있습니다.

자바스크립트의 스코프는 크게 세 가지로 나뉩니다:

  1. 전역 스코프 (Global Scope)
  2. 함수 스코프 (Local/Function Scope)
  3. 블록 스코프 (Block Scope)

1. 전역 스코프 (Global Scope)

전역 스코프는 코드의 어디서든 접근할 수 있는 스코프를 의미합니다. 함수나 블록 바깥에서 선언된 변수는 전역 스코프에 속하며, 코드 내 어디서든 접근 가능합니다.

let globalVariable = "나는 전역 변수야";

function showGlobalVariable() {
  console.log(globalVariable); // "나는 전역 변수야" 출력
}

showGlobalVariable(); // 전역 변수에 접근 가능
console.log(globalVariable); // 전역 변수에 접근 가능

위 예제에서 globalVariable은 함수 밖에서 선언되었기 때문에 전역 스코프에 속하며, 함수 내부와 외부 어디서든 접근할 수 있습니다.

2. 함수 스코프 (Local/Function Scope)

함수 스코프는 함수 내부에서 선언된 변수에만 적용됩니다. 함수 내부에서 선언된 변수는 해당 함수 안에서만 접근 가능하고, 함수 외부에서는 접근할 수 없습니다.

function localScopeExample() {
  let localVariable = "나는 로컬 변수야";
  console.log(localVariable); // "나는 로컬 변수야" 출력
}

localScopeExample();
console.log(localVariable); // 에러: localVariable은 정의되지 않음

위 예제에서는 localVariable이 localScopeExample 함수 내부에서 선언되었기 때문에 함수 외부에서 localVariable에 접근하려고 하면 에러가 발생합니다.

3. 블록 스코프 (Block Scope)

블록 스코프는 let이나 const 키워드로 선언된 변수가 블록(중괄호 {}) 내에서만 유효하도록 하는 스코프입니다. 블록은 주로 if문, for문, while문 등에서 중괄호 {}로 감싸진 코드 영역을 의미합니다. 블록 스코프는 ES6(ECMAScript 2015)에서 도입된 개념으로, 기존의 var와는 다르게 블록 단위로 스코프가 설정됩니다.

if (true) {
  let blockScopedVariable = "나는 블록 스코프 변수야";
  console.log(blockScopedVariable); // "나는 블록 스코프 변수야" 출력
}

console.log(blockScopedVariable); // 에러: blockScopedVariable은 정의되지 않음

위 예제에서 blockScopedVariable은 if 블록 내부에서만 유효하기 때문에, 블록 밖에서 접근하려고 하면 에러가 발생합니다.

스코프 체인(Scope Chain)

자바스크립트에서는 변수를 찾을 때 스코프 체인을 사용합니다. 특정 변수에 접근할 때 자바스크립트는 현재 스코프에서 변수를 찾고, 없다면 상위 스코프(외부 스코프)로 이동하며 변수를 찾습니다. 이렇게 상위 스코프로 이동하는 과정을 스코프 체인이라고 합니다.

예시로 스코프 체인을 이해해봅시다:

let globalVar = "전역 변수";

function outerFunction() {
  let outerVar = "외부 함수 변수";

  function innerFunction() {
    let innerVar = "내부 함수 변수";
    console.log(globalVar); // "전역 변수" - 전역 스코프에서 찾음
    console.log(outerVar);  // "외부 함수 변수" - 외부 스코프에서 찾음
    console.log(innerVar);  // "내부 함수 변수" - 현재 스코프에서 찾음
  }

  innerFunction();
}

outerFunction();
  • globalVar는 전역 스코프에 있습니다.
  • outerVar는 outerFunction의 로컬 스코프에 있습니다.
  • innerVar는 innerFunction의 로컬 스코프에 있습니다.
  • innerFunction은 자신의 내부 변수 innerVar를 찾은 후, 없으면 외부의 outerVar를 찾고, 그래도 없으면 전역 변수인 globalVar를 찾아 출력합니다. 이 과정이 스코프 체인입니다.

호이스팅(Hoisting)과 스코프

자바스크립트에서는 변수 선언이 호이스팅(hoisting)됩니다. 즉, 변수 선언이 코드의 맨 위로 끌어올려진 것처럼 동작합니다. var로 선언된 변수는 호이스팅되지만, let과 const는 호이스팅되더라도 선언 전에 접근할 수 없도록 합니다. 이것을 Temporal Dead Zone (TDZ)이라고 합니다.

호이스팅 예시 (var):

console.log(hoistedVar); // undefined (호이스팅 됨, 하지만 값은 할당되지 않음)
var hoistedVar = "나는 호이스팅된 변수야!";

호이스팅 예시 (let과 const):

console.log(notHoistedVar); // 에러: notHoistedVar은 초기화되기 전에 접근할 수 없음
let notHoistedVar = "나는 호이스팅된 변수야!";

정리

  • 전역 스코프: 코드 어디서든 접근 가능한 변수.
  • 함수 스코프: 함수 내부에서 선언된 변수는 함수 외부에서 접근 불가.
  • 블록 스코프: let과 const로 선언된 변수는 블록(중괄호 {}) 내에서만 유효.
  • 스코프 체인: 변수 검색 시 현재 스코프에서 시작하여 상위 스코프로 올라가며 찾는 과정.
  • 호이스팅: var로 선언된 변수는 호이스팅되지만, let과 const는 선언 전에 접근할 수 없도록 처리됨.

이처럼 스코프는 변수의 가시성(visibility)과 생명 주기(lifecycle)를 관리하는 중요한 개념으로, 자바스크립트 코드를 작성할 때 변수의 범위를 올바르게 이해하고 사용해야 합니다.

profile
zenoan
프론트엔드 개발자

0개의 댓글