자바스크립트 - 전역 변수

안녕하세요, 여러분! 오늘 우리는 자바스크립트 전역 변수의 세계로 접근해볼 것입니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 이 중요한 개념을 안내해드리는 것을 기쁘게 생각합니다. 신뢰해 주세요, 전역 변수를 이해하는 것은 코드에 대한 대용량 리모컨을 가지는 것과 같아요 - 강력하지만, 지혜롭게 사용해야 합니다!

JavaScript - Global Variables

자바스크립트 전역 변수는 무엇인가요?

먼저 기본적인 내용을 시작해보겠습니다. 자바스크립트에서 전역 변수는 코드 어디서든 접근할 수 있는 변수입니다. 학교에서 모두가 알고 이야기할 수 있는 인기 아이와 같습니다. 이러한 변수는 어떤 함수 밖에서 선언되거나 var, let, const 키워드 없이 선언됩니다.

다음은 간단한 예제입니다:

let globalGreeting = "Hello, World!";

function sayHello() {
console.log(globalGreeting);
}

sayHello(); // 출력: Hello, World!

이 예제에서 globalGreeting은 전역 변수입니다. sayHello 함수 내부와 외부에서 모두 접근할 수 있습니다.

자바스크립트 전역 범위

이제 범위에 대해 이야기해보겠습니다. 자바스크립트에서 "범위"는 변수의 가시성을 의미합니다. 전역 범위는 자바스크립트 프로그램의 가장 바깥쪽 범위입니다. 전역 범위에서 선언된 변수는 프로그램의 어디서나 접근하고 수정할 수 있습니다.

다음 예제를 통해 전역 범위를 설명해보겠습니다:

let globalVar = "I'm global!";

function testScope() {
console.log(globalVar); // 여기서 globalVar에 접근할 수 있습니다.
}

testScope(); // 출력: I'm global!
console.log(globalVar); // 여기서도 globalVar에 접근할 수 있습니다.

와 같이 globalVar는 함수 내부와 외부에서 모두 접근할 수 있습니다. 공중广播처럼 모두가 들을 수 있는 것입니다!

전역 변수 예제

전역 변수에 대한 이해를 더욱 확고히하기 위해 몇 가지 예제를 더 탐구해보겠습니다.

예제 1: 여러 함수가 전역 변수를 접근하는 경우

let counter = 0;

function incrementCounter() {
counter++;
console.log("Counter value:", counter);
}

function resetCounter() {
counter = 0;
console.log("Counter reset to:", counter);
}

incrementCounter(); // 출력: Counter value: 1
incrementCounter(); // 출력: Counter value: 2
resetCounter();     // 출력: Counter reset to: 0
incrementCounter(); // 출력: Counter value: 1

이 예제에서 incrementCounter와 resetCounter 함수는 모두 전역 counter 변수를 접근하고 수정할 수 있습니다.

예제 2: 브라우저에서의 전역 객체

웹 브라우저에서는 전역 범위가 window 객체로 표현됩니다. 모든 전역 변수나 함수는 window 객체의 속성이 됩니다.

var globalVar = "I'm a global variable";
function globalFunction() {
console.log("I'm a global function");
}

console.log(window.globalVar);     // 출력: I'm a global variable
window.globalFunction();           // 출력: I'm a global function

이와 같이 window.alert() 대신 alert()를 사용하는 이유는 둘 모두 동일한 것입니다!

자동 전역 변수

자바스크립트의 중요한 부분 중 하나로, 초보자들이 자주 혼동하는 부분은: 변수를 선언하지 않고 값을 할당하면 자동으로 전역 변수가 되는 것입니다. 사적인 일기장을 우연히 공개하는 것과 같은 일이 일어나는 것입니다!

function createGlobal() {
oops = "I'm accidentally global!";
}

createGlobal();
console.log(oops); // 출력: I'm accidentally global!

이 예제에서 oops는 의도치 않게 전역 변수가 됩니다. 이는 일반적으로 좋지 않은 관행으로, 버그를 추적하기 어려운 상황을 초래할 수 있습니다. 항상 var, let, const 중 하나로 변수를 선언하세요!

좋은 관행과 잠재적 위험

전역 변수는 유용할 수 있지만, 신중하게 사용해야 합니다. 다음은 그 이유입니다:

이름 충돌: 많은 전역 변수를 사용하면 같은 이름을 우연히 사용할 수 있어 예상치 못한 동작이 발생할 수 있습니다.
코드 유지보수성: 전역 변수는 코드를 이해하고 유지보수하기 어려워질 수 있습니다, 특히 큰 프로젝트에서는 더 그렇습니다.
테스트 어려움: 전역 변수에 의존하는 함수는 단독으로 테스트하기 어려워집니다.

전역 변수에 의존하기보다는 지역 변수를 사용하고 필요할 때 인자로 전달하는 것이 좋습니다.

// 이렇게 하지 말고:
let name = "Alice";
function greet() {
console.log("Hello, " + name + "!");
}

// 이렇게 하세요:
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Alice");

결론

자바스크립트의 전역 변수는 코드의 중앙广场과 같아요 - 누구나 접근할 수 있지만, 신중하게 사용해야 합니다. 전역 변수는 강력한 도구이지만, 큰 책임이 따릅니다! 자바스크립트 여정을 계속하면서, 언제 전역 변수를 사용해야 하고 언제 지역 변수를 유지해야 하는 감각을 키워 나가세요.

기억하세요, 연습이 완벽을 이루는 열쇠입니다. 자신만의 예제를 만들고 전역 변수를 실험해보세요. 실수를 해도 걱정 말아요 - 그것이 배울 과정입니다. 행복한 코딩, 미래의 자바스크립트 마스터 여러분!

방법	설명
`var`	전역적으로, 또는 함수 전체에 대해 블록 범위와 관계없이 변수를 선언합니다
`let`	블록 범위 내의 지역 변수를 선언하고, 선택적으로 값을 초기화합니다
`const`	블록 범위 내의 읽기 전용 이름 상수를 선언합니다
`window.variableName`	브라우저 환경에서 显式적으로 전역 변수를 선언합니다
키워드 없음	隐式적으로 전역 변수를 선언하는 것(권장되지 않음)

Credits: Image by storyset

이전 튜토리얼:

JavaScript - 변수 범위

다음 튜토리얼:

JavaScript - 스마트 함수 매개변수