Front-endJavaScript

전역 변수(Global Variable)와 전역 객체(Global Object)

⏱ 읽기 소요 시간: 5 분

전역 변수 (Global Variable)

  • 전역 스코프는 스코프 체인의 가장 바깥쪽에 있는 스코프
1
2
3
4
5
6
7
8
let foo = "outer"; // 이 `foo`는 전역 스코프에서 선언됨

{
  let foo = "inner"; // 이 `foo`는 블록 스코프에서 선언됨
  console.log(foo); // inner
}

console.log(foo); // outer
  • ‘outer’ 문자열을 값으로 갖는 변수 foo와 같이 전역 스코프에서 선언된 변수를 전역 변수(global variable)라고 한다.
  • 주의할 점: 변수를 명시적으로 전역 스코프에서 선언하지 않더라도,
    한 번도 선언되지 않은 이름으로 안쪽 스코프에서 let, const, var를 붙여주지 않고 변수를 선언하면 전역 스코프에 변수가 만들어진다.
1
2
3
4
5
6
function func() {
  variable = 1; // // `variable`이라는 변수가 선언된 적 없으므로, 전역 변수가 된다.
}

func();
console.log(variable); // 1
  • 전역 변수는 코드의 어떤 부분에서든 아무런 제한 없이 접근하고 조작할 수 있다.

  • 이런 특징이 편하고 좋아보이지만, 어려움을 겪을 수 있다.

  • 어떤 프로그래밍 언어를 사용하건, 전역 변수에 의존해서 프로그래밍을 하는 것은 굉장히 금기시된다.
    전역 변수를 남용하다 보면 다음과 같은 어려움을 겪게 된다.

  • 전역 변수에는 아무런 제한 없이 접근할 수 있으므로, 프로그램의 크기가 커짐에 따라 변수의 값이 어디서 어떻게 변경될지 예측하기 힘들다.

  • 전역 변수를 통해 프로그램의 너무 많은 부분이 결합(coupling)된다.
  • 예를 들어, A.js 파일을 고쳤는데 아무런 상관도 없어 보이던 B.js 파일의 코드가 오동작하게 될 수도 있다.
  • 코드가 전혀 다른 곳에 위치한 부분에 의존하게 되므로, 전역 변수를 사용한 코드는 이해하기 어렵다.

  • 이처럼 전역 변수를 잘못 사용하면 코드를 읽고, 쓰고, 변경하기 어려워진다.

  • 변수를 선언할 때는 그 변수를 필요로 하는 작은 스코프 안에서만 접근할 수 있도록 하세요.

  • 불가피하게 코드의 여러 부분에서 특정한 값을 공유하고 그 값을 변경해야 할 일이 생긴다면, 전역 변수 대신에 다른 기법을 활용하세요.
  • 공유되는 값에 접근할 수 있는 코드의 범위를 최소한으로 줄이고, 그 값은 약속된 방식으로만 변경을 할 수 있도록 제약을 두어야 한다.

전역 객체 (Global Object)

  • JavaScript 구동 환경은 모두 전역 객체(Global Object)라는 특별한 객체를 갖고 있다.
  • 전역 변수가 선언되면, 이 변수는 또한 전역 객체의 속성이 되어 전역 객체를 통해서도 접근할 수 있게 된다.
1
2
let foo = 1;
window.foo; // 1
  • 전역 객체의 이름은 JavaScript 구동 환경마다 다르다.
구동 환경 전역 객체 이름
웹 브라우저 window
웹 워커 self
Node.js global
  • 전역 객체에는 구동 환경에서 유용하게 쓸 수 있는 속성과 함수가 미리 적재되어 있다.
  • ex1) 브라우저 환경에서는 서버와의 통신을 위한 fetch 함수가 미리 적재되어 있다.
  • ex2) Node.js 환경에서는 모듈을 불러와 사용할 수 있도록 해 주는 require 함수가 미리 적재되어 있다.
Share