JavaScript Array Methods, map(), filter(), reduce()

Example of JavaScript Array Methods map, filter, and reduce

by Amy Ruddy

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="text-center py-3 bg-dark text-white">
  <h3 class="display-5">Array Methods</h3>
</div>
<div id="placeholder">
  <div></div>
  <div class="text-muted bg-dark p-3 pt-0"><small>ES6 IE friendly version can be found commented out below the code in the JavaScript window. I suggest using a transpiler to write in the latest and greatest ES6 and use a transpiler like Babel or the build in Nuget from MS for Typscirpt to convert ES6 6 to ES5.</small></div>
</div>

CSS

code {
    color: #32d8f3 !important;
}

JavaScript

//ES6 IE friendly version commented out below code

let div1 = document.querySelector('#placeholder div');

const nums = [0, 1, 2, 3];

div1.innerHTML += `<div class="bg-dark ps-3 pt-3"><code class="text-white">nums = [${nums}]</code></div>`;

// Array.Map()

let addOne = (num) => { return num + 1 }

let numsPlus1 = nums.map(addOne);

div1.innerHTML += `<div class="bg-dark ps-3 pt-3"><code class="text-white">Array.map()</code></div>`;

div1.innerHTML += `<div class="bg-dark ps-3"><code>let addOne = (num) => { return num + 1 }</code></div>`;

div1.innerHTML += `<div class="bg-dark ps-3"><code>let numsPlus1 = nums.map(addOne);</code></div>`;

div1.innerHTML += `<div class="bg-dark ps-3"><code>nums.map(addOne) will return<div class="text-white">[${numsPlus1}]</div></code></div>`;

// Array.Filter()

let isGreaterThanOne = (num) => { return num > 1; }

let numsGreaterThanOne = nums.filter(isGreaterThanOne);

div1.innerHTML += `<div class="bg-dark ps-3 pt-3"><code class="text-white">Array.filter()</code></div>`;

div1.innerHTML += `<div class="bg-dark ps-3"><code>let isGreaterThanOne = (num) => { return num > 1; }</code></div>`;

div1.innerHTML += `<div class="bg-dark ps-3"><code>let numsGreaterThanOne = nums.filter(isGreaterThanOne);</code></div>`;

div1.innerHTML += `<div class="bg-dark ps-3 pb-3"><code>nums.filter(isGreaterThanOne) will return<div class="text-white">[${numsGreaterThanOne}]</div> </code></div>`;

// Array.Reduce()

let add = (num1, num2) => { return num1 + num2; }

let numsAdd = nums.reduce(add);

div1.innerHTML += `<div class="bg-dark ps-3 pt-3"><code class="text-white">Array.reduce()</code></div>`;

div1.innerHTML += `<div class="bg-dark ps-3"><code>let add = (num1, num2) => { return num1 + num2; }</code></div>`;

div1.innerHTML += `<div class="bg-dark ps-3"><code>et numsAdd = nums.reduce(add);</code></div>`;

div1.innerHTML += `<div class="bg-dark ps-3 pb-3"><code>nums.reduce(add) will return<div class="text-white">...