브라우저는 JavaScript 코드를 실행하기 위해 내부적으로 스코프를 사용합니다. 스코프는 변수 및 함수에 대한 접근 권한과 유효 범위를 정의하는데 사용됩니다.

글로벌 스코프(Global Scope)

브라우저에서 실행되는 JavaScript 코드는 기본적으로 글로벌 스코프에 속합니다. 글로벌 스코프에서 선언된 변수와 함수는 어디에서든지 접근할 수 있습니다. 이는 웹 페이지의 모든 스크립트에서 공유되는 전역적인 유효 범위를 가지는 것을 의미합니다.

함수 스코프(Function Scope)

JavaScript는 함수에 대한 개별적인 스코프를 제공합니다. 함수 내에서 선언된 변수와 함수는 함수의 외부에서 접근할 수 없습니다. 이는 변수와 함수의 유효 범위를 함수에 제한하는 것을 의미합니다.

function foo() {
  var x = 10; // 함수 스코프
  console.log(x);
}

foo(); // 10
console.log(x); // ReferenceError: x is not defined

위의 예제에서 변수 x는 foo 함수 내에서 선언되었으므로, 해당 함수 내부에서만 유효합니다. 함수 외부에서는 x에 접근할 수 없습니다.

블록 스코프(Block Scope)

ES6부터 도입된 let과 const 키워드를 사용하면 블록 스코프를 생성할 수 있습니다. 블록 스코프는 중괄호({})로 둘러싸인 코드 블록 내에서만 유효합니다.

function foo() {
  if (true) {
    let x = 10; // 블록 스코프
    console.log(x);
  }

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

foo();

위의 예제에서 let 키워드를 사용하여 변수 x를 선언할 경우 해당 변수는 블록 스코프를 가지게 됩니다. 따라서 if 문의 블록 내에서만 변수 x에 접근할 수 있고, if 문 외부에서는 x에 접근할 수 없습니다.

모듈 스코프(Module Scope)

ES6의 모듈 시스템을 사용하는 경우, 각 모듈은 개별적인 스코프를 가지게 됩니다. 이는 모듈 간 변수의 충돌을 방지하고, 모듈 간의 상호 작용을 관리하기 위한 유효 범위를 제공합니다.

// module1.js
let x = 10;
export { x };

// module2.js
import { x } from './module1.js';
console.log(x); // 10

위의 예제에서 module1.js에서 선언한 변수 x는 해당 모듈 스코프 내에서만 유효합니다. 다른 모듈에서 해당 변수를 import하여 사용할 수 있으며, 이를 통해 모듈 간의 데이터 공유를 할 수 있습니다.

결론

브라우저에서의 스코프 동작 원리는 변수와 함수의 접근 권한과 유효 범위를 제공하여 코드의 구조화와 상호 작용을 관리하는데 도움을 줍니다. 이해하고 스코프를 올바르게 사용하면 JavaScript 코드를 더욱 효율적으로 작성할 수 있습니다.

#JavaScript #브라우저 #스코프