JAVASCRIPT 스코프(Scope) - 1. 전역 스코프

스코프(scope)란?

▶ 스코프(scope)는 변수나 함수가 유효한 범위를 의미합니다.
즉, 스코프는 코드의 어떤 부분에서 변수를 참조할 수 있는지를 결정하는 것으로
오늘은 자바스크립트에 있는 스코프 유형에 대해 알아보겠습니다.

1. 전역 스코프(Global Scope)

▶ 전역 스코프(global scope)는 자바스크립트 전체에서 접근할 수 있는 변수나 함수가 존재하는 범위를 의미합니다.
전역 스코프는 전역 객체(Global Object)에 속하며, 브라우저 환경에서는 window 객체가 전역 객체로 사용되고 Node.js 환경에서는 global 객체가 전역 객체로 사용되는 차이가 있습니다.

// 브라우저 환경 전역 변수 선언
var globalVar = "I'm a global variable";

console.log(window.globalVar); // "I'm a global variable"

// Node.js 환경 전역 변수 선언
global.globalVar = "I'm a global variable";

console.log(global.globalVar); // "I'm a global variable"

전역 스코프(Global Scope)의 특징

1. 모든 코드에서 접근 가능

: 전역 변수는 스크립트의 어느 부분에서도 접근할 수 있지만 그로 인해 전역 변수를 잘못 사용하면 코드의 다른 부분과 충돌할 가능성 또한 높아집니다.

2. 전역 객체의 속성

: 전역 변수는 전역 객체의 속성으로 추가되어 브라우저에서는 window 객체, Node.js에서는 global 객체의 속성이 됩니다.

3. 초기화

: 만약 전역 스코프를 선언하지 않은 상태에서 변수에 값을 할당하면 자동으로 전역 변수가 됩니다.

// 전역 변수를 선언한 경우
var globalVar = "I'm a global variable";

function test() {
    console.log(globalVar); // "I'm a global variable"
}

test();
console.log(globalVar); // "I'm a global variable"

// 전역 변수를 선언하지 않은 경우
function test() {
    globalVar = "I'm a global variable without var";
}
test();
console.log(globalVar); // "I'm a global variable without var"

4. 오염 가능성

: 전역 변수가 많아지면 전역 네임스페이스가 오염될 가능성이 크기 때문에 이 경우, 변수 이름 충돌이나 예기치 않은 동작을 유발할 수 있습니다.
네임스페이스(namespace) - 코드에서 식별자(변수, 함수, 객체 등)의 범위와 이름 충돌을 관리하기 위한 방법

// 전역 변수 선언
var name = "Alice";

// 다른 스크립트나 함수에서 동일한 이름의 변수 선언
var name = "Bob"; // 이전 변수 덮어쓰기

console.log(name); // "Bob"

• 위의 예시처럼 먼저 name이라는 변수에 값을 선언한 상태에서 똑같이 name이라는 변수에 값을 주게 되면 가장 마지막에 선언한 값으로 덮어쓰기가 되는 충돌이 발생합니다.

네임스페이스 올바른 사용 방법

▶ 전역 변수는 어디서나 접근할 수 있기 때문에 관리가 어렵고, 특히 큰 프로젝트에서는 변수 충돌 등의 문제가 발생하기 쉽습니다. 따라서 충돌되는 경우를 막기 위해선 전역 변수의 사용은 가능한 한 지양하고 필요하다면 객체를 사용해 네임스페이스를 만들거나, 즉시 실행 함수 표현(IIFE)등을 사용해 전역 네임스페이스 오염을 최소화하는 것이 좋습니다.
예시를 통해 살펴볼게요!

(1) 객체 사용

// 네임스페이스 객체 생성
var MyApp = MyApp || {};

// 네임스페이스 내에 변수와 함수 추가
MyApp.name = "Alice";
MyApp.sayHello = function() {
    console.log("Hello, " + MyApp.name);
};

// 다른 스크립트에서 네임스페이스 사용
MyApp.name = "Bob";
MyApp.sayHello(); // "Hello, Bob"

• 위 예시에서 MyApp 객체는 네임스페이스 역할을 하는 객체로, 이렇게 객체를 만들어 준 후 변수값을 입력하면 name과 sayHello가 이미 MyApp 네임스페이스에 속해 있기 때문에 다른 스크립트에서 같은 이름의 변수를 사용해도 충돌하지 않으면서 전역 스코프를 오염시키지 않습니다.

(2) 즉시 실행 함수(IIFE) 사용

// (function() {})로 내부 함수 정의
(function() {
    var name = "Alice";

    function sayHello() {
        console.log("Hello, " + name);
    }

    // 내부 함수 호출
    sayHello(); // "Hello, Alice"
})(); // (); 로 즉시 실행

// 전역 스코프에 영향을 주지 않음
console.log(name); // ReferenceError: name is not defined

• 위 예시에서는 function sayHello() { … }로 내부 함수를 따로 정의해주었기 때문에 IIFE 내부의 스코프에 존재하며, 외부에서는 접근할 수 없습니다. 또한 익명 함수 정의 뒤에 ();를 붙여 즉시 실행하도록 설정하여 함수가 정의되자마자 실행됩니다. 이렇게 따로 함수를 정의해주게 되면 IIFE 내부에서 정의된 변수나 함수는 전역 스코프를 오염시키지 않게 됩니다.

이렇게 오늘은 자바스크립트의 스코프(scope) 중 전역 스코프에 대해 알아봤는데요,
오늘 정리한 내용도 면접을 준비할 때 나올 수 있는 질문인만큼 미리미리 숙지해서 알아두면 좋을 것 같네요.
그럼 다음엔 또 다른 면접 정보들을 가져와보도록 하겠습니다 😁!