for...in 과 for...of

몇일 전 

이런 에러를 만났다. for...in, for...of 가 헷갈린다는 이유로 매번

for( let i=0; i<array.length(또는 object.length); i++){

를 썼는데.. 이젠 홗실히 공부하고 적절하게 잘 써야할 것 같다. 

1. for...in 문

for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다.

for...in 반복문은 '객체'의 속성(property)를 순회(반복)하는데 사용되며 키값에 접근하지만 값에 접근하는 방법을 제공하지는 않는다. 

1) for...in을 사용하는 경우

mdn의 내용을 가져왔다.

💡for...in이 객체의 반복을 위해 만들어졌지만, 배열의 반복을 위해서는 추천되지 않고,  Array.prototype.forEach(), for...of가 이미 존재합니다. 그러면 for...in은 어떻게 사용하는 것이 좋을까요?

이것은 쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우(속성이 "키"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다.💡

즉, for...in은 배열보단 키-값 쌍을 가지는 객체의 속성을 확인할 때 (접근 할 때)사용하기 좋다. 

2)객체의 반복과 for ...in

var obj = {a:10, b:11, c:12};
for (property in obj){
    console.log("key: " + typeof property + " " + property + "; value: " + typeof obj[property] +  " " + obj[property]);
}
//실행 결과
// key: string a; value: number 10
// key: string b; value: number 11
// key: string c; value: number 12

3) 배열의 반복과 for...in

var array = [10,11,12];
for (property in array){
    console.log("index: " + typeof property + " " + property + "; value: " +typeof array[property] +  " " + array[property]);
}
// 실행 결과
// index: string 0; value: number 10
// index: string 1; value: number 11
// index: string 2; value: number 12

 

2. for...of문

for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복한다. 

1) for...of 와 for...in의 차이

mdn의 내용을 가져왔다.

💡for...in 루프는 객체의 모든 열거가능한 속성에 대해 반복합니다. 반면 for...of 구문은 컬렉션 전용입니다. 모든 객체보다는, [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다.💡

그래서 키-값 쌍을 가지는 객체에서 for...of문을 썼을 때, Uncaught TypeError: obj is not iterable 에러가 뜬 것이었나보다. 

2) 배열의 반복과 for...of

var array = [100,110,120];
for (el of array){
    console.log("index: " + typeof el + " " + el + "; value: " +typeof array[el] +  " " + array[el]);
}
//실행결과
// index: number 100; value: undefined undefined
// index: number 110; value: undefined undefined
// index: number 120; value: undefined undefined

for...in을 사용했을 때와 다르다. 바로 속성'값'에 접근한다. 

let iterable = [10, 20, 30];
for (let value of iterable) {
  console.log(value);
}
// 실행결과
// 10
// 20
// 30

3) 문자열의 반복과 for...of

let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
//실행 결과
// "b"
// "o"
// "o"

이

Reference

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

codingnuri.com/javascript-tutorial/javascript-for-in-statement.html

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

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of