Skip to content

Instantly share code, notes, and snippets.

@AllBitsEqual
Last active September 21, 2021 14:12
Show Gist options
  • Save AllBitsEqual/5c96f988fe7220017f290e43b1f85028 to your computer and use it in GitHub Desktop.
Save AllBitsEqual/5c96f988fe7220017f290e43b1f85028 to your computer and use it in GitHub Desktop.
A short rundown of JavaScript Array methods, visualised using Emoji because people love emoji... [πŸ¦„πŸ’©]
/*
* 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) // ['🐴', '🐴', '🐘', 'πŸ¦„', 'πŸ¦„', '🐘', '🐘', '🐴']
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment