자바스크립트 - 오브젝트 순회하기 (Iterate JavaScript Object)

자바스크립트 전체 링크

 

다음과 같은 객체가 있다.

let info = {
  id: 1,
  name: "blood",
  type: "strawberry",
  address: {
    city: "seoul",
    town: "gangnam",
    road: 2,
  },
};

 

자바스크립트 객체(오브젝트)는 순서가 없기 때문에 배열처럼 순회할 수 없다.

Object의 메서드를 이용해서 순회하는 것은 가능하다.

 

Object.keys() 메서드를 이용하면 오브젝트의 key만 따로 배열로 모을 수 있다.

let info = {
  id: 1,
  name: "blood",
  type: "strawberry",
  address: {
    city: "seoul",
    town: "gangnam",
    road: 2,
  },
};

let key = Object.keys(info);
console.log(key); // [ 'id', 'name', 'type', 'address' ]

 

Object.values() 는 값만 따로 배열로 모은다.

let info = {
  id: 1,
  name: "blood",
  type: "strawberry",
  address: {
    city: "seoul",
    town: "gangnam",
    road: 2,
  },
};

let value = Object.values(info);
console.log(value);
/*
    [
    1,
    'blood',
    'strawberry',
    { city: 'seoul', town: 'gangnam', road: 2 }
    ]
*/

 

마지막으로 key와 value 함께 쌍으로 모으고 싶다면, Object.entries()를 사용하면 된다.

let info = {
  id: 1,
  name: "blood",
  type: "strawberry",
  address: {
    city: "seoul",
    town: "gangnam",
    road: 2,
  },
};

let pair = Object.entries(info);
console.log(pair);
/* 
    [
    [ 'id', 1 ],
    [ 'name', 'blood' ],
    [ 'type', 'strawberry' ],
    [ 'address', { city: 'seoul', town: 'gangnam', road: 2 } ]
    ]
*/

 

전체 코드는 다음과 같다.

let info = {
  id: 1,
  name: "blood",
  type: "strawberry",
  address: {
    city: "seoul",
    town: "gangnam",
    road: 2,
  },
};

let key = Object.keys(info);
console.log(key); // [ 'id', 'name', 'type', 'address' ]

let value = Object.values(info);
console.log(value);
/*
    [
    1,
    'blood',
    'strawberry',
    { city: 'seoul', town: 'gangnam', road: 2 }
    ]
*/

let pair = Object.entries(info);
console.log(pair);
/* 
    [
    [ 'id', 1 ],
    [ 'name', 'blood' ],
    [ 'type', 'strawberry' ],
    [ 'address', { city: 'seoul', town: 'gangnam', road: 2 } ]
    ]
*/