js reduce example https://mbeaudru.github.io/modern-js-cheatsheet/

js-reduce-1.md

<form class="reduce-form">
  <fieldset>
    <input type="text" name="firstname" placeholder="Enter first name" /><br/>
    <input type="text" name="lastname" placeholder="Enter last name"><br/>
    <input type="email" name="email" placeholder="Enter e-mail" /><br/>
    <button type="submit">Submit</button>
  </fieldset>
</form>

*{
  box-sizing:border-box;
  font-family: 'Georgia';
  font-size:14px;
}

fieldset{
  border:0;
}

input{
  margin-bottom:5px;
  border:1px solid #ddd;
  height:34px;
  padding:5px;
  width:250px;
}

button{
  width:250px;
  background:#1BBC9B;
  color:white;
  border:0;
  height:34px;
}

//1. We want to run over all .reduce-form's and add an eventListener to their submit buttons
document.querySelectorAll('.reduce-form').forEach(form => {
  form.addEventListener('submit', (event) => {

    event.preventDefault();
    
    //2. create an array of all elements with a [name] attribute within the submitted form
    const elArr = [...event.currentTarget.querySelectorAll('*[name]')];

    //3. Reduce! Where the magic happens
    const formData = elArr.reduce((prev, next, index, array) => {
      const inputName = next.getAttribute('name');
      const inputValue = next.value;
      
      prev[inputName] = inputValue;
      return prev;
    }, {});
    
    console.log('formData', formData);

    //4. we can use fetch() or whatever you like to send our formData. Not important for now.
  });
});

js-reduce-2.js

```js

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b, index, array) {
  return a.concat(b);
}, []);

// flattened is [0, 1, 2, 3, 4, 5]
```

js-reduce-3.js

```js

// Counting instances of values in an object

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function(allNames, name, index, array) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});

// countedNames is { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
```

js-reduce-4.js

```js

// friends - an array of objects - where object field "books" - list of favorite books 

var friends = [ 
{ name: "Anna",  books: ["Bible", "Harry Potter"],                age: 21 }, 
{ name: "Bob",   books: ["War and peace", "Romeo and Juliet"],    age: 26 },
{ name: "Alice", books: ["The Lord of the Rings", "The Shining"], age: 18 }
]

// allbooks - list which will contain all friends books +  additional list contained in initialValue

var allbooks = friends.reduce(function(prev, curr, index, array) {
  return [...prev, ...curr.books];
}, ["AAA"]);

// allbooks = ["AAA", "Bible", "Harry Potter", "War and peace", "Romeo and Juliet", "The Lord of the Rings", "The Shining"]

```

string-to-dom.js

let s = '<li>text</li>';
let div = document.createElement('div'); 
div.innerHTML = s;

console.log( div.childNodes );
console.log( div.children );
console.log( div.firstChild );