Beginner’s JS – Week 1 Check-in

Back in the saddle again! Recently, Wes Bos, an absolute gem of a human being and delightful educator, launched a new course titled Beginner Javascript where they outline the current state of javascript through scope of learning it for the first time. As someone whose entire Javascript knowledge has been hodgepodged together through years of debugging jQuery, copying/pasting from stackoverflow and CodeTuts, I saw this as a great way to try and fill in some of the gaps in my own knowledge and really take a solid look at the current state of the native language.

Tooling

One of the very first things that Wes has the course get configured is three major tools: VS Code (editor), ESLint (auditor), and Prettier (format enforcer). The way that VS Code interacts with additional tools such as ESLint/Prettier is so much (heckin) easier than anything I’ve ever configured before. Most notably, you can actually install tools such as ESLint/Prettier directly within VS Code which has a built-in interface to help you get packages installed directly without ever leaving the editor itself, even allowing you to edit your settings.config with a painless experience.

As a long time user of Sublime Text 3 (Coda 2 before that), I have to say that VS Code is a breath of fresh air that I needed.

Back-ticks & Template Literals

So far the most valuable thing I’ve learned about in the introductory lessons has been the new ES6 String changes, which are most visible when leveraging back-ticks (`) for strings. Much like single-quotes (') and double-quotes ("), you can use back-ticks to surround your Strings in javascript now. It comes with the usual benefits, however, unlike the single/double quotes, back-ticks do not need to be escaped in order to insert new items within the string (such as when you need to add a variable mid-string). This is through the use of a new technology called Template Strings (or “Template Literals”, depending on the context). This is by-far the most handy take-away from ES6 I’ve come across so far since it removes the need to constantly escape your string in order to do javascript-level actions such as output a variable or do some quick math.

Old method of adding variables to strings:
var greeting = "My name is " + name + ", and it's great to meet you";

New method of adding variables via Template Strings and back-ticks:
let greeting = `My name is ${name}, and it's great to meet you;`

Something which I’m sure will come in more handy as time goes by and I learn more and more about javascript is that this new method of using back-ticks for strings also allows the browser to accomplish simple math and other javascript-level functionality mid-string. I can imagine that running function() in the middle of a string, or quickly doing some calculative math on some page content could be extremely beneficial when attempting to accomplish various tasks. A very simple example of this would be running some simple addition mid-string:
const age = `I am currently ${75 + 15} years old.`;

Another cool benefit to using Template Literals is the ability to finally encapsulate multi-line content without having to manually code in <br> tags, or to escape your soft-returns. This is because Template Literals take the content of their string Literally (hence the name!). This means that you can do things such as:

let multiple_lines = `this string
crosses over
multiple
lines`;

and the result of it will reflect as-such:

A Console output shows multiple soft-returns inside of the variable named "multiple_lines", which each word on its own line.

The final “a-ha” moment for me in my first week of tackling the course was the big difference between double and triple equal signs (==  vs ===) when comparing two items. I had always been told that using double-equals (==) was sort of a no-no for coding and always reached for triple-equals (===). As it turns out, the explicit reason the triple-equals is better while programming is due to its ability to check both the Value and the Type of the two items being compared. The double-equals only checks the Value (meaning you can accidentally mix-and-match between numbers and strings, which could be rough!)

Despite coding for over half a decade, I never looked into the difference between them further, and just rolled with it.

Keeping it fun-damental

We’re taking this course in byte-sized chunks, but I’ll continue to outline the major “aha!” moments which jump out to me as we’re going through this. Most of my experience with programming in any capacity comes from on-the-job leaning in live, production environments, meaning that some of the more academic nuances of programming were lost on me since I never experienced it directly. What’s been great to see is that this course helps outline the more academic rationale for how and why these languages operate, which is starting to back-fill some large gaps in my understanding of how programs operate.

In a nutshell, I’m loving this course so far because it doesn’t make me feel dumb or make assumptions of things I “obviously should know” (when I might not). This course has been refreshing and engaging so far, and I’m excited to dig into more over the next few weeks.