JavaScript Treats 🍬 #1: 배열 분해로 객체 반복하기

소개✨

안녕하세요, 저는 이안입니다! 저는 주로 JavaScript로 약 11년 동안 코딩을 해왔습니다. 나는 그 몇 년 동안 몇 가지 까다로운 문제에 부딪혔기 때문에 "JavaScript Treats"시리즈를 만들기로 결정했습니다. 이러한 문제에 사용할 수 있는 유용한 유틸리티 기능이 될 것입니다.

오늘의 간식🍬

JavaScript에서 Object를 반복하는 방법에는 여러 가지가 있습니다. 오늘은 제가 가장 좋아하는 방법을 보여드리겠습니다.

const object = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
}

// convert object to a 2D array of [key, value] pairs.
const objectEntries = Object.entries(object);

// destructure object entry array into a key and value variable
objectEntries.forEach(([key, value]) => {
  console.log(key, value); // logs: "a 1"
})

테이크 홈 기능 💾

const iterateObject = (object, callback) => {
  Object.entries(object).forEach(callback);
}

const mapObject = (object, callback) => {
  return Object.entries(object).map(callback);
}

const reduceObject = (object, callback, defaultValue) => {
  return Object.entries(object).reduce(callback, defaultValue);
}

사용 예 🔧

iterateObject(object, ([key, value]) => {
    console.log(key, value); // a 1
});

const mapped = mapObject(object, ([key, value]) => value);

console.log(mapped); // [1, 2, 3, 4]

const reduced = reduceObject(object, (final, [key, value]) => {
    return {
    ...final,
    [key]: value + 1,
  }
}, object);

console.log(reduced); // { a: 2, b: 3, c: 4, d: 5 }

결론 🔚

이 시리즈의 모든 JavaScript Treats는 여기github repository에서 호스팅됩니다.

당신이 여기까지 했다면, 바라건대 당신은 당신의 독서를 즐겼고 무언가도 배웠습니다! 다른 플랫폼에서 저를 팔로우하고 싶으시면 저는 트위치에서 스트리밍하고 트위터에서도 저를 찾을 수 있습니다.
읽어 주셔서 감사합니다!