Array Non-Mutations: filter, map,slice, concat Explained!

#webdev #javascript #beginners #tutorial

Hello my fellow frontend developer friends, today i will be discussing array methods on steroids. You must buckle your seatbelt as this journey is going to be a bit long.

I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I'll be including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.
i will be using scrib.show from scribbler.live, it is equivalent to console.log

Let's dive in.

Non Mutating method
Filter, map, slice, concat, flat, and flatMap
Chaining of methods

Non Mutating methods

These methods doesn't modifies the original array itself but creates a new array for the result, these includes:

filter - filters an array based on a callback function
map - map over the array based on a callback function
slice - extract out a part of the array
concat - merge 2 arrays
flat - flatten the multi-dimensional or nested arrays
flatMap - flatten the multi-dimensional or nested arrays by 1 level and does the mapping with a callback function with it.

Sample code

const technologies = [
  {
    name:"HTML",
    type:"Frontend"
  },
  {
    name:"CSS",
    type:"Frontend"
  },
  {
    name:"JS",
    type:"Frontend"
  },
  {
    name:"React",
    type:"Frontend"
  },
  {
    name:"Java",
    type:"Backend"
  },
  {
    name:"Node",
    type:"Backend"
  },
]

const otherTechnologies = [
  {
    name:"Python",
    type:"Backend"
  },
  {
    name:"Rust",
    type:"Backend"
  },
]

// filter method
const frontendTechs = technologies.filter(technology => {
  if(technology.type === "Frontend"){
    return technology
  }
})
scrib.show("Frontend techs - ",frontendTechs) // will return an array with items with type Frontend

// map method
const frontendTechsNames = frontendTechs.map(technology => technology.name) // will return an array with technology names with type Frontend
scrib.show("Frontend tech names - ",frontendTechsNames) // will return an array with items with type Frontend


// slice method
const firstThreeItems = technologies.slice(0,3) // first three items in the array
scrib.show("First three items - ",firstThreeItems)

// concat method
const combinedTechnologies = technologies.concat(otherTechnologies)
scrib.show("Combined technologies - ",combinedTechnologies)

// flat method
const nestedArrays = ["HTML","CSS","JS",["REACT","NEXTJS", ["TAILWIND",["SCSS"]]]]
const oneLevelFlat = nestedArrays.flat()
const twoLevelFlat = nestedArrays.flat(2)
const infinityLevelFlat = nestedArrays.flat(Infinity)
scrib.show(oneLevelFlat)
scrib.show(twoLevelFlat)
scrib.show(infinityLevelFlat)

// flatMap method
const webTechnologies = ["HTML","CSS","JS"]
const flatAndLowercase = webTechnologies.flatMap(technology => technology.toLowerCase())
scrib.show(flatAndLowercase)

Chaining of methods

// Chaining of methods
const technologies = [
  {
    name:"HTML",
    type:"Frontend"
  },
  {
    name:"CSS",
    type:"Frontend"
  },
  {
    name:"JS",
    type:"Frontend"
  },
  {
    name:"React",
    type:"Frontend"
  },
  {
    name:"Java",
    type:"Backend"
  },
  {
    name:"Node",
    type:"Backend"
  },
]

// Filter and map
const frontendNamesByChaining = technologies.filter(technology => technology.type === "Frontend").map(technology => technology.name)
scrib.show(frontendNamesByChaining)

// flat and map
const nestedArrays = ["HTML","CSS","JS",["REACT","NEXTJS", ["TAILWIND",["SCSS"]]]]
const flatAndMapChaining = nestedArrays.flat(Infinity).map(technology => technology.toLowerCase())
scrib.show(flatAndMapChaining)