프로그래밍 「 자바스크립트 편」JavaScript 전역 변수

 

JavaScript 전역 변수란 무엇입니까?

JavaScript 전역 변수는 선언된 위치에 관계없이 JavaScript 코드의 어느 위치에서나 액세스할 수 있는 변수입니다. 이는 변수의 범위가 전체 프로그램으로 확장되어 다른 함수, 블록 또는 스크립트에서 해당 값을 사용하고 수정할 수 있음을 의미합니다. [1]

특정 함수나 블록 외부에서 변수를 선언하면 전역 변수가 됩니다. 즉, 다른 함수, 이벤트 처리기 또는 외부 스크립트를 포함하여 JavaScript 코드 내의 모든 곳에서 액세스하고 수정할 수 있습니다.

전역 변수는 코드의 여러 부분에서 공유하고 액세스해야 하는 데이터 또는 값을 저장해야 하는 경우에 유용합니다. 공유 상태를 유지 관리하거나 응용 프로그램의 여러 구성 요소 간에 정보를 공유하는 방법을 제공합니다.

JavaScript 전역 변수 예제

JavaScript 전역 변수를 설명하는 실제 시나리오를 상상해 보겠습니다.

"TechWorld"라는 온라인 상점을 위한 웹사이트를 구축한다고 상상해 보십시오. 웹 사이트에는 제품 페이지, 장바구니 및 사용자 프로필 섹션과 같은 다양한 섹션이 있습니다.

이미지 작성자

이 시나리오에서는 웹 사이트 전체에서 사용자의 로그인 상태를 추적하려고 합니다. 사용자의 로그인 여부를 표시하고 사용자가 웹 사이트의 어느 부분에서나 이 정보에 액세스할 수 있도록 해야 합니다.

이를 위해 JavaScript에서 전역 변수를 사용할 수 있습니다. 'isLoggedIn'이라고 부르면 사용자의 로그인 상태를 나타내는 부울 값을 보유합니다.

// Define a global variable for login status
var isLoggedIn = false;

이제 사용자가 웹 사이트에 로그인하거나 로그아웃할 때마다 그에 따라 'isLoggedIn' 변수를 업데이트할 수 있습니다.

// User logs in
isLoggedIn = true;
// User logs out
isLoggedIn = false;

'isLoggedIn'은 전역 변수이므로 웹 사이트 JavaScript 코드의 모든 부분에서 액세스할 수 있습니다. 예를 들어 사용자의 로그인 여부에 따라 다른 콘텐츠를 표시하거나 특정 단추를 표시할 수 있습니다.

// Display different content based on login status
if (isLoggedIn) {
 console.log("Welcome, user! You are logged in.");
 // Display user-specific content
} else {
 console.log("Welcome, guest! Please log in.");
 // Display general content
}

이 경우 전역 변수 'isLoggedIn'을 사용하면 사용자의 로그인 상태에 따라 표시할 메시지와 표시할 콘텐츠를 결정할 수 있습니다. 이를 통해 웹 사이트 전체에서 결정을 내리고 사용자 경험을 사용자 지정할 수 있습니다.

전역 변수를 사용하면 JavaScript 코드의 어느 부분에서나 로그인 상태 정보에 쉽게 액세스할 수 있으므로 웹 사이트의 여러 섹션에서 일관된 동작이 가능합니다.

그러나 전역 변수에 지나치게 의존하면 코드를 관리하기 어려워지고 잠재적인 충돌이 발생할 수 있으므로 신중하게 사용해야 합니다. 일반적으로 사용을 제한하고 캡슐화 및 모듈식 프로그래밍과 같은 대체 접근 방식을 고려하는 것이 좋습니다.

변수가 전역인지 아닌지 어떻게 알 수 있습니까?

JavaScript에서는 변수의 범위와 선언 위치를 고려하여 변수가 전역 변수인지 여부를 확인할 수 있습니다. 다음은 변수가 전역인지 확인하는 몇 가지 방법입니다.

선언 위치

변수가 함수 또는 block{} 외부에서 선언된 경우 전역 변수일 수 있습니다. 전역 변수는 전역 범위에서 선언되며 스크립트 내의 모든 위치에서 액세스할 수 있습니다.

Window 개체(브라우저 환경)

브라우저 환경에서는 전역 변수가 'window' 객체에 첨부됩니다. 변수가 'window' 객체의 속성으로 존재하는지 확인할 수 있습니다. 예를 들어, 'myVariable'이라는 변수가 있는 경우

'window.hasOwnProperty('myVariable')'

다음은 이러한 점을 설명하는 예입니다.

