[자바스크립트] 스코프에 대해

스코프

 

설명

• 스코프(Scope)는 자바스크립트에서 변수와 함수의 유효 범위를 의미
• 변수와 함수가 어디에서 선언 되었는지에 따라 결정되며,
  코드 안에서 해당 변수나 함수에 접근할 수 있는 영역을 제한

 

스코프의 종류

 

전역 스코프(Global Scope)

• 코드 어디에서든 접근할 수 있는 최상위 스코프
• 전역 변수와 전역 함수는 전역 스코프에 선언되어 어디에서든 사용 가능
• 예시

var globalVariable = "전역 변수";

function globalFunction() {
  console.log(globalVariable); // 전역 변수에 접근 가능
}

globalFunction(); // 출력: "전역 변수"

 

지역 스코프(Local Scope 또는 Function scope)

• 함수 내부에서 선언된 변수와 함수가 해당 함수 내부에서만 요효한 스코프
• 함수 스코프는 변수 충돌을 방지하고 변수의 가시성을 제한하는데 도움
• 예시

function localFunction() {
  var localVariable = "지역 변수";
  console.log(localVariable); // 지역 변수에 접근 가능
}

localFunction(); // 출력: "지역 변수"
console.log(localVariable); // 오류: localVariable은 지역 스코프 내에서만 유효

 

블록 스코프(Block Scope)

• 중괄호( { } )로 둘러싸인 코드 블록에서 선언된 변수가 해당 블록 내에서만 유효한 스코프
• if 문이나 for 문과 같은 블록에서 선언된 변수는 해당 블록 외부에서는 접근 불가
• ES6에서 도입된 let과 const 키워드를 사용하여 블록 스코프 생성 가능
• 예시

function blockScopeExample() {
  if (true) {
    var blockVariable = "블록 변수";
    let blockScopedVariable = "블록 스코프 변수";
    const constantVariable = "상수 변수";
    
    console.log(blockVariable); // 블록 변수에 접근 가능
    console.log(blockScopedVariable); // 블록 스코프 변수에 접근 가능
    console.log(constantVariable); // 상수 변수에 접근 가능
  }
  console.log(blockVariable); // 출력: "블록 변수"
  console.log(blockScopedVariable); // 오류: blockScopedVariable은 블록 스코프 내에서만 유효
  console.log(constantVariable); // 오류: constantVariable은 블록 스코프 내에서만 유효
}

blockScopeExample();

 

렉시컬 스코프(Lexical Scope 또는 Static Scope)

• 함수가 어디에서 선언 되었는지에 따라 스코프가 결정되는 개념
• 함수는 자신이 선언된 위치에서 스코프를 상속받아 변수를 참조
• 예시

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // 1
bar(); // 1

// bar의 선언된 위치가 전역이기 때문에 상위 스코프인 전역 스코프의 x = 1 을 참조하여 1이 2번 출력

 

 

스코프 체인(Scope Chain)

 

설명

• 자바스크립트에서 변수를 검색할 때 사용되는 메커니즘
• 변수를 찾기 위해 여러 스코프를 순차적으로 확인하는 과정
• 렉시컬 스코프에 기반
• 함수는 자신이 선언된 위치에서 스코프를 상속받기 때문에 해당 함수 내부에
  선언된 변수 뿐만 아니라 상위 스코프에 선언된 변수를 참조 가능
• 일반적으로 함수 스코프에서 발생
• 기본 동작
  1. 함수 내부에서 변수를 참조할 때, 자바스크립트 엔진은 해당 변수를 먼저 함수의 내부 스코프에서 검색
  2. 만약, 변수가 해당 스코프에 존재하지 않으면, 엔진은 변수를 찾기 위해 상위 스코프로 이동
  3. 위 과정을 계속해서 상위 스코프로 이동하며 변수를 찾을 때까지 반복
  4. 검색 과정 중 변수가 발견되면 중단하고 해당 변수를 사용
  5. 변수가 전역 스코프까지 검색 되지 않으면, 변수가 정의되지 않은 상태로 간주되어 오류 발생
• 예시

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

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

  return innerFunction;
}

var closure = outerFunction();
closure(); // 출력: "외부 변수", "내부 변수"

// innerFunction은 클로저 이기도 하지만, 클로저는 함수와 함수가 선언된 렉시컬 스코프의 조합
// 클로저는 자신이 선언될 당시의 스코프에 접근할 수 있는 능력을 가지고 있으며, 
// 스코프 체인을 통해 외부 변수에 접근 가능