DEV Community

Converting Object to an Array in JavaScript

Samantha Ming on October 31, 2019

Finally, with ES2017, it's official now! We have 3 variations to convert an Object to an Array 🎊 Array has an array of methods (sorry, bad pun 😝...
Collapse
 
aminnairi profile image
Amin

Hi there, great article! I think, in my personal use case as a web developer doing most of my work in the front-end, a common use would be to use a tool like qs to turn an URI query into an object like ?b=foo&a=bar to {b: "foo", a: "bar"}, use Object.entries to turn it into an array, use Array.sort and feed it a closure to sort my queries by keys and turn it back into an object with Object.fromEntries and use qs to stringify it back. This can be cool to prevent having multiple variation of a URI query that leads to the same page (prevention of duplicate content). Without ES2015+ I think this would be such a tedious task to do but now we can do things that seemed hard back then so easy now.

Collapse
 
samanthaming profile image
Samantha Ming

Whoa! That’s a terrific example! Thanks for sharing 👏👏 ES6 and beyond is make it so much easier for us JS developers 🙌

Collapse
 
fetishlace profile image
fetishlace

Hi there:-) I have to google qs, to read it is node query string parser, since not into node yet:-) But if it is about sorting query string, there is build-in sort method in vanilla js URLSearchParams, it is iterable, so you can also get entries from it, you can has/set/get/append/delete/sort. Not sure for what all is qs needed for, it seems to me like abstract of URL Object possibilities + some other vanilla just wrapped into functions.

const url = new URL(location);
const params = url.searchParams;
const entries = [...params.entries()];
params.sort();
const entriesSorted = [...params.entries()];

Collapse
 
aminnairi profile image
Amin

Worth noting that this is available in Node 13.1.0 so quite new for the moment in the server side. User of earlier versions will want to stick to QS.

Thread Thread
 
fetishlace profile image
fetishlace • Edited

Thanks for feedback, that makes sense, I know practically nothing about node, just proposed it because thought it is older ECMA and implemented in all V8 based things.
I were searching a bit and found thread (stackoverflow.com/questions/472665...) stating that "Node v10 has built-in availability of URLSearchParams on the global object" but haven't tested, also that qs has sorting function build-in it seems.
Anyway I would go for that vanilla URL object with its possibilities now after all the search since I do not see any added value to that native URL API - sure it can have some value (i mean libraries) when it is about back-compatibility and browsers - i see IE don't know URLSearchParams, but not much surprising :-)

Thread Thread
 
aminnairi profile image
Amin

Yes whenever possible we should thrive to use the built in ECMAScript way of doing things you are right. And you are also right I have mistakenly taken the latest version but it is not used in production in express servers because (at least for us in enterprise) we are using custom delimiters and special encoder for our queries which makes URLSearchParams difficult to use alone. But I would use it in any other cases.

Thread Thread
 
fetishlace profile image
fetishlace

Thanks for explain! ;-) I am going to learn node soon anyway, since I need backend for some of my projects. I am just a bit frightened from number of libraries, packages, modules... I've just started some months ago and I am still just a hobby coder but I really like many things late ECMA brings into JS and I am really vanilla js fan - sometimes there is some sound reasoning behind people using some library, sometimes I have seen there is no other reason than preference or that someone is used to it from the past (when some new ECMA tools did not exist), or just it is more efficient for the use case (and that could be totally different story with another use case) - so it is good to hear why and how professionals using it :-)

Thread Thread
 
aminnairi profile image
Amin

You'll pick Node really easy if you are that interested about the ECMAScript standard I'm sure. And yeah, even myself I tend to use libraries when there is now lots of things that the standard is already doing natively.

Thread Thread
 
fetishlace profile image
fetishlace

Thanks for discussion and some encouragement:-) I will try to befriend Node as soon as possible since ye I have to admit i am postponing it for some time. I am aware on the other hand that some shiny new ECMA features not implemented the best at the time (so some runtimes way better for old ways of doing the same, and compatibility issues...) but it is changing with a time and lot of it is pretty good for doing a lot with a little - what is what you need for prototyping and efficient and fast building of things in general i guess. Good luck with your work too:-)

Collapse
 
fetishlace profile image
fetishlace

Cool written! I can really feel with this cute fairy-tale with good mood emoticons, it even move me to register to like <3

Collapse
 
samanthaming profile image
Samantha Ming

Woohoo! Glad it registers with you 😆 I definitely found this to be more fun to write. I will try this style with more future posts as well! Thanks for the positive feedback 😁

Collapse
 
jacobmgevans profile image
Jacob Evans

I wrote an article about similar topic recently. I liked some of your explanations better 😆🙂
Dev.to/jacobmgevans

Collapse
 
anjankant profile image
Anjan Kant

thanks!! it's very helpful

Collapse
 
samanthaming profile image
Samantha Ming

Awesome! Glad you found it helpful 😊