[자바스크립트] for in, for of, 그리고 배열과의 관계에 대해서

for...in과 for...of 문은 생김새는 비슷하나 의미적으로 큰 차이가 있다.

• for...in iterates over the enumerable properties of an object

• for...of iterates over the property values of objects

영어로 보면 뭔지 잘 모르겠다. 그래서 코드로 찍어보자면 아래와 같이 나온다.

let string = "test";

for(let i in string){
	console.log(i); // 0, 1, 2, 3
}

for(let i of string){
	console.log(i); // t, e, s, t
}

코드로 보자면 for...in 는 인덱스를 가져오고 for...of는 해당 값을 가져오는 차이점을 보인다.

주제는 배열과의 관계이나  문자열에도 for...in를 쓰게 되면 한글자씩 가져오니 사용하면 좋다.

다른 글을 보면

for...in의 경우 초창기 자바스크립트에서부터 사용가능했지만 되도록 사용하지 말라고 권고한다. 그 이유에 대해 잠깐 살펴보겠다.

var arr = ['zero','one','two'];
console.log(arr.length) // 3

arr.name ='numbers';
arr.id = 'Num';

console.log(arr.length) // 3 

arr[3]='three'
console.log(arr.length) // 4 

저 코드가 끝난후에 arr는 다음과 같다.

["zero", "one", "two", "three", name: "numbers", id: "Num"]

이 상태에서 for...in과 for...of를 돌려보겠다.

for...of문의 경우 딱 일반적인 방법으로 들어간 배열의 요소들만 조회했다. 당연해 arr[i]의 경우 arr['zero']가 되어 undefined된다.

하지만 for...in의 경우, 이상한 것들까지 전부다 들어갔다. 

또한

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

개발하다보면 편의성을 위해서 위와 같은 코드를 작성한다. 해당 코드를 작성하면 모든 array에서 getIndex를 사용가능하다. 그러면 똑같이 for...in 를 돌면 추가된 메소드도 같이 출력된다. 

따라서 결론을 말하면

일단 arr 같은 배열을 안쓰는것이 합당하다. 자바스크립트의 경우 배열도 객체와 같이 Key:value 형태로 존재하나 저렇게 혼합해서 쓰다보면 언젠가 피를 보게 된다. 

또한 Array.prototype.getIndex 같은 코드가 없다고 보장할 수 없다. 

따라서,

"배열에서는 for...in 를 쓰면 안된다!! for...of 나 forEach를 쓰자"

forEach는 반복문이 아니라 배열메소드이긴 하지만 같은 기능이니 그냥 잘 쓰자