[자바스크립트] 객체(Object) 반복문 돌리는 법

for...in 문, for...of 문

for...in

for...in 문은 객체의 key를 하나씩 가져온다.

const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
}

for (const key in obj) {
  console.log(obj[key]);
}

// value1
// value2
// value3

for...of

for...of 문은 iterable한 속성을 지닌 String, Array, TypedArray, Map, Set에서 값을 하나씩 가져온다.
객체는 iterable이 아니기 때문에 사용할 수 없다.
그렇기 때문에 Object.keys(object) 혹은 Object.values(object)를 통해 배열로 바꿔서 값을 가져와야 한다.
Object.entries(object)를 이용하면 enumerable 속성의 key와 value 배열을 동시에 가져올 수도 있다.

const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
}

for (const value of obj) { // TypeError: obj is not iterable
  console.log(value);
}

for (const key of Object.keys(obj)) {
  console.log(key);
}

// key1
// key2
// key3

for (const value of Object.values(obj)) {
  console.log(value);
}

// value1
// value2
// value3

for (const [key, value] of Object.entries(obj)) {
  console.log(key + ': ' + value);
}

// key1: value1
// key2: value2
// key3: value3