Explanation of how reduce works

reduce.md

So you have an array and you want to add it up. Here:

var arr = [1,2,3]
var accumulator = 0
for (var i = 0; i < arr.length; i++) {
  accumulator = accumulator + arr[i]
}
return accumulator

But that ties you into a specific array, its not very reusable. So you turn it into a function:

function addUpArr(arr) {
  var accumulator = 0
  for (var i = 0; i < arr.length; i++) {
    accumulator = accumulator + arr[i]
  }
  return accumulator
}

But then maybe you want to multiply or whatever. But you already have that function. So you start here:

// function add(a,b) { return a + b }
// maybe better if we say [due to iterating through a series of values]:
function add(accumulator, current) { return accumulator + current }

function addUpArr(arr) {
  var accumulator = 0
  for (var i = 0; i < arr.length; i++) {
    accumulator = add(accumulator, arr[i])
  }
  return accumulator
}

But as long as you have a function that works on two values, like add, or multiply, or whatever, you can use that instead. Need to change the name though:

function add(acc,val) { return acc + val }
function mul(acc,val) { return acc * val }
function exp(acc,val) { return acc ** val }
// …etc

function reduce(arr, fn) {
  var accumulator = 0
  for (var i = 0; i < arr.length; i++) {
    accumulator = fn(accumulator, arr[i])
  }
  return accumulator
}

// so
var arr = [1,2,3,4]
console.log reduce(arr, add) // 10
console.log reduce(arr, mul) // 24
console.log reduce(arr, exp) // 1

But that locks you into numbers; what if you wanted to do something different? Lets stop caring how exactly it works instead. Just assume that if we don't explicitly say what the accumulator starts on, it’s the first value in the array...

var arr = [1,2,3,4]

arr.reduce(function(acc, val) { return acc + val })
// or just
arr.reduce((a,b) => a + b)
// or even
function add(a,b) { return a + b}
// (this is why stupidly simple functions like add, multiply, divide,
// minus that wrap +, *, /, - are really useful, if you look at Lodash for example,
// they’re all in there)
arr.reduce(add)

…though you can pass that accumulator, it’s really useful:

var arr = [1,2,2,3,2,4,5, 6, 6, 6, 6, 7]
arr.reduce(function(acc, val) {
  if (acc.includes(val)) {
    return acc;
  } else {
    acc.push(val);
    return acc;
  }
}, [])

or

const arr = [1,2,2,3,2,4,5, 6, 6, 6, 6, 7]
arr.reduce((acc, val) => acc.includes(val) ? acc : [...acc, val], [])
// this uses an array as the accumulator. If the accumulator includes the current
// value, it just returns the accumulator. If it doesn’t, it shoves that value in the accumulator
// array. It’s generally called ‘unique’ or ‘uniq’ when there is an actual method
// in a language that does that - it takes an array, and returns a new one without duplicates:

// [1,2,3,4,5,6,7]