Const let and var in ES6

Datetime:2016-08-22 21:36:31          Topic: ECMAScript           Share

Const let and var in ES6

August 1, 2016

ES6 Introduces two new variable assignment keywords to the Javascript Language: const and let . These two new assignments help to clean up the language considerably and improve some of Javascript’s famous variable leakage problems.

In this post, we will cover the following topics:

  • What const & let are and how they differn from var
  • When const and let should be used
  • The differences between const & let
  • Controversy around whether var should still be used.

Lets dive right into the code!

var Keyword Recap:

Before we discuss let and const , Let’s review the behavior of the var keyword:

You can re-set the value of a variable set with var on the fly.

Here’s an example:

Let’s say you set the following variable width to 100. Logging that value to the console, you would get 100:

If you were to re-set the value of width after you logged it to the console, you the value of width would change.

Here’s the example in full to show what I mean:

The var variable assignment keyword is extremely flexible.

Stricter languages would not allow you to assign the variable width a value, then create a new variable with the same value, and re-assign it on the next line.

variables defined with var are also function scoped.

That means that if you were to assign a variable inside a specific function, you would not have access to it outside of that function.

A code example:

var , let , const : So, what’s the difference?

const & let - Unlike variables declared with the var keyword, const and let are block scoped, not function scoped.

In essence this means that they will not leak out of blocks the way variables do. A perfect example would be a simple if statement.

Since variables are function scoped, you can access a variable defined in an if block outside of that block, but you cannot do so with the const & let variables.

Here are some examples of this in action:

Using var :

Using const

Using let

As you can see, let and const prevent pesky variable leakage problems in the language by being block scoped instead of function scoped!

Great, but what’s the difference between let & const ?

Variables declared with let can only be declared once within a given scope.

If you defined a variable let points = 50 and try to define that variable again, Javascript will stop you from doing so.

Here’s an example:

As you can see - you cannot assign a different value to the same variable created by let within the same block.

const cannot be updated but let can

let is the right keyword to use when you want to work on data inside a specific scope, and still want the behavior of a standard Javascript variable.

const works a little differently. const literally means Constant, in other words, it cannot be changed.

Try to set a value to a const variable and then change that value at runtime.

Here’s an example of what won’t work with const .

There you have it, a constant has a fixed value that should not be changed.

Constants cannot be changed, but their properties can be. Consider the following example that uses a Javacript Object.

Let’s create a new object called ‘Erik’ and give him some properties:

Now, let’s say I finally stick to my weight lifting program and actually gain that 30lbs of muscle. Not going to happen, but let’s just say.

So, despite the fact that the object itself, erik cannot be reassigned to another object.

The individual properties that compose that object can indeed be changed.

While these new additions seem quite useful, my concern about the use of these features is that it will allow new developers to avoid learning fundamental principles such as the Execution Context, since these variables effectively prevent many of the common errors developers who do not understand the Execution Context often have (such as variable leakage)





About List