A short rundown of JavaScript Array methods, visualised using Emoji because people love emoji... [🦄💩]

JavascriptArraysAndUnicorns.js

/*
 * some helpers to keep the examples clean
 */
const makeUnicorn = (animal) => animal === '🐴' ? '🦄' : '💩'
const isUnicorn = (animal) => animal === '🦄'
const isNoUnicorn = (animal) => animal !== '🦄'
const countUnicorns = (count, animal) => count + (animal === '🦄' ? 1 : 0)
const copyAnimals = (animals) => [...animals]



/*
 * THE GOOD GUYS
 * these methods return a new array or result WITHOUT MUTATION of the original array
 */

// map() - return anything for every element in the array
console.log(['🐴', '🐴', '🐘', '🐴'].map(makeUnicorn))         // ['🦄', '🦄', '💩', '🦄']

// filter() - return only elements that meet some condition
console.log(['🐴', '🐴', '🦄', '🐴'].filter(isUnicorn)         // ['🦄']
console.log(['🐴', '🐴', '🦄', '🐴'].filter(isNoUnicorn))      // ['🐴', '🐴', '🐴']

// find() - return the first element meeting some condition
console.log(['🦄', '🦄', '🐘', '🐏'].find(isNoUnicorn))        // '🐘'

// findIndex() - return index of first element meeting some condition
console.log(['🦄', '🦄', '🐘', '🐏'].findIndex(isNoUnicorn))   // 2

// some() - returns true if ANY of the elements meet the condition
console.log(['🐴', '🐴', '🦄', '🐴'].some(isUnicorn))          // true

// every() - returns true if ALL of the elements meet the condition
console.log(['🐴', '🐴', '🦄', '🐴'].every(isUnicorn))         // false

// reduce() - an accumulator... read the MDN => https://bit.ly/MDN_reduce
console.log(['🦄', '🐴', '🦄', '🐴'].reduce(countUnicorns, 0)) // 2



/*
 * WHEN PUSH COMES TO SHOVE
 * how to add to and take from a stack WITH MUTATION of the original array
 */
const animals = ['🐴', '🐘', '🐏']

// push() - add at the end / returns new length after mutation
console.log(animals.push('🦄'))    // 4
console.log(animals)               // ['🐴', '🐘', '🐏', '🦄']

// unshift() - add at the start / returns new length after mutation
console.log(animals.unshift('🐄')) // 5
console.log(animals)               // ['🐄', '🐴', '🐘', '🐏', '🦄']

// pop() - removes last / returns removed element
console.log(animals.pop())         // '🦄'
console.log(animals)               // ['🐄', '🐴', '🐘', '🐏']

// shift() - removes first / returns removed element
console.log(animals.shift())       // '🐄'
console.log(animals)               // ['🐴', '🐘', '🐏']



/*
 * SLICE AND DICE, BUT NICE!
 * get parts from an array WITHOUT MUTATION of the original array
 */
const herd = ['🐴', '🐴', '🐘', '🐏', '🐘', '🐘', '🐴']

console.log(herd.slice(3))            // ['🐏', '🐘', '🐘', '🐴']
console.log(herd.slice(3, 4))         // ['🐏']
console.log(herd.slice(0, 3))         // ['🐴', '🐴', '🐘']
console.log(herd.slice(-3))           // ['🐘', '🐘', '🐴']
console.log(herd.slice(3, -1))        // ['🐏', '🐘', '🐘']
console.log(herd)                     // ['🐴', '🐴', '🐘', '🐏', '🐘', '🐘', '🐴']



/*
 * THE BAD BOY!
 * splice allows you to mutate an array by adding, removing 
 * or replacing elements at any one point in the array
 */
// remove everything starting at position
const herd1 = copyAnimals(herd)
console.log(herd1)                    // ['🐴', '🐴', '🐘', '🐏', '🐘', '🐘', '🐴']
console.log(herd1.splice(3))          // ['🐏', '🐘', '🐘', '🐴']
console.log(herd1)                    // ['🐴', '🐴', '🐘']

// remove element(s) at position
const herd2 = copyAnimals(herd)
console.log(herd2)                    // ['🐴', '🐴', '🐘', '🐏', '🐘', '🐘', '🐴']
console.log(herd2.splice(3, 1))       // ['🐏']
console.log(herd2)                    // ['🐴', '🐴', '🐘', '🐘', '🐘', '🐴']

// add neew element(s) at position
const herd3 = copyAnimals(herd)
console.log(herd3)                    // ['🐴', '🐴', '🐘', '🐏', '🐘', '🐘', '🐴']
console.log(herd3.splice(3, 0, '🦄')) // []
console.log(herd3)                    // ['🐴', '🐴', '🐘', '🦄', '🐏', '🐘', '🐘', '🐴']

// replace element(s) at position with new element(s)
const herd4 = copyAnimals(herd)
console.log(herd4)                    // ['🐴', '🐴', '🐘', '🐏', '🐘', '🐘', '🐴']
console.log(herd4.splice(3, 1, '🦄', '🦄')) // ['🐏']
console.log(herd4)                    // ['🐴', '🐴', '🐘', '🦄', '🦄', '🐘', '🐘', '🐴']