Reduce Zero — Hero

ถ้าพูดแบบบ้านๆ reduce คือ functional loop ซึ่งเป็น prototype ของ array ใน js

ถ้าจะพูดให้บ้านกว่านี้ก็คงจะเป็น loop ที่จะวนตามจำนวน item ใน array นั่นแหลาะ

แต่มันไม่ได้วนอย่างเดียวนะเพราะทุกรอบที่มันวนไปตาม item ใน array เนี่ยมันจะรัน reducer function โดยที่จะส่ง ค่าของ item ที่วนในแต่ละรอบเข้าไปเป็น input ของ reducer function ด้วยยิ่งพูดยิ่งงงใช่มั้ย เพราะจริงๆแล้วมันก็ทำงานเหมือน map นั่นแหลาะแต่สิ่งเดียวที่ทำให้มันแตกต่างและสุดยอดกว่าคือ มันสามารถ return ค่าแบบ type ไหนออกมาก็ได้ ซึ่งนี่ทำให้มันสามารถตอบโจทย์ในหลายๆปัญหาที่เราเจอในการทำงานได้ดีกว่า map เลยทีเดียว มาดูตัวอย่างกัน

const arr = [1, 2, 3, 4, 5]
const initialValue = []
const reducer = (result, currentItem, currentIndex) => {
return [...result, currentItem]
}
console.log(arr.reduce(reducer, initialValue))
// [1, 2, 3, 4, 5]

ลองไล่โค้ดด้านบนดูจะได้ค่าแบบนี้

รอบที่ 1
start result = [] 
currentItem = 1 
currentIndex = 0
return result = [1]

รอบที่ 2
result = [1]
currentItem = 2
currentIndex = 1
return result = [1, 2]

รอบที่ 3
result = [1, 2]
currentItem = 2
currentIndex = 1
return result = [1, 2, 3]

รอบที่ 4
result = [1, 2, 3]
currentItem = 2
currentIndex = 1
return result = [1, 2, 3, 4]

รอบที่ 5
result = [1, 2, 3, 4]
currentItem = 2
currentIndex = 1
return result = [1, 2, 3, 4, 5]

ถ้าเรามอง pattern มันดีๆเนี่ยจะเห็นว่าทุก result เริ่มต้นในทุกรอบก็คือค่าที่ return ออกมาจากรอบที่แล้วนั่นเอง

งั้นลองดูตัวอย่างถัดไปกัน

const arr = ['H', 'E', 'L', 'L', 'O']
const initialValue = ''
const reducer = (result, currentItem, currentIndex) => {
return `${result}${currentItem}`
}
console.log(arr.reduce(reducer, initialValue))
// HELLO

ตัวอย่างข้างบนเป็นการแสดงให้เห็นว่า reduce มันสามารถ return ค่าแบบ type ไหนออกมาก็ได้ซึ่งมันดีมากๆ ลองดูตัวอย่างต่อไปกัน

const arr = [2, 4, 6, 8, 10]
const initialValue = 0
const reducer = (result, currentItem, currentIndex) => {
return result+=currentItem
}
console.log(arr.reduce(reducer, initialValue))
// 30

ตัวอย่างข้างบนเป็นตัวอย่างของการหาผลรวมของ item ของ array ซึ่ง map ไม่สามารถตอบโจทย์นี้ได้ เพราะมันจะ return array เสมอ

reduce เนี่ยโดยปกติจะใช้ได้กับ array เท่านั้นนะ แต่ถ้าอยากจะใช้กับ object ก็ยังมีท่า reduce key เอาหรือใช้ lodash ก็ได้แต่จะไม่ขอพูดในนี้นะเพราะจะยาวเกินไป

ถ้าอ่านแล้วไม่เข้าใจก็ผ่านไปนะครับ อย่าถือสากันเลยนะครับ งั้นวันนี้ผมขอไปนอนละ ขอบคุณทุกคนที่อ่านมาถึงตรงนี้นะเจอกันใหม่ครับ ^ ^