JavaScript 함수 내의 전역 변수

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

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

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

func(); // 1을 출력

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

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

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

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

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

let num; // 변수 선언

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

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

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

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

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

let num = 1;

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

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

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

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

let num = 1;

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

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

코드를 실행하지 않고 콘솔에 무엇이 출력될지 결정하세요:

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

func();

코드를 실행하지 않고 콘솔에 무엇이 출력될지 결정하세요:

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

num = 2;
func();

코드를 실행하지 않고 콘솔에 무엇이 출력될지 결정하세요:

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

let num;

num = 1;
func();

num = 2;
func();