전역 네임스페이스 오염(Global Namespace Pollution)
전역 네임스페이스를 오염시키면 이름 충돌(name collision)이 발생합니다. 이름 충돌은 여러 JavaScript 라이브러리를 함께 사용하는 대규모 프로젝트에서 매우 흔하게 나타나는 문제입니다. 그렇다면 이름 충돌이 정확히 무엇인지, 왜 위험한지 자세히 살펴보겠습니다.
두 팀 A1과 A2가 하나의 프로젝트에 함께 참여하는 상황을 가정해 보겠습니다. 두 팀은 각자 자신만의 JavaScript 파일, 즉 TeamA1.js와 TeamA2.js를 작성했습니다.
TeamA1.js
A1 팀은 fname(이름)과 lname(성), 두 개의 매개변수를 가진 student 함수를 작성했습니다.
function student(fname, lname){
this.fname = fname;
this.lname = lname;
this.getFullName = function (){
return this.fname + " " + this.lname;
}
}TeamA2.js
A2 팀은 같은 이름의 student 함수를 fname, mname(중간 이름), lname 세 개의 매개변수와 함께 작성했습니다.
function student(fname, mname, lname){
this.fname = fname;
this.mname = mname;
this.lname = lname;
this.getFullName = function (){
return this.fname + " " + this.mname + " " + this.lname;
}
}이제 위의 JavaScript 파일들을 실행할 HTML 파일을 만들어 보겠습니다. 두 JS 파일은 <head> 태그 안에 배치합니다.
HTML 파일
<html>
<head>
<script type = "javascript" src = "TeamA1.js"></script>
<script type = "javascript" src = "TeamA2.js"></script>
</head>
<body>
<div id = "resultDiv"></div>
<script>
document.getElementById("resultDiv").innerHTML =
new student("Rajendra", "prasad").getFullName();
</script>
</body>
</html>
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
출력 결과
Rajendra prasad undefined
결과 분석
여기에는 student 함수가 두 개 존재합니다. 하나는 매개변수가 2개인 함수, 다른 하나는 매개변수가 3개인 함수입니다. 우리는 2개짜리 student 함수를 사용하려고 했기 때문에 HTML 파일에서도 두 개의 인수("Rajendra", "prasad")만 전달했습니다. 하지만 실제 출력된 결과는 "Rajendra prasad undefined"입니다. 즉, 코드가 2개짜리 함수가 아니라 3개짜리 함수를 실행했다는 의미입니다.
그 이유는 JavaScript가 함수 오버로딩(function overloading)을 지원하지 않기 때문입니다. 같은 이름의 함수가 여러 개 선언되면 JavaScript는 나중에 선언된 함수가 앞선 함수를 덮어쓰기(override) 합니다. 이 예제에서는 매개변수가 3개인 함수(TeamA2.js)가 매개변수가 2개인 함수(TeamA1.js)보다 나중에 로드되었기 때문에, A2 팀의 함수가 A1 팀의 함수를 덮어써 버렸고, 그 결과 mname 값이 없으므로 출력에 undefined가 표시된 것입니다. 만약 두 JS 파일의 로드 순서가 반대였다면 출력 결과는 "Rajendra prasad"가 되었을 것입니다.
바로 이런 상황에서 이름 충돌이 일어났다고 말할 수 있습니다. 두 팀 모두 같은 이름의 student 함수를 만들었기 때문입니다. 따라서 무엇이든 전역 네임스페이스에 추가하는 것은 매우 위험하며, 반드시 피해야 합니다. 다른 사람이 동일한 변수명이나 함수명을 사용하기만 해도 이름 충돌이 발생해 예상치 못한 버그로 이어질 수 있습니다. 이러한 문제를 방지하려면 네임스페이스 객체, 모듈 패턴, ES 모듈 등을 활용해 코드를 격리하는 것이 좋습니다.