DEV Community

Cover image for Important JavaScript Array method
Shubham Sharma
Shubham Sharma

Posted on • Edited on

2 1 1 1 1

Important JavaScript Array method

Hello Developers,

While coding you definitely need arrays somewhere in your code. and if you have used arrays, you must know how to work loop over arrays.
So, basically in this blog, we are going to learn about the most used javascript array method. Yes, you have guessed it correctly, it's the map() method.

map()

Remember all the points written below, so you will never confuse about when and where to use the map() method.

  1. It is used to iterate over an array, it's just like forEach() and for of loop.
  2. It does not mutate the original array.
  3. It returns a new array.

Syntax

const array = [2, 4, 5, 6]

// it takes a callback function
// array.map(callbackFn())

// parameters of callback function
// 1. callbackFn(element)
// 2. callbackFn(element, index)
// 3. callbackFn(element, index, arrary)    the 3rd one is the original array where we are using map()

Enter fullscreen mode Exit fullscreen mode

We are going to learn javascript map() with 3 questions.

Question 1

// Create a new array based on the given array with twice every element.
// double [2, 6, 4, 16, 18, 10, 2, 14]

const myArray = [1, 3, 2, 8, 9, 5, 1, 7]

const doubledArray = myArray.map((el) => el * 2)

Enter fullscreen mode Exit fullscreen mode

Question 2

// Create a new array based on the given array with the sum of index + element at that index.
// double [1, 4, 4, 11, 18, 10, 2, 14]

const myArray = [1, 3, 2, 8, 9, 5, 1, 7]
Enter fullscreen mode Exit fullscreen mode

Question 3

// create a new array based on the given array object, the new array should contain 

const items = [
    {
        id: 1,
        fName: 'John',
        lName: 'Doe',
    },
    {
        id: 2,
        fName: 'Julia',
        lName: 'Green',
    },
    {
        id: 3,
        fName: 'Thomas',
        lName: 'Freguson',
    },
    {
        id: 4,
        fName: 'Jane',
        lName: 'Smith',
    },
    {
        id: 5,
        fName: 'Maria',
        lName: 'Reese',
    },
]

const newItems = items.map((el) => `${el.fName} ${el.lName}`)
// ['John Doe', 'Julia Green', 'Thomas Freguson', 'Jane Smith', 'Maria Reese']
Enter fullscreen mode Exit fullscreen mode

Hope you have understood when to use the map() method in javascript

If you have any queries you can post in the comment.

You can also connect with me on LinkedIn and Twitter

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more