DEV Community

Cover image for You are JS noob without knowing these methods

You are JS noob without knowing these methods

Milan Mohapatra on December 06, 2023

Most important methods of your JavaScript codebase. In day-to-day development with JavaScript in the form of frontend framework or backe...
Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Your map example is poor as it is modifying the content of the original array... something that map is designed to help you avoid. It may confuse people into believing the the original array is always modified.

Collapse
 
milanx profile image
Milan Mohapatra

Check out the new modifications. Thanks

Collapse
 
milanx profile image
Milan Mohapatra

No, it might looks like muteble but but will change it. Thankyou

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Believe me, it definitely will. Run the code, then check the original array. I guarantee it will have changed.

To do what your example's introduction describes, you need to do something like this - which will leave the original array untouched:

students.map(({fee, ...student}) => ({...student, fee: fee-100})) 
Enter fullscreen mode Exit fullscreen mode

Or if you prefer something closer to your original:

students.map(student => {
  const newStudent = {...student}
  newStudent .fee -= 100
  return newStudent 
})
Enter fullscreen mode Exit fullscreen mode

In your example, the newly created array contains the same objects as the original array, and you have modified those. To leave the original array untouched, you need to make copies of the student objects and work on those.

Thread Thread
 
tracygjg profile image
Tracy Gilmore

Hi Milan, In addition to Jon's comment, the second point you made is not quite correct. Instead of "Return the array with the same number of elements present.", it would be more accurate to state "Returns a new array with the same number of elements as the original." but this is not being demonstrated by your example.

To confirm this, you could check what is returned by the map operation against the original array (after performing the operation).

const studentsWithReducedFee = students.map(({fee, ...student}) => ({...student, fee: fee-100}));

console.table(students);
console.table(studentsWithReducedFee);
Enter fullscreen mode Exit fullscreen mode

Sorry to be picky but I also think you mean "transform" rather than "transfer" in your points about map.

Thread Thread
 
milanx profile image
Milan Mohapatra

Thanks for commenting, love to unlearn and learn the correct way.

Thread Thread
 
milanx profile image
Milan Mohapatra

check out the new modifications. thanks

Thread Thread
 
tracygjg profile image
Tracy Gilmore • Edited

Hi Milan, The example is far more representative of a typical use case. I still think the first two bullet points are not quite right and the following might be better:

  • To transform the elements of the input array to produce a new array.
  • Returns a new array...

The reduce example needs a little work and should present the return value.

const totalFees = students.reduce((acc, next) => acc += next.fee, 0);
Enter fullscreen mode Exit fullscreen mode

Please accept my comments in the spirit of friendship and knowledge sharing.

Collapse
 
dsaga profile image
Dusan Petkovic

I think its fine if content like this already exists on dev.to already, from my perspective dev.to is more about opening discussions on some topics and also for people to offer feedback to content creators and also help them improve, so this is a good start!

Collapse
 
milanx profile image
Milan Mohapatra

Thanks @dsaga

Collapse
 
devgancode profile image
Ganesh Patil

Agree!
Array methods are essentials.

Collapse
 
milanx profile image
Milan Mohapatra

Agree too.

Collapse
 
joolsmcfly profile image
Julien Dephix • Edited

Hi!

Array methods FTW!

You can shorten your code a tad more:

students.find((student) => {
    return student.rank == 5;
  })
Enter fullscreen mode Exit fullscreen mode

becomes (notice strict comparison as well)

students.find((student) => student.rank === 5)
Enter fullscreen mode Exit fullscreen mode

Your reduce example becomes:

students.reduce((acc, next) => acc + next.fee, 0)
Enter fullscreen mode Exit fullscreen mode

Also, under entries you wrote :

return a 2D array which is converted to an Object.

What do you mean by converted to an object? Are you referring to Object.fromEntries which creates an object from an array of entries?

And lastly, it'd be more interesting if you showed what students variable holds. It would allow "noobs", to quote you, to play with the code at home.

Full doc on arrays.

Collapse
 
milanx profile image
Milan Mohapatra

Thanks for commenting. I wrote this to make a type of notes of what I studied. I will consider your thoughts on my upcoming notes. check out the correction I made on entries(). Thanks for your time.

Collapse
 
joolsmcfly profile image
Julien Dephix • Edited

Just saw your edit, almost there!

entries does not return an object iterator but an array.

Also:

you can't contact arrays

You probably mean concatenate.

It returns a connected/joined array.

It returns the result of concatenating two arrays.

I'm not being picky, using the right vocabulary helps understanding concepts.

Thread Thread
 
milanx profile image
Milan Mohapatra

Yes agreed, thanks @joolsmcfly

Thread Thread
 
milanx profile image
Milan Mohapatra

It returns iterator in case of Array.

Collapse
 
tsolan profile image
Eugene

Also concat can be replaced with spread operator:
a.concat(b) is the same as […a, …b]

Collapse
 
milanx profile image
Milan Mohapatra

yaa right, thanks

Collapse
 
codingjlu profile image
codingjlu

JSON.stingify() & JSON.stingify()??

Collapse
 
kaamkiya profile image
Kaamkiya

I think the author meant JSON.stringify and JSON.parse (correct me if I'm wrong)

Collapse
 
milanx profile image
Milan Mohapatra

yes thanks.

Collapse
 
milanx profile image
Milan Mohapatra

yaa, I forgot. Thank you for reminding me.

Collapse
 
kwang profile image
Henry

Good!

Collapse
 
milanx profile image
Milan Mohapatra

Thanks Henry

Collapse
 
softmantk profile image
NIKHIL CM

I think people need to stop posting the same stuff with different titles. There are way too many articles about arrays and how they work.

Collapse
 
milanx profile image
Milan Mohapatra

Thanks, @softmantk for your time, I write this as my notes. Whatever I am studying I am trying to make notes like articles.

Collapse
 
manchicken profile image
Mike Stemle

I feel like the MDN documentation does a better job of explaining these, and does so without the unkind clickbait title.

Collapse
 
milanx profile image
Milan Mohapatra

Thank you for your time, I will try my best in my upcoming notes.

Collapse
 
gregjacobs profile image
Greg

*JSON.stringify()

Collapse
 
mythilisundarajan profile image
mythiliSundarajan

super

Collapse
 
milanx profile image
Milan Mohapatra