let globalVariable = 'I am global';
function myFunction() {
 let localVariable = 'I am local';
 
 console.log(globalVariable); // Accessible, prints 'I am global'
 console.log(localVariable); // Accessible, prints 'I am local'
}
console.log(globalVariable); // Accessible, prints 'I am global'
console.log(localVariable); // Not accessible, throws ReferenceError
console.log(window.hasOwnProperty('globalVariable')); // true
console.log(window.hasOwnProperty('localVariable')); // false

위의 예에서 'globalVariable'은 함수 외부에서 선언되어 전역 변수가 됩니다. 'myFunction'과 최상위 범위 모두에서 액세스할 수 있습니다. 반면에 'localVariable'은 'myFunction' 함수 내에서 선언되며 해당 함수의 범위 내에서만 액세스할 수 있습니다. 'myFunction'외부의 'localVariable'에 액세스하려고하면 ReferenceError가 발생합니다.

'var' 예외

변수가 함수 또는 block{} 외부에서 'var' 키워드로 선언되면 전역 변수가 됩니다. 즉, 변수는 JavaScript 코드 내의 어느 곳에서나 액세스할 수 있습니다. [2]

다음은 'var'로 선언된 변수의 전역 범위를 보여주는 예제입니다.

// Example 1
var myGlobalVariable = "I am a global variable";
function myFunction() {
 console.log(myGlobalVariable); // Accessible, prints "I am a global variable"
}
console.log(myGlobalVariable); // Accessible, prints "I am a global variable"

// Example 2
function myFunction() {
var myGlobalVariable = "I am a global variable";
console.log(myGlobalVariable); // Accessible, prints "I am a global variable"
}
console.log(myGlobalVariable); // Accessible, prints "I am a global variable"

위의 예에서 'myGlobalVariable'은 함수 외부에서 'var'로 선언되어 전역 변수가 됩니다. 'myFunction' 함수와 최상위 범위 모두에서 액세스하고 사용할 수 있습니다.

그러나 최신 JavaScript에서는 블록 범위로 인해 'var'보다 'let' 및 'const' 키워드가 선호된다는 점은 주목할 가치가 있습니다. 'var'에는 함수 범위 또는 전역 범위가 있는 반면 'let' 및 'const'에는 블록 범위가 있어 보다 예측 가능하고 제어된 변수 범위 지정 동작을 제공합니다.

코드에서 어떻게 사용합니까?

물론! 간단히 말해서 JavaScript 전역 변수는 JavaScript 코드의 어느 곳에서나 액세스할 수 있는 변수입니다. 즉, 변수가 특정 함수나 코드 블록에 국한되지 않고 전체 프로그램에서 사용할 수 있습니다.

다음은 이해를 돕기 위한 예입니다.

// Define a global variable
var myGlobalVariable = "Hello, world!";
// Access and use the global variable
function sayHello() {
 console.log(myGlobalVariable);
}
// Call the function
sayHello(); // Output: Hello, world!
// You can also access the global variable outside of functions
console.log(myGlobalVariable); // Output: Hello, world!

위의 예제에서 'myGlobalVariable'은 함수의 외부에 있는 코드의 최상위 수준에서 선언됩니다. 이렇게 하면 전역 변수가 됩니다. 기능 내부와 외부 모두에서 액세스하고 사용할 수 있습니다. 'sayHello()' 함수에서 'console.log()'을 사용하여 'myGlobalVariable'의 값을 출력하기만 하면 됩니다. 함수가 호출되면 콘솔에 "Hello, world!"가 출력됩니다.

나중에 함수 외부에서 다시 전역 변수에 액세스하고 동일한 출력을 제공하는 'console.log()'을 사용하여 값을 인쇄합니다.

결론

JavaScript 전역 변수는 선언된 위치에 관계없이 코드 내의 모든 위치에서 액세스할 수 있는 변수입니다. 전역 변수는 특정 함수나 블록 외부에서 선언되어 전체 프로그램에서 액세스할 수 있습니다.

var을 사용하여 전역 변수를 선언할 수 있지만 더 많은 제어와 예측 가능성을 제공하는 블록 범위 지정으로 인해 변수 선언에 let 또는 const 키워드를 사용하는 것이 좋습니다.

전역 변수를 사용하면 코드의 다른 부분에서 데이터를 공유하고 액세스할 수 있으므로 편리함과 접근성을 제공할 수 있습니다. 그러나 전역 변수를 사용할 때는 과도하게 사용하면 잠재적인 명명 충돌, 코드 유지 관리 문제 및 캡슐화 부족이 발생할 수 있으므로 주의해야 합니다.