(Re)Teaching JavaScript Fundamentals in 2020

What do you really know about Variables, Data Types and Immutability in JavaScript?

Hans McMurdy
Feb 10 · 14 min read

Unlike the prior article, this will be a bit higher level because I want to try and fill a knowledge gap between entry-level and mid-level developers by reteaching some core fundamentals.

Fancy Fancy Mandatory Image — Photo by Markus Spiske on Unsplash

The goal for this article isn’t to explain everything in JavaScript in overwhelming detail but rather summarize the essentials as plainly as possible and link to other resources for readers who want to explore those topics more thoroughly.

This article will also be treating ES6 as standard JavaScript as it is supported in all modern browsers unless you are supporting an insecure browser like Internet Explorer (which you shouldn’t be). It will also use screenshots for most code examples in order to encourage readers to type it.

In summary, you will learn how to:

  1. Explain var with concepts such as hoisting.

For experienced JavaScript developers, this article may seem a bit redundant and basic because I’m writing for complete beginners as well. That being said immutability still a confusing topic even for many mid-senior developers and its largely due to a myth that const magically makes things immutable (it doesn’t).

Variables

In general, programming languages have 3 steps for working with variables:

  1. declaration, creating a variable.

Assigning values with Operators

In JavaScript, there are a number of operators, the most commonly used are include Assignment operators, Comparison operators, Arithmetic operators.

3 most common categories of JavaScript operators

There are however a few others that we won’t be going into such as bitwise, etc.

When learning any new programming language its useful to start out learning variables and specifically the Assignment operators because its how we assign values such as the data type to a variable. After that, working with Comparison operators helps to ease the transition into basic control flow using the ternary operator. Finally, for math, we have the Arithmetic operators and the math object.

Googling how to write various math equations with JavaScript can not only help solve student’s homework but can also be a fun way to learn programming and math in an applied manner… Something I may add, is sorely lacking in educational institutions at all levels.

Here’s an example of using JavaScript functions and arithmetic operators to define a Pythagorean theorem function.

JavaScript Pythagorean theorem function

Here we have a simple applied mathematic function using JavaScript. Here we are using JavaScript built-in Math object to get the squared values of sideA and sideB, then using the addition operator we add to them together and get the square root. So (16) + (9) = 25. Then using Math.sqrt(25);//5.

As a Coding Exercise, when you are done reading this article, check out this list of equations and try to write as many of them as simple JavaScript functions.

Hoisting with “var”

As mentioned above, we generally need to declare a variable, then initialize it by assigning it with a value and finally, we use it somewhere. In JavaScript, we can actually skip the first step, declaration and just assign a variable with value then use it in a process called, hoisting. This process is visualized below when var is added to the top, or hoisted to the top.

Photo by Hans McMurdy — JavaScript Hoisting variables & scope

The process of hoisting refers to how the variable declaration is hoisted to the top when the code is compiled for the machine to read it.

Now that we have described the process of creating variables in the context of hoisting, let’s put it into the context of scope and immutability.
There are a few more things I want to quickly point out from the gif:

  1. Hosting only works with var so it won't hoist a declaration withlet & const, meaning hoisted variables will never be block scoped.

What is immutability?

Before we discuss immutability lets first off, delete any possible preconceived ideas about const and immutability. It’s about a variable (re)assignment. Immutability is when “an object’s state cannot be modified after it is created” whereas Mutability refers to “an object whose state can be modified after it is created.” There is also a difference between weak immutability and strong immutability.

As a language, JavaScript is by default weakly immutable for two reasons:

  1. Primitives are weakly immutable by default unless const is used.
    What this means is although a primitive value won't change when a method like toUpperCase(); is used, it can be reassigned to a new value, thus weakly mutating it. const solves this and makes variables unable to be reassigned while also changing the scope.

We’ll cover this topic more throughout the article but for a more in-depth understanding, I highly reading the following article by Gabriel Lebec:

Variable Declarations

The most important part of variables declaration is how you are managing the scope of variables. In other words, What are you using the variable for? Where will it be used in the application? How should the variable be scoped? Should the value be allowed to change, mutate or be reassigned? Finally, how are you keeping track of and preventing mutations in an application?

