array reduce examples

arrayreduce.js

/**
 * Numbers:
 * We can reduce an array of numbers, to find the total. Using a number as initial value
 **/
const numbers = [5, 10, 25, 40];

numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // result: 80

// if we pass 10 as the initial value
numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 10); // result: 90


/**
  * We can reduce an object, removing key/values that we decide we dont want:
 **/

const obj = {
     name: 'Kuro',
     species: 'dog',
     id: '135',
     country: 'Australia'
};

/**
  * Objects: 
  * Empty object as initial value
  * 1. Convert the keys of the object to an array and reduce over them
  * 2. if they key is not in the rejected Keys list, append it to the object, 
  * 3. if it is, just return the accumulator instead
 **/

const reject = (...rejectedKeys) => obj => 
    Object.keys(obj).reduce((acc, curr) => 
        !rejectedKeys.includes(curr) ? {...acc, [curr]: obj[curr]} : {...acc}, {}); 

console.log(reject('species', 'id')(obj));

/**
  * Result:
  *  {
  *     name: "Kuro", 
  *     country: "Australia"
  *  }
 **/

/**
  * Promises:
  * Promise.resolve() as initial value.
  * We can make promises run sequentially for scenarios where 
  * we have an unknown number of promises
  * but we need to garaunteed order of execution
  * as an alternative to Promise.all which will execute in any order
 **/

const first = () => Promise.resolve('this');
const second = res => Promise.resolve(`${res} is`);
const third = res => Promise.resolve(`${res} a sequence`);

const somePromises = [
     first,
     second,
     third
];

// Execute a list of Promise return functions in series
const promiseSequence = promiseList => 
     promiseList.reduce((acc, curr) => acc.then(curr), Promise.resolve());

promiseSequence(somePromises).then(res => console.log("yep:", res));

// result: yep: this is a sequence
      
/**
  * DOM node construction:
  * document.createElement('div') as intial value (or any DOM node)
  * Rarer with the rise of virtual dom frameworks, but still useful sometimes.
 **/

const renderSample = text => {
    const div = document.createElement('div');
    div.className = 'my-shiny-div';
    const textNode = document.createTextNode(text);
    div.appendChild(textNode);
    return div;
}

const titles = ['hello', 'yep', 'nope', 'maybe', 'goodbye'];

const titleDiv = titles.reduce((accum, current) => {
     accum.appendChild(renderSample(current));
     return accum;
}, document.createElement('div'));

/** 
  * Result: 
  *  <div>
  *      <div class="my-shiny-div">hello</div>
  *      <div class="my-shiny-div">yep</div>
  *      <div class="my-shiny-div">nope</div>
  *      <div class="my-shiny-div">maybe</div>
  *      <div class="my-shiny-div">goodbye</div>
  *  </div>
 **/