객체의 반복문

배열은 순서가 있고 인덱스를 이용하면 반복이 가능하다.

const arr = ['coconut', 'banana', 'pepper', 'coriander']
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

이런 방법을 이용하면 쉽게 배열을 순회할 수 있다.

그렇다면 객체는 어떻게 순회할 수 있을까?

크게 두 가지 방법이 있다고 한다.

object.keys() / object.value()

먼저 자체 object 메서드를 사용하는 법이다.

Object.keys 메소드는 객체가 가지고 있는 키 목록을 배열로 리턴하는 메소드다.
객체의 내장 메소드가 아니라 객체 생성자인 Object 가 직접 가지고 있다.

Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴한다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

배열을 받아온 터라,
반복문을 사용할 수 도 있다!

const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']



for (let i = 0; i < keys.length; i++) {
  const key = keys[i] // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값
  console.log(key)  // name, weight, price, isFresh
}

object.entries()

Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 다차원 배열을 리턴한다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당한다.

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

for-in

객체를 순회하는 두번째 방법이다.
객체말고도 일반적인 배열에서 유용한 메서드다.

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

기존에 활용하던 i를 1씩 증가시키고
배열과 길이를 비교하는 코드를 생략할 수 있게 됐다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
}
/*
name
melon
weight
4350
price
16500
isFresh
true
*/