DEV Community

Cover image for .map( )  .forEach( )  for( ). 👉  Three ways for create an array and push it:
Luca
Luca

Posted on

.map( ) .forEach( ) for( ). 👉 Three ways for create an array and push it:

Hi dev! 👩‍💻 👨‍💻

I want to show you 3 different way for push a value intro your array empty, with the same result.

First of all, we have easy our array like this: 🗂

var array = [
    {
        name: 'John'
    },
    {
        name: 'Meg'
    }
];
Enter fullscreen mode Exit fullscreen mode

In order by the most easiest, the first method is .map();
We need to create a new variable, take our array, and the return which value we need to push into this new variable:

var newArray = array.map(function(singleElement){
    return singleElement.name;
})

console.log(newArray); // return ['John', 'Meg']
Enter fullscreen mode Exit fullscreen mode

The second method is forEach(); we need to create a new empty array, and then call forEach() method for push our values into a new array created before:

var newArray = [];

array.forEach(singleElement =>{
    newArray.push(singleElement.name)
});

console.log(newArray); // return ['John', 'Meg']
Enter fullscreen mode Exit fullscreen mode

The third method is the classic one with a for() cycle.
We need to create new empty array, cycle our array, define the values you want to push into a new array, and then push it:

var newArray = [];

for (var i = 0; i < array.length; i++) {
    var singleElement = array[i];
    var name = singleElement.name;
    newArray.push(name);
}

console.log(newArray); // return ['John', 'Meg']
Enter fullscreen mode Exit fullscreen mode

The results is the same for all methods:

Alt Text

Hope this small article is interesting for you 🙋‍♂️

Discussion (2)

Collapse
anders profile image
Anders • Edited on

Hi Luca, may I suggest changing the 3rd alternative to the following, I think you can do without the temporary variables there:

var newArray = [];

for (var i = 0; i < array.length; i++) {

    newArray.push(array[i].name);
}

Also, I'd recommend that you recommend that as the preferred version as it is also the fastest (the map version is 6.9% slower than a normal for loop, the forEach one is 25% slower). This has no bearing on this example with 2 entries, but getting people into the habbit of using the faster choice will benefit us all in the long run.

Collapse
ljnce profile image
Luca Author

Thank you Anders, your reply is awesome!