The Startup
Published in

The Startup

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.

-FreeCodeCamp

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.

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

And this prints out:

-FreeCodeCamp

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:

-FreeCodeCamp

Aaaand let’s take a break. Thanks everyone for learning with me today and see you next time!

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Scroll to specific fragment in Ionic 5

Reasons to use React Hooks instead of Classes | WalkingTree Technologies

4 Structures to improve Javascript code

Example of code showing the difference between traditional if and ternary if

Understanding JavaScript String Interpolation Through Email Marketing

Social application with Vue.js and GO

Remove Linked List Elements

Get Started With These 3 API Projects

How to publish a static web using Surge?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp

More from Medium

Getting Started with Axios

Master The UseEffect Hook With Simple App (Final Part)

When To Use React.memo() — And When Not To

Front-End Code Architectures