Categories: JavaScript

JavaScript 자바스크립트 스코프 (Scope) 알아보기

javascript

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

자바스크립트 스코프는 코드 내에서 변수 및 함수에 적용되는 유효 범위를 나타내는 개념입니다. 스코프는 변수와 함수가 어디서 정의되고 어디에서 접근 가능한지를 결정합니다.

스코프의 설명

전역 스코프 (Global Scope)

전역 스코프는 자바스크립트에서 모든 코드가 실행되는 최상위 스코프를 의미합니다. 이 스코프에 선언된 변수와 함수는 프로그램 전체에서 접근할 수 있습니다. 전역 스코프에서 선언된 변수와 함수는 어디서든 참조할 수 있으며, 해당 프로그램이 실행되는 동안 계속해서 유효합니다.

지역 스코프 (Local Scope)

지역 스코프는 자바스크립트에서 변수와 함수가 특정한 코드 블록 또는 함수 내에서 선언되어 해당 영역에서만 유효한 범위를 갖는 것을 의미합니다. 지역 스코프에서 선언된 변수는 해당 지역 스코프 내에서만 접근할 수 있으며, 외부에서는 직접적으로 참조할 수 없습니다.

블록 스코프 (Block Scope)

ES6에서 let과 const 키워드를 사용하여 도입된 스코프입니다. 중괄호 {}로 둘러싸인 코드 블록 내에서만 유효하며, 블록 스코프를 사용하면 변수의 유효 범위를 블록 내로 제한할 수 있습니다. 즉 중괄호 안에서 선언된 변수들은 외부에서 접근할 수 없습니다.

함수 스코프 (Function Scope)

함수 스코프는 변수가 함수 내에서 선언되었을 때 해당 함수 내에서만 유효한 스코프를 가리킵니다. 함수가 호출될 때마다 해당 함수의 스코프가 형성되고, 함수 내에서 선언된 변수는 해당 함수 내에서만 유효하며 함수 외부에서는 접근할 수 없습니다.

스코프 체인 (Scope Chain)

자바스크립트에서 변수 및 함수를 찾을 때 사용되는 메커니즘으로, 각 스코프가 중첩될 때 발생하는 변수 및 함수의 검색 경로를 나타냅니다. 스코프 체인은 변수나 함수를 찾을 때 현재 스코프에서 찾지 못하면 상위 스코프로 이동하여 계속해서 검색하는 방식으로 동작합니다.

클로저 (Closure)

클로저는 자바스크립트에서 함수와 그 함수가 선언된 스코프에 대한 개념으로, 함수가 다른 스코프에서 호출될 때에도 해당 함수가 선언될 때의 환경(변수 및 매개변수 등)을 기억하고 이에 접근할 수 있는 함수를 말합니다. 이는 함수가 실행되는 동안의 환경 정보를 “닫아서(또는 보존하여)” 기억한다는 의미로 “클로저”라는 용어가 사용되었습니다.

Lexical 스코프 (정적 스코프)

자바스크립트는 정적 스코프를 따릅니다. 이는 함수를 어디에 선언하였는지에 따라 함수의 스코프가 결정된다는 의미입니다. 함수를 어디에서 호출하였는지에 따라 스코프가 결정되는 동적 스코프와는 달리, 정적으로 스코프가 결정됩니다.

스코프의 예제

전역 스코프(Global Scope)

전역 스코프는 코드의 최상단에 위치하며, 모든 변수와 함수가 접근할 수 있는 범위를 나타냅니다. 전역 스코프에서 선언된 변수와 함수는 어디서든 참조할 수 있습니다.

JavaScript

var globalVariable = "전역 변수";

function globalFunction() {
  console.log(globalVariable);
}

globalFunction(); // "전역 변수"

JavaScript

지역 스코프(Local Scope)

지역 스코프는 특정 함수 내에서 변수가 선언될 때 해당 변수가 접근 가능한 범위를 의미합니다. 함수 내에서 선언된 변수는 함수 외부에서 접근할 수 없습니다.

JavaScript

function localScopeExample() {
  var localVariable = "지역 변수";
  console.log(localVariable);
}

localScopeExample(); // "지역 변수"

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

JavaScript

블록 스코프(Block Scope)

ES6에서 let과 const 키워드를 도입함으로써 블록 스코프가 등장했습니다. 블록 스코프는 중괄호 {}로 감싸진 코드 블록 내에서만 유효하며, 외부에서는 접근할 수 없습니다.

JavaScript

if (true) {
  let blockVariable = "블록 변수";
  console.log(blockVariable);
}

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

JavaScript

스코프 체인(Scope Chain)

자바스크립트에서는 스코프 체인을 통해 변수나 함수를 찾습니다. 현재 스코프에서 찾지 못하면 상위 스코프로 이동하여 검색합니다.

JavaScript

var outerVariable = "외부 변수";

function outerFunction() {
  var innerVariable = "내부 변수";

  function innerFunction() {
    console.log(outerVariable); // 외부 변수 접근 가능
    console.log(innerVariable); // 내부 변수 접근 가능
  }

  innerFunction();
}

outerFunction();

JavaScript

클로저 (Closure)

아래 예제에서 innerFunction은 outerVariable에 접근할 수 있는 클로저를 형성합니다. outerFunction이 호출된 이후에도 closureExample을 실행하면, 여전히 외부 변수에 접근할 수 있어 “외부 변수”가 출력됩니다.

JavaScript

function outerFunction() {
  var outerVariable = "외부 변수";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closureExample = outerFunction();
closureExample(); // "외부 변수"