[JS/ES6] for in의 단점, for of의 등장

for in 의 단점

먼저 객체의 한 종류인 배열을 순환하는 for문인 for in 을 알아보겠습니다.

var data = [1,2,undefined,NaN,null,""];

Array.prototype.getIndex = function(){};

for(let idx in data) {

console.log(data[idx]);

}

결과 출력문을 예상하면 data에 들어있는 1, 2, undefined, NaN, null, "" 만 출력되어야 할 것 같은데

실제로 출력해보면

마지막에 함수도 찍히게 됩니다. Array의 프로토타입으로 getIndex이름의 함수를 추가해주었기 때문인데요.

for in은 prototype으로 상위에 추가된(상위는 Array객체) 객체들까지도 나타내게 됩니다.

이러한 위험성 때문에 for in 대신 for of 로 배열을 순환합니다.

for of

var data = [1,2,undefined,NaN,null,""];

Array.prototype.getIndex = function(){};

for(let value of data) {

console.log(value);

}

결과를 확인하면 for in에서 출력된 getIndex의 함수가 나오지 않았습니다.

또, for in 에서는 index를 받았지만 for of 에서는 배열의 각 값을 하나로 보고 출력합니다.

배열 뿐만 아니라 문자열 순환에도 유용합니다.

var str = "hello world~~";

for (let value of str) {

console.log(value);

}

이렇게 공백까지도 잘 순환하여 문자 단위로 출력됩니다.