Every programming language has different ways of declaring variables. In a dynamically typed language like JavaScript, we declare a variable with var, let and const. The last two variable declarations were part of a 2015 update to the language’s standardization, known as ECMAScript. That, however, is the last time I will use that word and instead I’ll just refer to these parts as modern JavaScript, or simply JavaScript because it has been 5 years and its time to get over the buzz word.

Photo by Hans McMurdy — Const & Mutable Object in JavaScript Example

As most people should already know, by now, var is function scoped whereas let & const are blocked scoped and the “tricky part” of const is that it can't be “reassigned” a value or be “redeclared”.

Seems easy enough right?
But wait, if you run the code in the image, why does mutable.title have a value of “teacher” if it cannot be reassigned?

Isn’t const supposed to be a constant value? It’s supposed to be immutable too right? That's what this book, certification, article or YouTuber told me.

Hopefully, the books and articles you been reading, the videos you’ve been watching and teachers you’ve had, haven’t led you down the path of misconception. But if so, you are not alone. It happened to me too.
This has actually been a fairly big and ongoing discussion in the JavaScript community and the general consensus is to start with const and move towards let.

So how do we get developers with this misconception back on track?
Who can spot the bug in how immutability was taught?
Well, we didn’t discuss data-types in terms of declaring variables & immutability.
And why would we in a dynamic language? Well, this is exactly why.

In the example above the value wasn’t reassigned but rather the property was mutated. This again, ties into JavaScript being a weakly immutable language. The variable is still an object and objects are mutable unless you explicitly make them immutable with seal or freeze methods.

Data types in Javascript

In JavaScript and other dynamic languages, a variable’s type is determined during the runtime or when the code actually runs/executes. This means that a variable can change after you have assigned it as a primitive or non-primitive.

More specifically, these data types are broken up into two categories, primitive types, and non-primitive types. Understanding each is essential for understanding immutability because primitive types are immutable whereas non-primitives are mutable.

If you hang around with enough JavaScript geeks, you may have heard the following expression:

“everything in JavaScript is an object”

It’s a bit of a cliche but its mostly true because even many of the primitive types are also Standard built-in objects. This is why I choose to use the term, non-primitive instead of “object” which is basically everything and vary confusing too beginners. The diagram below illustrates the data types in each category of primitives and non-primitives.

Photo by Hans McMurdy — JavaScript Primitives VS Non-Primitives

According to MDN, there are seven primitive data types:

  • Boolean, true or false.

Next, there are six main non-primitive data types:

  • Object Object You can declare an object two ways, literally, let obj = {}; or with a constructor let o = new Object.

For more on data types I highly reading the following article(s):

Mathwarehouse doesn’t use JavaScript but it has some great illustrations for understanding data types and especially how memory works with by-value vs by-reference.

The following article by Chris Geelhoed does a good job of discussing JavaScript primitives and Object references.

Scope in JavaScript

The topic scope in JavaScript is fairly simple when it comes down to it. In JavaScript, the scope can be largely be defined three ways:

  1. Global/module

Global scope refers to variables available to the whole program or between scripts. Contrary to what some would teach you, var isn’t a “true” global variable because it works slightly differently based on the runtime environment (nodeJS VS browser).

In the browser we have the window object where globals are created by using var or through hoisting:

console.log(window.value); // undefined
value=100;
console.log(window.value); //100

Note that if you are new to JavaScript, this won’t run in nodeJS because there is no window object in nodeJS. Try it out for yourself.

In nodeJS,var is scoped to the module due to closures which is where module scope in nodeJS comes in. Although there is no window object in nodeJS, there is still a Global object and hoisting still works just fine.
The closest example would be the following code:

testContext = 15;
console.log(global);
console.log(global.testContext); // 15

Function scope refers to any variable declared within that function and is only accessible inside that function and any nested functions. var is a function scoped variable declaration.

Photo by Hans McMurdy —JavaScript global window object vs function scope

Note that var is bound to the window object and can be logged as a property.

let on the other hand is block scoped and even outside the curly braces still isn’t bound to window.


Block scope refers to variables available to the block, or curly braces {}, it is defined in. const and let variables are both block-scoped variable declarations.

The Coding Train — let vs var — Topics of JavaScript/ES6

