JavaScript 함수 내의 전역 변수

JavaScript에서(다른 언어에서는 대부분 그렇지 않습니다) 함수 외부에서 정의된 변수는 해당 함수 내부에서 보입니다. 이러한 변수를 전역(global) 변수라고 합니다. 예제를 살펴보겠습니다:

javascriptlet num = 1; // 함수 외부의 변수

function func() {
  console.log(num); // 함수 내부에서 변수 num이 보임
}

func(); // 1을 출력

사실 변수는 함수 정의 전이 아니라 함수 호출 전에 정의되어야 합니다:

javascriptfunction func() {
  console.log(num);
}

let num = 1; // 함수 외부의 변수
func();      // 1을 출력

변수의 값을 변경하고 그 후에 매번 함수를 호출하면 - console.log는 매번 다른 결과를 출력할 것입니다:

javascriptfunction func() {
  console.log(num);
}

let num; // 변수 선언

num = 1; // 값 1 할당
func();  // 1 출력

num = 2; // 값 2 할당
func();  // 2 출력

여러 함수가 있는 경우, 전역 변수는 각 함수에서 접근 가능할 것입니다:

javascriptfunction func1() {
  console.log(num);
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // 1 출력
func2(); // 1 출력

함수 중 하나에서 전역 변수를 변경하면, 해당 변수를 사용하는 모든 함수에서 그 변수가 변경될 것입니다:

javascriptfunction func1() {
  console.log(num);
  num++; // 전역 변수 변경
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // 1 출력
func2(); // 2 출력

어떤 함수라도 쉽게 전역 변수를 변경할 수 있기 때문에, 그 사용은 발견하기 어려운 오류의 온상이 됩니다. 이런 이유로 스크립트 내에서 전역 변수 사용을 최소화해야 합니다. 가능하면 아예 없거나 최소한의 수만 있도록 하는 것이 바람직합니다.

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

func();

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

num = 2;
func();

javascriptfunction func() {
  console.log(num);
}

let num;

num = 1;
func();

num = 2;
func();