자바스크립트에서는 전역 변수와 지역 변수의 이름이 충돌되는 경우가 종종 발생합니다. 이러한 충돌은 코드의 실행에 문제를 일으킬 수 있으며, 예기치 않은 동작으로 이어질 수도 있습니다. 따라서 전역 변수와 지역 변수의 이름 충돌을 방지하는 방법을 알아보겠습니다.

1. 변수 선언 시 var, let, const 사용

변수를 선언할 때는 var, let, const 키워드를 사용해야 합니다. 이 세 가지 키워드는 변수의 범위(scope)를 결정하는 역할을 합니다. var는 함수 스코프를 가지며, let과 const는 블록 스코프를 가집니다.

전역 변수를 선언할 때는 var 대신 let이나 const를 사용하세요. 이렇게 하면 전역 변수가 혼동되거나 덮어쓰여지지 않도록 할 수 있습니다.

// 전역 변수
let globalVariable = 10;

function foo() {
  // 지역 변수
  let localVariable = 5;
  
  console.log(globalVariable); // 10
  console.log(localVariable); // 5
}

console.log(globalVariable); // 10
console.log(localVariable); // ReferenceError: localVariable is not defined

2. 모듈 시스템 사용

모듈 시스템을 사용하면 전역 변수와 지역 변수를 명확하게 분리할 수 있습니다. 모듈은 독립적인 스코프를 가지며, 다른 모듈과 변수 이름이 충돌할 위험이 매우 적습니다.

ES6의 import와 export를 사용하여 모듈을 작성하고, 필요한 변수를 모듈 간에 공유하면 됩니다.

// moduleA.js
export const moduleAGlobalVariable = 10;

// moduleB.js
export const moduleBGlobalVariable = 20;

// main.js
import { moduleAGlobalVariable } from './moduleA.js';
import { moduleBGlobalVariable } from './moduleB.js';

console.log(moduleAGlobalVariable); // 10
console.log(moduleBGlobalVariable); // 20

3. 네임스페이스 객체 사용

네임스페이스 객체를 사용하여 변수 이름 충돌을 방지할 수 있습니다. 네임스페이스 객체는 전역 변수로 하나의 객체를 생성하고, 해당 객체에 변수를 추가하는 방식입니다.

// namespace.js
const myNamespace = {
  globalVariable: 10
};

// main.js
console.log(myNamespace.globalVariable); // 10

4. IIFE (Immediately Invoked Function Expression) 사용

IIFE는 함수를 정의하고 즉시 호출하는 패턴입니다. IIFE 내부에서 선언된 변수는 함수 스코프에 속하므로, 해당 변수들은 외부에서 접근할 수 없습니다.

(function() {
  // IIFE 내부의 지역 변수
  let variable = 5;
  
  // 외부에서 접근 불가능
  console.log(variable); // 5
}());

console.log(variable); // ReferenceError: variable is not defined

요약

변수의 범위(scope)를 명확히 지정하고, 모듈 시스템이나 네임스페이스 객체를 활용하여 전역 변수와 지역 변수의 이름 충돌을 방지할 수 있습니다. 충돌을 방지함으로써 코드의 가독성과 유지보수성을 증가시킬 수 있습니다.