typeof 연산자의 잘못된 사용

첫 번째 공유할 사례는 JavaScript typeof 연산자의 잘못된 사용입니다.

객체 타입에 따른 코딩을 위해 typeof 연산자를 많이 사용하는데, 이 타입 비교가 잘못된 경우입니다.

잘못된 배열 타입 체크

var param = typeof pChangeMessageList == "Array" ? pChangeMessageList.join('|') : pChangeMessageList;

객체가 배열인지 판단하기 위한 코드로서 “Array” 혹은 “array”로 비교하는 경우가 종종 발견됩니다.

하지만 typeof의 반환 값에는 “Array” 혹은 “array”가 없습니다. (MDN을 참고하세요.)

따라서 객체가 배열인지 체크를 위해서는 Array.isArray() 혹은 jQuery, underscore 등의 라이브러리에서 제공하는 배열 체크 함수를 사용해야 합니다.

잘못된 undefined 타입 체크

updateZkConfigs: function (configs) {
  var zks = this.getZkServerHosts();
  var portValue = configs['zoo.cfg'] && Em.get(configs['zoo.cfg'], 'clientPort');
  var zkPort = typeof portValue === 'udefined' ? '2181' : portValue;
  var zksWithPort = this.concatZkNames(zks, zkPort);
  this.setZKConfigs(configs, zksWithPort, zks);
},

– Source: Apache Ambari 2.2.2 /app/controllers/main/host/details.js

‘undefined’의 오타로서 기본값 ‘2181’이 사용되지 않습니다. 개발자의 의도는 portValue가 설정되어 있지 않을 경우 기본 포트 2181을 사용하려는 것이나 의도대로 동작하지 않습니다.

오타를 수정하거나 다음과 같이 수정해야 합니다.

  var zkPort = !portValue ? '2181' : portValue;

아래는 “undefined”를 사용해야 하는데 “undeifned”로 잘못 사용하는 경우입니다.

jindo.$H.prototype.length = function() {
	var i = 0;
	for(var k in this._table) {
		if(this._table.hasOwnProperty(k)){
			if (typeof Object.prototype[k] != "undeifned" && Object.prototype[k] === this._table[k]) continue;

– Source: Naver Jindo 1.5.3 jindo.all.js

Wrap-Up

이상 typeof의 잘못된 사용례를 보았습니다. typeof의 반환 값은 다음과 같이 7개로 한정되어 있으니 타입 비교 시 주의하세요.

  • “undefined”
  • “object”
  • “boolean”
  • “number”
  • “string”
  • “function”
  • “symbol” (new in ECMAScript 2015)
comments powered by Disqus