[Effective JavaScript] 전역 객체의 사용을 최소화하라

김범식·2023년 6월 18일
0

Effective JavaScript

목록 보기
18/33
post-thumbnail

전역 변수는 어떤 선언문도 필요하지 않기 때문에 만들기 쉽고, 프로그램 전체의 모든 코드에서 자동으로 접근 가능하다. 하지만 전역 변수를 정의하는 것은 모든 살마과 공유하는 공통의 네임스페이스를 더럽히고 뜻하기 않게 이름이 충돌할 만한 가능성을 만든다.

가능한 한 모든 변수를 지역변수로 유지하는게 최선이다. 전역 변수만으로도 프로그램을 작성할 수 있지만, 문제의 소지가 많다. 심지어 매우 간단한 함수라도 임시변수를 전역으로 정의하면 어떤 다른코다가 똑같은 변수 이름을 사용하는지를 걱정해야 한다.

var i, n, sum;
function averageScore(players){
	sum = 0;
	for(i = 0,n = players.length; i < n;i++){
		sum += score(players[i]);
	}
	return sum / n;
}

averageScore가 의존하고 있는 score 함수에서 다른목적으로 동일한 이름의 전역변수를 사용한다면 이 함수는 제대로동작하지 않을 것이다.

var i, n,sum // averageScore
function score(players){
	for(i = 0,n = players.levels.length; i < n;i++){
		sum +=player.levels[i].score;
	}
	return sum;
}

해결방법은 이런 변수들을 지역변수로 유지하는 것이다.


function averageScore(players){
**var i, n, sum; //지역변수**
	sum = 0;
	for(i = 0,n = players.length; i < n;i++){
		sum += score(players[i]);
	}
	return sum / n;
}

function score(players){
**var i, n, sum; //지역변수**
	for(i = 0,n = players.levels.length; i < n;i++){
		sum +=player.levels[i].score;
	}
	return sum;
}

자바스크립트의 전역 네임스페이스는 전역 객체로도 노출되어있다. 이 전역객체는 프로그램의 최상단에서 this 키워드로 접근할 수 있다.

this.foo ; // undefined
foo = "global foo";
this.foo //  "global foo"

유사하게 전역 객체를 갱신하면 자동으로 전역 네임스페이스가 갱신된다.

var foo = "global foo";
this.foo = "changed";
foo //  "changed"

이는 전역 변수를 생성하기 위해 전역 스코프에서 var로 정의하거나, 전역객체에 추가하며 되는 두가지 방법을 사용할 수 있다는 뜻이다. 두가지 방법 모두 동작하지만 var 선언문이 더 명백하게 프로그램의 스코프에 영향을 준다는 이점이 있다.

전역 객체의 사용을 제한하는게 최선이지만 한가지 특별한 필수적인 사용법이 있다. 전역 객체는 전역환경을 동적으로 반영하기 때문에, 해당 플랫폼에서 사용 가능한 기능을 탐지하기 위해서 실행환경에 대한 질의를하는데 사용할 수 있다.

예를 들어 es5 json데이터 형식을 읽고 쓰기 위한 새로운 전역 JSON 객체를 제공한다. JSON객체를 제공하거나 혹은 아직 제공하지 않은 실행 환경에 임시방편으로 코드를 배포하기 위해, 해당 객체의 존재 여부를 전역 객체에서 확인하고 대체제로 사용할 수 있는 구현체를 제공할 수 있다.

if(!this.JSON)
	this.JSON = {
		parse:...
		stringify:...
	};
}

물론 이미 JSON의 구현체를 제공하고 있다면 단순하게 그 구현체를 조건없이 사용할 수도 있다. 하짐나 호스트 실행환경에 의해 제공되는 내장구현체가 대부분 더 선호된다.

기억해야할 점

  • 전역 변수를 선언하지 마라
  • 가능하면 변수를 지역적으로 선언하라
  • 전역 객체에 프로퍼티를 추가하지 마라
  • 플랫폼의 기능 탐지를 위해 전역 객체를 사용하라
profile
frontend developer

0개의 댓글