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 🙋‍♂️

Top comments (3)

Collapse
 
anders profile image
Anders • Edited

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Thank you Anders, your reply is awesome!

Collapse
 
monicatech75 profile image
Monica Pardo

Thank's Anders for the information. Nobody was ever explain that to me