Understand let, var and const keywords

Introduction

The best measure for growth in any area of life is the ability to embrace change. Everyone feels productive when trying new things, and becoming adventurous gives that sense of confidence.

Now in the life of any software developer, change is inevitable. Often, it is hard. Why? Because technology is fast-evolving, new languages and updates are constantly released. Being a developer is signing in to becoming a life-long student.

This article is neither meant for motivational speaking nor change discussion. We will explore ECMAScript2015, known as ES6. ES6 is the ECMAScript language specification standard's 6th and most significant edition.
With ES6, you can write Javascript with simple code, increasing readability.

Pre-requisites

Before getting with this article, you need to:

1. Know Javascript Basics. To get started with Javascript, Mozzila Developers
2. Understand how to use the DevTools console to run Javascript code. This video will help you get started. Console Logging Javascript
3. Be willing to learn and practice.

var and let Keywords

Both var and letkeywords are used in declaring variables. letand vardiffer in the scope of the variables they create.
When you declare a variable with the varkeyword, it is declared globally. The varkeyword, however, is declared locally if inside a function.

var myName = "Dennis"; // declared globally 
console.log(myName) //Output- Dennis

The above myNamevariable is declared globally, hence, can be accessed anywhere in your code.

CASE 1

function firstName(){
    var myName = "Dennis"; //declared locally
    return myName;
} 
console.log(firstName()); //Output  -Dennis
CASE 2
function secondName(){
    return myName;
}
console.log(secondName()); // _Output a Uncaught ReferenceError: myName is not defined_

Let me explain what the above code does:
CASE 1
We have declared the myNamevariable inside a function firstName, right? then we return the myNamevariable.
when you call the function, the myNamevariable can be seen by the function hence the console logs Dennis.
CASE 2
We have a function secondNamethat returns the myNamevariable which is only locally available in the firstNamefunction. When you call the secondNamefunction, the console logs an error.
However, changing the myNamevariable to global, the secondNamefunction should return Dennis.

let Keyword
When you declare a variable with the let keyword inside a block, statement, or expression, its scope is constrained to that block, statement, or expression.

In JavaScript, a block is a set of zero or more statements grouped inside a pair of curly braces { }.
A block can contain any valid JavaScript statement, including variable declarations, loops, conditionals, function declarations, and expressions.

1. Variable declaration inside a block

{
  let x = 10;
  console.log(x); // Output: 10
}

1. Variable declaration as a statement

let y = 5;
console.log(y); // Output: 5

1. Variable declaration as an expression

let z = (a = 2, b = 3, a + b);
console.log(z); // Output: 5

Here's an example that demonstrates how the let keyword creates variables with limited scope:

function exampleFunction() {
  let x = 10;

  if (true) {
    let y = 20;
    console.log(x); // Output: 10
    console.log(y); // Output: 20
  }

  console.log(x); // Output: 10
  console.log(y); // Uncaught ReferenceError: y is not defined
}

exampleFunction();

In the example above, the exampleFunction function contains two let declarations:
let x = 10, and let y = 20;

Inside the if statement block, both xand yare accessible because the letkeyword creates variables with block scope. This means that the variables declared with letare only accessible within the block where they are defined or any nested blocks.

However, outside the ifstatement block, yis no longer accessible. When we attempt to access yafter the ifstatement, an Uncaught ReferenceError is thrown becausey is not defined in that scope.

On the other hand, x is accessible both inside and outside the if statement block because it is declared in the outer scope of the function.

Mutate array declared with constkeyword

The const keyword is applicable in many use cases in Modern Javascript.

Some developers prefer to use the constkeyword throughout. The developers, who use the const keyword however, may use the letkeyword when they need to reassign a value later.

Variables declared with the constkeyword areread-only. However, it is important to note objects(including arrays and functions) assigned to a variable using const are still mutable.

const arr = [2,3,4,5,6];
 arr = [4,5,6,7];
arr[2] = 50;
console.log(arr);

arr = [4,5,6,7]will result in an error. when you comment on the line, the console.log will display [2,3,50,5,6].

From the above example, you can mutate objects, and thearr variable still points to the altered array. Like all arrays, the array elements in arrare mutable, but because constwas used, you cannot use the variable identifier arrto point to a different array using the assignment operator.

How to prevent Object mutation

From the previous example, const keywords do not protect your data from mutation.
Javascript provides an Object.freeze() function to prevent mutation. Any attempt to mutate data will throw an error if the script is running in strict mode.
for example,

let myObject = {
name: "Dennis,
age:30
}
Object.freeze(myObject);
myObject.name = "John"
myObject.newproperty = "learning"
console.log(myObject);

Conclusion

Thanks for reading this article.
You have learned to declare variables in Javascript using letconstand varkeywords.
Also, the article has helped you understand how the keywords create scopes in your code.

This article was written by Dennis Mbugua.
Follow me on Twitter Twitter