DEV Community

Discussion on: Sorting arrays in Javascript by date

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn • Edited

One comment in general, you might want to consider using JavaScript's native Date type. This won't necessarily make the sorting any easier, but it may make other aspects of date handling (such as formatting them for display to the user) significantly simpler.

As far as the actual sorting, the reason it's not working is that you're trying to subtract strings for the comparison, which obviously won't work. Simply converting the code to use the native Date type as mentioned above would actually let everything work as-is right now, but there are a couple of other approaches that come to mind:

  • Instead of storing the BranchModel instances in an array, store them as properties of a plain object (IOW, a mapping or dictionary in other language terms) with the keys being the date strings. You can then do something like this:
// items is the mapping you want sorted values from based on keys

let tmp = Object.keys(items) // Get a list of the keys.
tmp.sort() // Sort it.
tmp.map((i) => items[i]) // Replace each key in the list 
                         // with the corresponding value from items.
                         // After this, tmp is now an array of the values
                         // in sort order, and can be used directly.
  • If you're willing to add a dependency, you can actually do this easily with Lodash using the _.sortBy() function. Code for that would look like this:
// items is the array to sort.
// This uses a shorthand form not mentioned in the Lodash documentation
// to sort by a specific named property of each element.

items = _.sortBy(items, ['_date'])

Also, one general JavaScript tip: Anything that doesn't actually depend on the DOM being safe to manipulate shouldn't be inside a window.onload handler. Put simply, there's no reason to wait to define functions or values or perform computations that don't need the page to be fully loaded until the page is fully loaded. Running those without waiting can actually help speed up load times, and anything outside of a window.onload handler is essentially certain to execute before the contents of any of the handlers because of how JavaScript actually handles events internally.

Collapse
 
thefern profile image
Fernando B 🚀

Thanks for the awesome tips. window.onload is just a noob mistake, I'll try to read documentation on that. I think I added it in the beginning as something wasn't working, found it somewhere on SO.

Good tip on adding Lodash. I'll revisit this tomorrow, my brain is literally fried lol. Is what happens when trying to make a new project while learning a new language lol.

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn

window.onload is just a noob mistake, I'll try to read documentation on that. I think I added it in the beginning as something wasn't working, found it somewhere on SO.

It's not necessarily a mistake to use window.onload (unless of course you're using a library that provides the same functionality). You should always make sure the DOM is safe to manipulate before you try to do so, and window.onload is one of the ways to do that.

Good tip on adding Lodash.

Lodash one of the few things that I'm pretty much always willing to add to a project, it's not exactly small, but it's just so darn useful.

Is what happens when trying to make a new project while learning a new language lol.

By the way, if you haven't already seen it, Mozilla has a rather good web developer reference site that's remarkably helpful when you're just starting out learning JavaScript.