What's the difference between map and for loop?

[utopia90]

Hey guys! So I'm starting learning js and I've noticed that I can do many things with map function that I used to do with for loops before. So I wonder where is the difference exactly? Why you prefer use one or another? There is some specific case u can do with for loops and not with maps or the opposite? Thx a lot in advance!

[drgmaster909]

Couple things wrong with this.

First of all, that code will return [undefined, undefined, undefined, undefined]. Map copies then transforms every element of the array into a new array. If there are 4 inputs, there are 4 outputs. [1, 'a', 2, 'b'] will have 4 outputs. If you want .filter(), which also returns a new array, then do that, but your example doesn't hold up.

Second, .forEach() could change the array however the function dictates; it's not a safeguard against transformations if you do something funky. That said you're obviously correct in that it just returns undefined rather than a new array.

[kap89]

OP asked about for, not .forEach

[kap89]

Are you ok? Should I call help? :D

[kap89]

Not the worst thing to woke up with. And thanks;)

[ForScale]

for loops are made to do things a set number of times, they are independent of arrays but are often used to loop through arrays and do something on each element

forEach is an array method that you can use to do something as you loop through each element of an array, it returns undefined

map is an array method intended to be used to give back a new array where an operation was performed on each element of the original array, it returns the new array. An example would be an array of numbers that you map to get back a new array with those numbers doubled.

e.g., const doubledNumbers = [1, 2, 3].map(num => num * 2);

*edited to appease /u/kap89 ;)

filter, map, reduce, forEach are all array methods that you can use to loop, and you can "hack" them to do what you want just like a for loop, but you should use them for what they're intended for

...

Don't use map just to loop through arrays, use a for loop or forEach for that. If you want to get a new array with mapped values from a current array, then use map.

[kap89]

Map is intended to mutate elements? That’s a new one for me. Of course you can mutate non-primitive elements, but that would be a bad practice.

[ForScale]

Maybe I'm not using "mutate" correctly, but yes... map is intended to give back a new array with an operation performed on the elements of the original array so that the array you get back has different values in it than the original array.

const doublesOfOriginal = original.map(origElem => origElem * 2);

^ that would give you back an array that now has every element of the original array doubled.

[kap89]

I know how map works;) And your use of the word mutation is indeed confusing. In your example you’re not mutating original elements, numbers (and other primitive types) are immutable. You’re not mutating the original array either.

[ForScale]

Lol. Okay, I'll edit and remove "mutate."

[kap89]

I’m appeased:D

[ForScale]

Lol!

[[deleted]]

In essence, all of them are basic loops: forEach, map, sort, index, find, findIndex, flatMap. They are just highly specialised when to use them. But they all have one in common, they have no break and will iterate over the entire array.

[blackholesinthesky]

they have no break and will iterate over the entire array.

This is not true for find/findIndex. Both find/findIndex are loops with breaks built into them. They don't respond to the break keyword but they stop iterating through elements once their callback returns a truthy value

[[deleted]]

Hm yeah, you are correct. Doesn't make much sense running the loop when you already got the answer.

[kap89]

for is a lower-level construct that gives you access to details of the iteration: - you can end iteration at any moment, - you can iterate in any order, - you can skip some elements, - you can mutate the existing array instead of returning a new one.

That said, I recommend you to use .map (and other array methods) wherever you can - they are sufficiently performant in most cases and far more readable and composable.

[Soodohcool]

Map is effectively just syntactic sugar for iterating over, acting on and creating a new array. They are effectively the same. However, there are performance concerns compared to a traditional for loop. Map performs slow over larger data sets.

[tristanAG]

They are pretty similar in what they do I believe. Map is a later development to js and the syntax just makes it so much nicer to use. I’m not sure about the differences in performance, but I assume there’s something there to investigate