Modernizing My DOM Table Sort JavaScript

Photo by Kelly Sikkema on Unsplash

Some time ago I wrote an article about making a quick simple JavaScript table sort. Like all things in programming if you’re not disgusted with your own code from a year or two prior, you’re in the wrong business. I’ve been programming for 40 years and there’s always newer, better, or cleaner ways of doing things.

It is amazing how much your coding practices can change in two years.

When I wrote that, I had not as yet embraced let/const since I had never needed anything finer than function level scoping. Probably because I often maintain cross-references, keep functions focused enough not to need it, work with IIFE / SIF, and so forth. It wasn’t until I discovered that using a simple empty set of braces I could replace what I was using IIFE for with let and const, that I started seeing any merit to their use.

Likewise we have for..of that has a far cleaner syntax than the old indexed for loops, and makes Array.forEach look like outdated outmoded trash.

Arrow functions I was also slow to adopt because I find them cryptic for anything more than actual lambdas, and I dislike their behavior with Object.this. But writing code isn’t about me, it’s about everyone, so if it’s going to be common practice I damned well better get used to it.

I’ve also changed up a lot of my practices as I’m using Object.assign far more often when working with the DOM, if we don’t care about pre 2020 browsers new ECMAScript features like Element.replaceChildren means a bit less code with more clearly saying how/what/why.

And looking at the original I do think I fell prey to premature optimization in terms of resetting the button values when a new one is selected.

So… here’s a rewrite of the simple sort:

Let’s break down the new script.

The first thing you’ll notice is the outer {} creating a scope isolation block. No more IIFE!