.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'
    }
];

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']

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']

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']

The results is the same for all methods:

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

Comments

[Anders]

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.

[Luca]

Thank you Anders, your reply is awesome!