모던 자바스크립트

Iteration Object

기존 코드에서 객체를 순환 처리할 경우, for..in문을 사용했습니다.

var picture = {
  large: 'https://randomuser.me/api/portraits/men/65.jpg',
  medium: 'https://randomuser.me/api/portraits/med/men/65.jpg',
  thumbnail: 'https://randomuser.me/api/portraits/thumb/men/65.jpg'
};

for (var key in picture) {
  if (picture.hasOwnProperty(key)) {
    var value = picture[key];
    console.log(key, value);
  }
}

ES6+ 부터 객체를 순환 처리할 경우 for..of문을 사용할 수 있습니다.

Object.keys()

객체의 속성을 배열 객체로 반환합니다.

const picture_keys = Object.keys(picture);
// 출력: ['large', 'medium', 'thumbnail']

for (let key of picture_keys) {
  console.log(key);
}

Object.values()

객체의 값을 Iterable 프로토콜에 준하는 객체로 반환합니다.

const picture_values = Object.values(picture);
// 출력: ['https://...', 'https://...', 'https://...']

for (let value of picture_values) {
  console.log(value);
}

Object.entries()

객체의 속성, 값을 쌍으로 하는 배열을 묶은 배열을 반환합니다.

const picture_entries = Object.entries(picture);
// 출력:  
// [
//   ['large', 'https://...' ],
//   ['medium', 'https://...'],
//   ['thumbnail', 'https://...']
// ]

for (let [key, value] of picture_entries) {
  console.log(key, value);
}

NOTE

배열 객체 메서드를 사용하여 순환하는 것도 가능합니다.

// 속성 순환
Object.keys(picture).forEach(key => console.log(key));

// 값 순환
Object.values(picture).forEach(value => console.log(value));

// 속성, 값 순환
Object.entries(picture).forEach(entry => {
  const [key, value] = entry;
  console.log(key, value);
});

참고

← Generator →