[ES6] 데이터컬렉션(3) - Array 배열메서드 reduce()

이번엔 reduce()에 대해서 정리해보겠습니다.

reduce()함수는 배열의 길이나 데이터형태 등을 모두 변경할 수 있습니다.
배열을 객체리터럴등 다른 형태의 데이터로 반환할 때도 유용합니다.

이 번에도 더미데이터를 한 번 사용해보겠습니다.
mockaroo 링크

1

const Data = [{"id":1,"name":"Berty Stolte","city":"Terre Haute"},
{"id":2,"name":"Arney Fidelus","city":"Sotnikovskoye"},
{"id":3,"name":"Montague Becker","city":"Chironkamba"},
{"id":4,"name":"Sharai Jansa","city":"Seoul"},
{"id":5,"name":"Harold Dunleavy","city":"Abnūb"},
{"id":6,"name":"Brinn McGinnell","city":"Sete Cidades"},
{"id":7,"name":"Irvin Hartshorn","city":"Tursunzoda"},
{"id":8,"name":"Berne Kenderdine","city":"Seoul"},
{"id":9,"name":"Deana Ollerearnshaw","city":"Klang"},
{"id":10,"name":"Genia Liccardi","city":"Azogues"},
{"id":11,"name":"Garold Gritten","city":"Memaliaj"},
{"id":12,"name":"Sly Castille","city":"Kadubincarung"},
{"id":13,"name":"Lela Tasker","city":"Seoul"},
{"id":14,"name":"Jordain Rottger","city":"Seoul"},
{"id":15,"name":"Meredith Harmar","city":"Seoul"}]

바로 코드를 작성해보겠습니다.

const init = [];
const callback = (accum , current) => {
    if (current.id >= 10) {
        return [...accum, current]
    }
    return [...accum]
}
const applied = Data.reduce(callback, init)

저는 reduce()함수를 일종의 여과기로 생각하고 있습니다.

마지막줄부터 보겠습니다.
reduce()함수는 두 개의 인수를 전달받습니다.

첫 번째로 reduce할 때의 기준이 되는 callback함수,
두 번째로 초기값입니다.

reduce()함수는 callback함수를 배열의 길이만큼 반복 실행합니다.
callback함수는 두 개의 인수 (누적, 현재값) 에 따라 매 실행마다 분기해서 return합니다.
위 코드에서는 current.id를 이용해

• 10이상일 경우 current를 포함한 누적값을 리턴하고,
• 아닐 경우는 crruent를 포함하지않고 [...accum] 만 리턴했습니다.

return값은 초기값 init배열을 갱신합니다.

---

• callback 함수에 console.log()를 두 번째줄에 추가하면 반복실행된다는 것을 알 수 있습니다.

const callback = (accum , current) => {
    console.log('실행됨')
    if (current.id >= 10) {
        return [...accum, current]
    }
    return [...accum]
}

---

2

이 번에는 아래의 데이터를 이용해서
어떤 색이 가장 인기가 많은지 알아보겠습니다.
물론, reduce()를 이용해 배열이 아닌 객체리터럴에 담아보겠습니다.

const favorite = [
{"name":"Darcy Cockney","color":"violet"},
{"name":"Llewellyn Ayllett","color":"red"},
{"name":"Gardie Haxby","color":"green"},
{"name":"Valeria Omand","color":"blue"},
{"name":"Tan Kolyagin","color":"skyblue"},
{"name":"Simona Urlich","color":"yellow"},
{"name":"Alan Maling","color":"wihte"},
{"name":"Melonie Cissen","color":"black"},
{"name":"Pietrek MacHoste","color":"black"},
{"name":"Celeste Jakes","color":"white"},
{"name":"Basil Thiolier","color":"green"},
{"name":"Ashlen Keyson","color":"red"},
{"name":"Buddie Bulfoy","color":"red"},
{"name":"Dodie Berndtsson","color":"white"},
{"name":"Milzie Mammatt","color":"violet"}
]

이어서 코드를 작성해보겠습니다.

const reduced =favorite.reduce((accum,current) => {
    const count = accum[current.color] || 0
    return {
        ...accum, [current.color]:count+1
    }
},{})
console.log(reduced)

콜백함수를 익명함수로 작성했습니다.
count는 초기에는 0,
그 후에는 누산되는 accum배열에서 current.color를 key로 갖는 항목에
1씩 가산됩니다.

return문의 [current.color]이 익숙치 않으시다면
계산된 속성명(Computed Property Names)에 대해 구글링해보세요

결과 로그입니다.

{
  violet: 2,
  red: 3,
  green: 2,
  blue: 1,
  skyblue: 1,
  yellow: 1,
  wihte: 1,
  black: 2,
  white: 2
}

수고하셨습니다!