Looking for a new tutorial set

The past few Javascript exercises sets I have done over the past year were exclusively pre-ES6 syntax, although sometimes I would end up using methods that had some support gaps, the string includes() method being one example (Internet Explorer did not embrace this method unlike most browsers). With all the advances in Javascript over the last few years, I felt that a newer approach was needed if I was going to brush up on the fundamentals while keeping up to date on new concepts.

Selectors and variable interpolation

My first exercise involved tying together keyboard input with audio output. One of the big advantages for string construction that I discovered here was variable interpolation. I found it much easier to place variables “inside” a string with delimiters compared to the old style of concatenating fragments and variables.

Old

New

I had used Python string formatting before so the concept of embedding references in strings was familiar to me:

CSS Variables and JS

Once I was introduced to LESS styling I used variables as a matter of course, but in doing so I left exploration of CSS behind. Only recently did I use css variables in an exercise. After having used jQuery style functions for so long it was illuminating to see exactly how style can be manipulated with vanilla javascript.

Compared to changing styles via class changes I found that manipulating a variable inherited by other properties was much simpler. The result was replacing a chunk of code into functionality that is “under the hood”.

An array of options

When it comes to processing data sets I have often used the Underscore library and it’s functions like map() and filter(). As part of my vanilla JS refresher I went back to the core Javascript functions for handling data sets. This is one area where the fat arrow (=>) started to demonstrate its benefits to me regarding concise code. Instead of having to deal with functions that returned booleans, I could rely on the implicitness of the syntax (return if true).

Before

const genX = castaways.filter(function(castaway) {

     if (castaway.year >= 1963 && castaway.year <= 1982){

          return true;

     }

});

After

const genX = castaways.filter(castaway => castaway.year >= 1963 && castaway.year <= 1982);

In a way this makes code less human readable by putting more code into symbols. Also, it does look a little confusing to have an function call that looks like a comparison modifier. I will of course use it whenever appropriate, but I can understand people being puzzled by this new feature.

Reviewing the sort() function I decided to look into exactly how the comparison is done. I have read the basics on sorting algorithms in the past, so I decided to log the values being analyzed. Reviewing the purpose of the returns was a good refresher (1 to increase index, -1 to decrease index) and the end result was that sorting felt less like a black box.

The reduce() array function was one I hadn’t used in previous projects. At first glance it seems like a simple way to aggregate the data in an array and return a sum. This could be done with a a foreach() method, but as I read the documentation further I came to understand why the different array methods exist. Stepping back and taking a moment to look at the specifics of each method, the advantage of reduce (it returns an object or value) made it better suited for aggregation than a foreach() method since the accumulation is handled by the method itself. This contrasts with having separate variable and updating that during the iterations of a foreach().