41. Looping Objects: Object Keys, Values, and Entries

안녕하세요. 박기린 입니다.

지금부터 Object 예약어를 이용해서 Object loop를 만드는 방법에 대해 알아보겠습니다.

 

 

const openingHours = {
  thu: {
    open: 12,
    close: 22,
  },
  fri: {
    open: 11,
    close: 23,
  },
  sat: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

우선 openingHours 라는 객체가 있다고 가정을 하고 설명을 시작하겠습니다.

 

 

---

Object.Keys() - names of properties

Object.Keys()안에 인수로 Object 변수를 넣습니다. 그러면 해당 Object가 가진 property의 이름들을 Array에 담아서 return 합니다.

const properties = Object.keys(openingHours);
console.log(properties); // ['thu', 'fri', 'sat']

let openStr = `We are open on ${properties.length} days: `;
for (const day of properties) {
  openStr += `${day}, `;
}
console.log(openStr);

 

 

 

 

---

Object.values() - values of properties

Object.values()안에 인수로 Object 변수를 넣습니다. 그러면 해당 Object가 가진 values(propertIes가 가진 값들)을 Array에 담아서 return 합니다.

const values = Object.values(openingHours);
console.log(values);

 

 

 

---

Object.entries()

Object.entries()는 [property이름, property 안에 담긴 value] 를 묶어서 Array로 저장한 후, Array에 하나씩 담는 구조입니다.

말로는 설명이 어려우니, openingHours Object의 entries를 보여드리겠습니다.

[key(propertyName), value]을 element로 가지는 Array를 반환합니다. ===> 이중 Array를 반환합니다.

 

 

응용 예시

const entries = Object.entries(openingHours); // entries = openingHours.entries()

for (const [key, {open, close}] of entries) {
  console.log(`On ${key} we open at ${open} and close at ${close}`);
}