Why You Should Choose Luxon for Date Wrangling in Javascript

Javascript’s native Date object is severely lacking. Once you try to do much more than very basic formatting and manipulation, you’ll probably start reaching for a library like the excellent Moment.js.

Moment.js is much nicer than native Dates, but there’s still room for improvement. Luxon is a modern Javascript date/time library built by one of the Moment.js developers to address some shortcomings in the old standby for date manipulation. It shares a lot in common with Moment.js, but I recommend you reach for Luxon the next time you need to do heavy lifting on dates and times. Here’s why:

Luxon objects are immutable.

Immutability means that objects cannot be modified (or mutated, hence immutable) once created. For a new developer, this might sound like a lack of flexibility. Instead, it actually makes it easier and more predictable to do manipulation on dates. Let’s look at an example of Moment’s mutability directly out of the Luxon documentation that illustrates the problem.

var m1 = moment();
var m2 = m1.add(1, 'hours');
m1.valueOf() === m2.valueOf(); //=> true

The add method returns the original Moment object rather than a new object. The addition is accomplished by changing the original object. Since Moment objects are mutable (i.e. can be mutated), it’s difficult to create new objects by manipulating old ones.

Most native Javascript methods do not mutate the original data. Developers come to expect this from Javascript, and it’s surprising when libraries break with that convention. Here’s an example of the built-in array object’s join method. This method takes the items in an array and joins them together in a string separated by commas, returning the string.

var days = ['Monday', 'Wednesday', 'Thursday'];
var daysString = days.join();
console.log(days); // ['Monday', 'Wednesday', 'Thursday']
console.log(daysString); // "Monday,Wednesday,Thursday"

Here we want to get a string of the days so we can display them to the user. We use the array’s join method to do that. We still want to keep the original array because we might want to work with the days as an array later on in our application.

It would make our lives difficult if the join method converted the original array into a comma-separated string. That’s exactly what happens in the Moment example above.

UPDATE: A reddit user has pointed out there are plenty of array methods that mutate the array like push and pop. He’s absolutely right. I’d argue, though, that the explicit purpose of these methods is to modify the array and the verbs are more indicative of that. The default mode of Javascript native object methods is still to return a value rather than to mutate.

If we want to have two objects after the manipulation of the Moment object, we have to clone the object to make a second copy before we manipulate it.

var m1 = moment();
var m2 = m1.clone().add(1, 'hours');
m1.valueOf() === m2.valueOf(); //=> false

It’s not hard to do, but it is easy to miss. Stuff like this can cost you hours of debugging time if you overlook it. With Luxon, this manipulation looks a lot like our previous array example. Here’s the example shown in their documentation:

var d1 = DateTime.local();
var d2 = d1.plus({ hours: 1 });
d1.valueOf() === d2.valueOf(); //=> false

The Luxon object’s plus method, rather than changing the value of the original object, returns a new Luxon object with the new value. We no longer have to clone the object first since the Luxon object’s methods predictably return new objects. This is consistent with Javascript’s built-in data types and their methods, so it’s one less thing we have to remember when we decide to use Luxon.

Next time you’re working with dates, make your brain less cluttered and your life simpler by trying Luxon. Both it and Moment whip dates into shape like the Javascript Date never could, but Luxon ditches the annoying mutability gotcha. Your applications will handle dates with ease and you can work with dates just the way you’d expect!

Get my web development tips in your inbox!

Enter your name and email, and I'll send you more tips like this one as soon as they go live on the site!

We won't send you spam. Unsubscribe at any time. Powered by ConvertKit

2 comments

  • Is this the full extent of the value proposition of luxon over moment? For instance, we hit some major perf issues with moment (years ago, pre-luxon)… Does luxon address that sort of thing?

    • Hey, Joe. It’s not the full extent of the value proposition, but I’m not sure that improved performance is part of that. Someone created a comparison on jsPerf (https://jsperf.com/luxon-vs-moment), but the site seems to be having some problems right now. When that comes back up, it might tell you what you need to know.

      The Why Does Luxon Exist page (https://moment.github.io/luxon/docs/manual/why.html) of the Luxon docs gives more insight into the value prop. There’s also a direct comparison with Moment in those same docs. I’d suspect the performance difference in the two is negligible since that doesn’t seem to be a focus. If performance is your paramount concern, you might look at date-fns (https://date-fns.org/) which is focused on being simpler and more performant.