자바스크립트 개발자라면 알아야 할 33가지 개념 - 6. 함수 스코프, 블록 스코프 및 렉시컬 스코프

함수 스코프, 블록 스코프 및 렉시컬 스코프(Function Scope, Block Scope and Lexical Scope)

자바스크립트에서 스코프(Scope)는 변수나 함수에 접근할 수 있는 범위를 의미합니다.

변수의 스코프에 따라 코드 내에서 변수를 사용할 수 있는 위치가 결정됩니다.

전역 스코프(Global Scope)

전역 스코프에 선언된 변수는 어디서든 접근 가능합니다.

함수나 블록 외부에서 선언된 변수는 전역 변수가 되며, 프로그램 전체에서 사용할 수 있습니다.

var message = "Hello, world!"; // 전역 스코프에 선언된 변수

function func() {
  console.log(message); // 접근 가능
}

func();

함수 스코프(Function Scope)

함수 내부에서 선언된 변수는 해당 함수 내부에서만 유효하며, 함수 외부에서는 접근할 수 없습니다.

var 키워드로 선언된 변수는 함수 스코프를 따릅니다.

function func() {
  var message = "Hello, world!";

  console.log(message); // Hello, world!
}

console.log(message); // Uncaught ReferenceError: message is not defined

블록 스코프(Block Scope)

{} 중괄호로 감싼 블록 내부에서 선언된 변수는 해당 블록 내부에서만 유효하며, 블록 외부에서는 접근할 수 없습니다.

let, const 키워드로 선언된 변수는 블록 스코프를 따릅니다.

function func() {
  if (true) {
    const message = "Hello, world!";

    console.log(message); // Hello, world!
  }

  console.log(message); // Uncaught ReferenceError: message is not defined
}

func();

렉시컬 스코프(Lexical Scope)

렉시컬 스코프란 함수가 선언된 위치를 기준으로 상위 스코프가 결정되는 개념입니다.
자바스크립트는 렉시컬 스코프를 따르며, 호출 위치가 아닌 선언 위치 기준으로 스코프가 결정됩니다.

let x = 10;

function outer() {
  let y = 20;

  function inner() {
    console.log(x); // 10
    console.log(y); // 20
  }

  inner();
}

outer();

inner()는 outer() 내부에서 선언되었기 때문에, 상위 스코프인 outer()의 변수 y와 전역 변수 x에 접근할 수 있습니다.

스코프가 중요한 이유

스코프 개념은 다음과 같은 이유로 중요합니다:

• 메모리 효율성

스코프가 끝나면 변수는 메모리에서 해제되므로 불필요한 자원 낭비를 줄일 수 있습니다.

• 코드 안정성 향상

변수 접근 범위가 명확하므로, 예기치 않은 변수 충돌이나 값 변경을 방지할 수 있습니다.

• 유지보수 및 디버깅 용이

어떤 코드가 어떤 변수에 영향을 주는지 파악이 쉬워져 디버깅이 편리합니다.

• 모듈화와 재사용성 향상

함수 및 블록 단위 스코프는 독립적이고 재사용 가능한 코드 구성을 가능하게 합니다.

정리

구분	설명	사용 키워드
전역 스코프	프로그램 전체에서 접근 가능	함수 외부 선언 변수
함수 스코프	함수 내부에서만 유효한 스코프	var
블록 스코프	블록({}) 내부에서만 유효한 스코프	let, const
렉시컬 스코프	함수가 선언된 위치 기준으로 상위 스코프 결정	자바스크립트의 모든 함수에 기본 적용