Learning to Code: Day 54 — JavaScript: ES6 Part 1
Hello all, hope you are all keeping well, finally we are starting on a new sub-topic within JavaScript! I always write up notes on each chapter in my Notes App on my Mac, we managed to reach 100 chapters! Let’s get started on ES6 with FreeCodeCamp.
Introduction to ES6
But what is this mysterious ES6? Well, up until now, we’ve been learning the standardised version of JavaScript, also known as ECMAScript, or ES for short. This term and JavaScript are interchangeable.
Until now, we’ve been covering ES5 which was finalised in 2009, it can still be used to code, however much like other computer languages, JS is always evolving, and ES6, which was released in 2015, is the next evolution of JS that we’ll cover.
Note: At this point in the FreeCodeCamp lessons, ES6 is the latest version that FreeCodeCamp covers, however new ES versions come out every year and the current version as of today is ES11, or ECMAScript 2020.
We’ll cover several new features ahead including let, arrow functions, classes, promises and modules. In addition to this we touched on const in the last blog, which is an example of ES6.
The Difference Between Var and Let
When we declare a variable, we’ve typically used the keyword var, which we can overwrite later on in the code. This could potentially cause problems and bugs in bigger chunks of code.
One resolve of this is to use the new ES6 keyword let instead. This keyword declares the variable just like var, but flags up an error later on, if that variable is overwritten in future. So in summary, let declares a variable once and cannot be overwritten.
Additionally, we can also use the term “use strict” which enables Strict Mode and catches common coding pitfalls potentially “unsafe” actions and bugs. Take a look:
Comparing the Scope of a Let or Var Keyword
When we declare a variable with var, we can either declare it in the global scope, or manually in the local scope (e.g. inside a function).
The let keyword is similar, but with a few nifty extra features. For example when we declare let inside a block, statement or expression, it’s scope is limited to that block, statement or expression.
First, let’s take a look at how var responds:
As we can see in the for loop initialization, i is declared with var in the global scope, so when i++ (the final-expression in the for loop which increments the value of i per loop) is executed, the global variable of i is updated. This above example could also be written like so, with the same outcomes:
This can be problematic if this function were to be created and stored for later inside a for loop that uses a variable also called i. Here’s an example of a chunk of code later on which accidentally uses the global i in it’s initialization of the for loop:
Note: Notice how we say that i is strictly equal to 2, however when printed out we are returned with 3. This is because the updated global variable of i is used as it was predefined earlier as 3, and not the value of i which was created in this specific for loop.
So what we want to do here is create a variable which operates within the block that it is written, in a local scope, and not correspond across all variables in the global scope.
Enter the let keyword, this update does not allow this behaviour to be carried out in ES6:
Note: i is not defined because i was not declared in the global scope. It’s also a good idea to use different variable identifiers so as not to cause confusion (don’t always use the letter i in every loop you write, you goober!).
Declaring Read-Only Variables with Const
And this brings us smoothly back to const, which we touched upon yesterday, it is a keyword which we use before declaring a variable that we want to remain “constant”.
It takes all the features of let, but adds that variables are “read-only”. A common practice of writing const variables is to use uppercase, separating multiple words by an underscore, this will help you keep tabs of which variables are in read-only mode, for example: “DOGS_RULE” (you know it). Let’s take a look with these new features, note the positions of const and let:
And this prints out:
Mutate an Array declared with Const
It’s good practice to make all your variable identifiers with const, and when you know that the identifier must be flexible, then use let.
However, remember that objects (inc. functions and arrays etc) are still mutable (can be edited), const only prevents the identifier of that object, array etc. from being changed, not it’s contents.
So in summary, when a variable has been set with const, it’s not entirely safe from being edited, and we can still access the properties of that variable and edit those, e.g. the values in an array, where the array name itself is set with const, we can still change the properties/values with the likes of an Array Index such as array[0] = (write another value here).
Preventing Object Mutation
Now say we want to prevent that given object’s properties from being mutated, how would we go about that? This is resolved thankfully with the Object.freeze() function. After this function is in effect, you can no longer add, update or delete it’s properties. Let’s take a peek:
—
Aaaand let’s take a break. Thanks everyone for learning with me today and see you next time!
