DEV Community

Cover image for .map( ) .forEach( ) for( ). ๐Ÿ‘‰ Three ways for create an array and push it:
Luca
Luca

Posted on

8 2

.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 ๐Ÿ™‹โ€โ™‚๏ธ

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 more โ†’

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

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

๐Ÿ‘ฅ Ideal for solo developers, teams, and cross-company projects

Learn more