자바스크립트에서 변수의 스코프는 변수가 어디에서 접근 가능한지를 결정합니다. 전역 변수와 지역 변수는 스코프의 한 종류로, 각각 전체 코드 영역과 특정 블록 영역에서 사용되는 변수입니다. 이번 포스트에서는 전역 변수와 지역 변수의 스코프에 대해 자세히 알아보겠습니다.

전역 변수 (Global variable)

전역 변수는 전체 코드 영역에서 사용되는 변수입니다. 즉, 어떤 함수 내에서도 접근하여 값을 읽거나 변경할 수 있습니다. 전역 변수는 다른 함수들과의 상호작용이 가능하므로 많이 사용되지만, 그만큼 주의가 필요합니다.

// 전역 변수 선언
var globalVariable = 10;

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

foo(); // 출력: 10

전역 변수를 사용할 때는 변수명을 충분히 신중하게 선택해야 합니다. 변수명이 중복되어 다른 함수에서 원하지 않는 동작이 발생할 수 있기 때문입니다. 또한, 전역 변수의 남발은 코드의 가독성과 유지 보수를 어렵게 만들 수 있으므로 최대한 사용을 자제해야 합니다.

지역 변수 (Local variable)

지역 변수는 특정 블록 내에서만 사용되는 변수입니다. 이는 함수 내부에서 선언되는 경우가 가장 일반적입니다. 지역 변수는 변수가 선언된 블록 내에서만 접근할 수 있으며, 외부에서 접근할 수 없습니다.

function bar() {
  // 지역 변수 선언
  var localVariable = 20;

  // 지역 변수에 접근 가능
  console.log(localVariable);
}

bar(); // 출력: 20
console.log(localVariable); // 에러: localVariable은 정의되지 않았습니다.

지역 변수의 생명 주기는 변수가 선언된 블록 내에서만 지속됩니다. 따라서 블록을 벗어나면 해당 변수는 사용할 수 없게 됩니다. 이러한 지역 변수의 특성을 이용하여 변수의 스코프를 제한하고, 그에 따른 변수 충돌을 방지할 수 있습니다.

스코프 체인 (Scope chain)

자바스크립트에서는 스코프가 중첩되어 있을 경우, 내부 스코프에서 외부 스코프의 변수에 접근할 수 있습니다. 이를 스코프 체인이라고 합니다. 스코프 체인은 변수를 찾는 과정에서 내부 스코프에서 시작하여 외부 스코프로 거슬러 올라가는 방식을 취합니다.

var outerVariable = 30;

function baz() {
  var innerVariable = 40;

  // 내부 스코프에서 외부 스코프의 변수에 접근 가능
  console.log(innerVariable); // 출력: 40
  console.log(outerVariable); // 출력: 30
}

baz();

스코프 체인은 변수를 찾을 때 내부 스코프부터 시작하므로, 같은 이름의 변수가 내부와 외부 스코프에 중복해서 선언된 경우 내부 스코프의 변수가 우선적으로 사용됩니다. 이러한 변수 검색 방식은 스코프가 겹치는 경우에도 변수 충돌을 방지하는 데 도움을 줍니다.

결론

자바스크립트에서 전역 변수와 지역 변수는 코드의 스코프를 결정하는 중요한 개념입니다. 전역 변수는 전체 코드 영역에서 사용되며, 지역 변수는 특정 블록 내에서만 사용됩니다. 이러한 변수의 스코프를 제대로 이해하여 변수 충돌을 방지하고, 코드의 가독성과 유지 보수성을 개선하는 데 도움이 됩니다.

참고 자료

• MDN Web Docs - Scope