for in vs for of 반복문 비교, Array .. in이 가능해서 생기는 문제

 오늘 Typescript를 계속 공부하는 중에 갑자기 이상한 버그...는 아니고 미묘한 문법 차이로 생긴 1시간의 삽질을 방지하기 위해서 이 글을 올린다.

삽질했던 코드다. 여기서 설명하지는 않는다.

 

 우선 이분의 글을  참고하였으니 좀 더 자세한 설명을 원하면 여기로 가면된다.

https://jsdev.kr/t/for-in-vs-for-of/2938

자바스크립트 for in vs for of 반복문 정리

 

 바로 본론을 이야기하면 이렇다. 분명 JS배울 때 같이 배웠을 텐데 까먹은 내가 원망스럽다

1. for .. in 반복문은 object의 key를 반복한다.

2. for .. of 반복문은 object의 value를 반복한다.

 

const test_obj = {
	a: 1, b: 2, c: 3,
};

for (key in test_obj) {
	console.log(key);
}
// a b c

for (item of test_obj) {
	console.log(item);
}
// 1 2 3

 

다만 of연산자는 es6부터 지원되는 사양이기 때문에, 그 이전에는 다른 방법을 이용해야한다.

 

문제는 Object를 다룰 때가 아니라 Array를 다룰 때, 헤까닥 해서 of를 쓰는게 아니라 in을 써버리면 생기는 문제에 있다.

예제를 따라하느냐고 뇌빼고 코딩해서 in / of의 차이를 잊어버렸다면 함정에 빠지는 경우가 있다.

 

Array도 in을 써서 반복이 가능하다. Array는 key로써 number만을 받는 Object라고 생각하면 된다. 그러면 이렇게 되는데...

const test_arr = [5, 6, 7];

for (num in test_arr) {
	console.log(num);
}
// 0, 1, 2

이 코드는 잘 동작하고,  짜증나게도 어떠한 에러도 뱉지 않는다. 당연하지만 코딩한대로 일을 하고 있을 뿐이다.

 

하지만 여러분은 이런 결과를 원했을 것이다.

const test_arr = [5, 6, 7];

for (num of test_arr) {
	console.log(num);
}
// 5, 6, 7

꼭 차이점을 염두에 두고 쓰도록 하자! 안그러면 삽질 할 수도 있다.