자바스크립트를 for of 와 for in 의 정확한 차이가 뭔가요?

Question

for of 과 for in 가 그냥 코드로 보기엔

큰 차이가 없어보이는데.

for of 와 for in 의 정확한

차이점을 알고싶습니다.

가능하다면 간단한 예시도 하나 주시면

감사하겠습니다.

Answer 1

for in 은 사용자가 정의한 객체를 대상으로 하여 순차적으로 반복을 수행하는 것이고 for of 는 자바스크립트에서 제공하는 컬렉션 객체를 대상으로 반복을 수행하는 것입니다. 대표적인 컬렉션 객체에는 배열 등이 있습니다.

for in

var obj = { a: 1, b: 2, c: 3 }; for (var prop in obj) { console.log(prop, obj[prop]); // a 1, b 2, c 3 }

for of

var iterable = [10, 20, 30]; for (var value of iterable) { console.log(value); // 10, 20, 30 }

Answer 2

for of와 for in 반복문의 차이는 for in 반복문의 경우 객체 순환을 탐색하여 반복하고 for of의 경우는 배열 요소를 반복하는 반복문입니다.

var test = [1,2,3]; 과 같은 배열을 for in과 for of 반복문을 쓰게 되면 for in의 경우 객체의 키 값인 0,1,2 값이 나오며 for of의 경우 배열에 저장된 값인 1,2,3이 출력되게 됩니다.

그리고 var object = {a: 1, b:2 }; 와 같은 객체를 위의 반복문으로 반복할 경우 for in의 경우 a,b를 출력하지만 for of의 경우는 에러를 출력합니다.

Answer 3

안녕하세요?

for of 와 for in 의 차이는 object 안의 요소중에 iterable 인지 아닌지의 차이에 따라 다릅니다.

하나의 object 가 있다고 예를 들어서 보면

let a = [ 1, 2, 3]

라고 가정하면 1, 2, 3, 은 array 라서 iterable 합니다. (반복할수 있는)

이 a 에 필드를 하나 추가해서

a.test = 'abc' 라고 추가를 하면 a 의 test 는 iterable 하지 않습니다.

현재 a 의 값은 아래의 이미지에 나타나듯이 [1, 2, 3, test: 'abc'] 입니다.

이것을 염두해두고

for in 과 for of 를 비교하면

위의 결과 이미지 처럼 a 에 있는 iterable 한 요소들만 출력이 되는 반면, for in 은 iterable + non iterable 포함하여 a 에 있는 요소 전부를 출력합니다.

그럼 도움이 되었으면 좋겠습니다.

수고하세요.