자바스크립트 코딩 기법과 핵심 패턴-for in 루프

for-in 루프

for-in 루프는 배열이 아닌 객체를 순회할 때만 사용해야 한다. for-in 으로 루프를 도는것을 열거 라고도 한다.

// 객체

var man = {

hands: 2,

legs: 2,

heads: 1

};

// 코드 어딘가에서 모든 객체에 메서드 하나가 추가 되었다.

if(typeof Object.prototype.clone === 'undefined'){

Object.prototype.clone = function(){};

};

이 예제에서는 객체 리터럴을 사용하여 man 이라는 이름의 간단한 객체를 정의했다. man을 정의하기 전이나 후 어디선가 Object 프로토타입에 clone()이라는 이름의 메서드가 편의상 추가 되었다.

man을 열거할때 hasOwnProperty()를 호출하여 걸러내지 않으면 clone()이 나오게 되므로 동작방식이 바람직 하지 않다.

// 객체

var man = {

hands: 2,

legs: 2,

heads: 1

};

// 코드 어딘가에서 모든 객체에 메서드 하나가 추가 되었다.

if(typeof Object.prototype.clone === 'undefined'){

Object.prototype.clone = function(){};

};

//1.

// for-in 루프

for(var i in man){

if(man.hasOwnProperty(i)){ // 프로토타입 프로퍼티를 걸러낸다.

console.log(i + " : " + man[i]);

}

}

/*

콘솔에 출력되는 결과

hands : 2

legs : 2

heads : 1

*/

// 2.

// 안티패턴 :

// hasOwnProperty()를 확인하지 않는 for-in 루프

for(var i in man){

console.log(i + " : " + man[i]);

}

/*

콘솔에 출력되는 결과

hands : 2

legs : 2

heads : 1

clone : function(){}

*/

Object.property에서 hasOwnProperty()를 호출하는 것도 하나의 패턴이다.

for (i in man){

if(Object.prototype.hasOwnProperty.call(man, i)){ // 걸러내기

console.log(i + " : " + man[i])

}

}

이 방법은 man 객체가 hasOwnProperty를 재정의하여 덮어썼을 경우에도 활용 할 수 있다는 장점이 있다. 프로퍼티 탐색이 Object까지 거슬러 올라가지 않게 하려면 지역변수를 사용하여 이 메서드를 캐시하면된다.

var i,

hasOwn = Object.prototype.hasOwnProperty;

for(i in man){

if (hasOwn.call(man, i)){ // 걸러내기

console.log(i + " : " + man[i]);

}

}