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

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. Table of contents 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) Checkout this embed to run the code example mentioned above app.scribbler.live That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website. You can contact me on - Instagram - https://www.instagram.com/supremacism__shubh/ LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/ Email - shubhmtiwri00@gmail.com You can help me with some donation at the link below Thank you

Feb 27, 2025 - 06:47

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

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)

Checkout this embed to run the code example mentioned above

app.scribbler.live

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you