자바스크립트 객체 순회하기

2022년 02월 10일

자바스크립트에서 객체 순회하기

평소에 배열의 원소들을 순회하거나 다루는 작업은 많이 있었지만, 객체는 이런 경험이 별로 없었던 것 같아서 따로 정리해보려 합니다.

let obj = {
  a: [1, 2, 3, 4, 5],
  b: [6, 7, 8, 9, 10],
  c: [11, 12, 13, 14, 15],
};

Object.keys()

객체의 키 목록을 배열로 반환
객체의 내장 메서드가 아닌 객체 생성자인 Object의 내장 메서드

console.log(Object.keys(obj)); //[ 'a', 'b', 'c' ]

반복문을 사용해서 values 조회

let keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  let key = keys[i];
  let value = obj[key];
  console.log(value);
  // [ 1, 2, 3, 4, 5 ]
  // [ 6, 7, 8, 9, 10 ]
  // [ 11, 12, 13, 14, 15 ]
}

Object.values()

// console.log(Object.values(obj)); // [ [ 1, 2, 3, 4, 5 ], [ 6, 7, 8, 9, 10 ], [ 11, 12, 13, 14, 15 ] ]

ES6에서 객체의 key와 value 값을 배열로 반환하는 메서드 Object.entries()

let entries = Object.entries(obj);
console.log(entries);
// [
//     [ 'a', [ 1, 2, 3, 4, 5 ] ],
//     [ 'b', [ 6, 7, 8, 9, 10 ] ],
//     [ 'c', [ 11, 12, 13, 14, 15 ] ]
//   ]

for …in

ES6에서 추가된 문법으로 객체와 배열 모두 순회가 가능하다.

for (let key in obj) {
  let value = obj[key];
  console.log(`key : ${key}, value :  ${value}`);
  // key : a, value :  1,2,3,4,5
  // key : b, value :  6,7,8,9,10
  // key : c, value :  11,12,13,14,15
}