However, const reserves the word within the block scope so it cannot be reassigned.

When const is used with a primitive type it’s immutable because it can never change, even through reassignment.

However, non-primitives are still mutable like we demonstrated in the very beginning when we used objects. This also applies to arrays so you may want to read up on mutating vs non-mutating array methods.


Lexical scope is a bit difficult to define simply and honestly should be in its own article. The simplest definition of lexical scope according to google is:

“a variable defined outside a function can be accessible inside another function defined after the variable declaration. But the opposite is not true, the variables defined inside a function will not be accessible outside that function.”

To understand it you’ll need to understand closures and this. The latter concept is probably the single most confusing and awkwardly named concept in the entire language. Below are a few youtube videos that can help you understand the lexical scope and everything else scope related in JavaScript.

Hoisting, Scope, Closures, and Lexical Scope

Tyler McGinnis — The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript
Kyle Simpson on Lexical Scope

THIS and Lexical Scope

Shub‘’ five use cases of this:

Ilona Shub: What the hell is this?

1. Function Invokation
(1:28)
2. Method Calls on Objects (1:56)
3. “new” keyword
(2:55)
4. Explicit Binding
(3:25)
5. Arrow Functions
(4:00)

THIS in Classes

Finally, one more advanced point of use of thethis keyword is introduced when developers start using JavaScript Classes. The topic of class often leads to confusion and tends to be especially common when developers come from strongly typed, Object-Oriented Programming (OOP) languages like C#.

Though many OOP concepts are comparable, sometimes it’s still like comparing a word that only exists in Chinese and trying to translate it into literal English. Classes are the perfect example because they are a loan word from OOP languages and in JavaScript the inheritence model is based on prototypes instead of true OOP inheritance so this is a bit more tricky to deal with.

To learn more about using classes with the this keyword, I recommend checking out this article written by Michael Krasnov. You don’t have to actually avoid using JavaScript classes, but rather understanding how and when to use it compared JS objects and prototype delegation will serve you well as you learn JavaScript.

Conclusion

We covered a lot in this article. I hope it helped clarify some common misconceptions and provide you with additional resources to learn beyond the article. Now go ahead and test your knowledge with today’s post-assessment.

Please don’t be discouraged if you don’t do well on the post-assessment, it goes fast so a lot people miss question they know. All it means there is more room for you to grow in terms of speed.

I’m also introducing an expert post-assessment. Fair warning, its pretty challenging, and the last two questions tripped up mid and senior developers from at larges companies such as Choice Hotels, Axosoft and Keap so try out the quiz if you want more of a challenge. I’ve adjusted it since but whether you are a beginner, or an experienced developer don’t beat yourself up over the assessments.

Additional Resources

Finally, until the next article is out, I have some homework for you and it may or may not be on an assessment in the next article of the series.

JavaScript Homework
Finish the entire basic JavaScript track over on free code camp to practice the basics of JavaScript and fill the gaps that this article doesn’t cover by practicing some JavaScript basics. I recommend you take notes because there will be a pop quiz. Also if you think 110 questions is too many, just remember that if my high school students could do this track, so can you !

Explore the Truth Table of JavaScript

JavaScript: The Weird Parts by Charlie Harvey
Harvey’s article will help you learn all about the JavaScript comparison operators, “the truth” and all the weird parts of JavaScript.

Future articles in this series

I haven’t 100% decided on the “proper” order of the next few articles I’ll be publishing so leave a comment on what you liked/didn’t like or would like to read in the future.

Some few topics currently in draft or on my to-do list for this series:

  1. JavaScript Developer RoadMap

More on Node Tutorials:

  1. Node Fundamentals

Why you should sign up as a medium member?

First and foremost it encourages technical writers like myself to write more content. Second, I use the passive income from writing to put into my newborn’s college fund. So every read and every penny goes to his future. That being said, if you can afford Netflix, you can probably afford a $5 medium account so please consider signing up for a paid account.

JavaScript in Plain English

Learn the web's most important programming language.

Thanks to Millan Singh

Hans McMurdy

Written by

I write about code, teach/mentor in MERN / NERD & LAMP stack. https://git.io/JeNi2. linkedin.com/in/brett-hans-mcmurdy

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade