JavaScript의 array.reduce를 이해하는 또 다른 방법

JavaScript에서 array methods의 guantlet을 실행했다면 아마도 이 장애물에 몇 번 부딪쳤을 것입니다.

잠깐, reduce 함수를 다시 어떻게 사용하나요?

나는 실제로 우리 대학의 Hack4Impact 장(material 100% free-to-use here!)을 위해 이 주제로 JS 부트캠프를 이끌었습니다. reduce에 대한 질문이 수없이 많이 올라왔고 드디어 클릭할 설명을 찾은 것 같습니다 😁 여러분도 효과가 있기를 바랍니다!

🎥 비디오 연습

동영상 튜토리얼로 배우는 것을 선호한다면 이 튜토리얼이 적합합니다. 소스 자료를 따라갈 수 있습니다fork this CodePen 🏃‍♂️

📝 단계별 치트 시트

우리가 알고 있는 좋은 for 루프를 사용하여 reduce까지 걸어가 봅시다.

여기에 예가 있습니다. CD에 우리가 가장 좋아하는 앨범이 있고(기억하세요? 💿) 스테레오가 각 트랙의 길이를 분 단위로 알려줍니다. 이제 전체 앨범의 길이를 알아내고자 합니다.

다음은 우리가 원하는 작업에 대한 단순화된 접근 방식입니다.

// make a variable to keep track of the length, starting at 0
let albumLength = 0
// walk through the songs on the album...
album.songs.forEach(song => {
  // and add the length of each song to our running total
  albumLength += song.minutesLong
})

나쁘지 않아! 노래를 반복하고 노래를 살펴보는 동안 앨범 실행 시간을 누적합니다. 이것은 기본적으로 스테레오에서 트랙을 건너뛸 때 앨범 길이를 집계하여 실생활에서 사용하는 프로세스입니다.

"축적하다"라는 단어는 여기서 꽤 중요합니다. 본질적으로 우리는 이 트랙 길이 목록을 가져와 단일 누적 숫자인 albumLength 로 줄입니다. 어큐뮬레이터로 환원하는 이 과정은 머릿속에 전구가 켜질 것입니다. 💡 우리는 array.reduce를 사용할 수 있습니다!

forEach에서 줄이기 위해

앞에서 함수를 축소해 봅시다. 이것은 간단한 4단계 프로세스입니다.

forEach를 reduce로 변경:

let albumLength = 0
album.songs.reduce((song) => {
  albumLength = albumLength + song.minutesLong
})

루프 함수의 첫 번째 매개변수로 albumLength를 이동하고, reduce의 두 번째 매개변수로 초기값(0)을 이동합니다.

// accumulator up here 👇
album.songs.reduce((albumLength, song) => {
  albumLength = albumLength + song.minutesLong
}, 0) // 👈 initial value here

albumLength =를 반환 문으로 변경합니다. "누적된"앨범 길이에 노래 길이를 계속 추가하고 있기 때문에 개념적으로 크게 다르지 않습니다.

album.songs.reduce((albumLength, song) => {
  // 👇 Use "return" instead of our = assignment
  return albumLength + song.minutesLong
}, 0)

reduce 루프(총 앨범 길이라고도 함)의 결과를 검색합니다. 반환된 값은 다음과 같습니다.

const totalAlbumLength = album.songs.reduce((albumLength, song) => {
  return albumLength + song.minutesLong
}, 0)

그리고 그게 다야! 🎉

잠깐, 왜 reduce 가 필요할까요?

모든 작업을 마친 후 reduce는 for 루프를 작성하는 데 약간 더 어려운 방법처럼 느껴질 수 있습니다. 어떻게 보면... 😆

그러나 한 가지 주요 이점을 제공합니다. reduce가 총계를 반환하므로 함수 연결이 훨씬 쉽습니다. 이것은 바로 감사할 수 있는 이점이 아닐 수 있지만 다음과 같은 더 복잡한 시나리오를 고려하십시오.

// Say we have this array of arrays,
// and we want to "flatten" everything to one big array of songs
const songsByAlbum = [
  ['Rap Snitches Knishes', 'Beef Rap', 'Gumbo'],
  ['Accordion', 'Meat Grinder', 'Figaro'],
  ['Fazers', 'Anti-Matter', 'Krazy World']
]
let songs = []
songsByAlbum.forEach(albumSongs => {
  // "spread" the contents of each array into our big array using "..."
  songs = [...songs, ...albumSongs]
})

이것은 이해하기가 그리 어렵지 않습니다. 하지만 songs 목록에서 좀 더 멋진 배열 함수를 수행하려면 어떻게 해야 합니까?

// Ex. Make these MF DOOM songs titles all caps
let songs = []
songsByAlbum.forEach(albumSongs => {
  songs = [...songs, ...albumSongs]
})
const uppercaseSongs = songs.map(song => song.toUppercase())

남자 이름의 철자는 모두 대문자입니다. 레스트 인 피스MF DOOM

괜찮습니다. 하지만 이 두 수정 사항을 함께 "연결"할 수 있다면 어떨까요?

// grab our *final* result all the way at the start
const uppercaseSongs = [
  ['Rap Snitches Knishes', 'Beef Rap', 'Gumbo'],
  ['Accordion', 'Meat Grinder', 'Figaro'],
  ['Fazers', 'Anti-Matter', 'Krazy World']
]
// rewriting our loop to a "reduce," same way as before
.reduce((songs, albumSongs) => {
  return [...songs, ...albumSongs]
}, [])
// then, map our songs right away!
.map(song => song.toUppercase())

와! reduce 를 던져서 songsByAlbum 및 songs 에 대한 독립 실행형 변수를 완전히 제거했습니다 🤯

하지만 소금 한 알을 가지고 이 예를 들어보세요. 이 접근 방식은 아직 이러한 배열 함수를 처음 사용하는 경우 코드의 가독성을 손상시킬 수 있습니다. 따라서 이 함수reduce를 뒷주머니에 넣어두었다가 실제로 코드 품질이 향상되는 것을 볼 수 있을 때 꺼내십시오.

조금 배우시겠습니까?

대박. 놓친 경우를 대비하여 이와 같은 더 많은 지식 덩어리를 탐색하기 위해 my "web wizardry" newsletter을 출시했습니다!

이것은 웹 개발의 "first principles" 문제를 해결합니다. 다시 말해, 우리의 모든 웹 프로젝트를 작동하게 만드는 버벅거리는 브라우저 API, 구부러진 CSS 규칙 및 반액세스 가능한 HTML은 무엇입니까? 프레임워크를 넘어서고 싶다면, 이것은 당신을 위한 것입니다 친애하는 웹 마법사 🔮

Subscribe away right here . 항상 가르치고 절대 스팸하지 않겠다고 약속합니다❤️