Understand let, var and const keywords
Tags: javascript, es6, webdev, beginners
Published: 2023-07-09 08:54:32

## 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](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
2. Understand how to use the DevTools console to run Javascript code. This video will help you get started. [Console Logging Javascript](https://www.youtube.com/watch?v=RLCpvCTiDRo)
3. Be willing to learn and practice.

## `var` and `let` Keywords
Both `var` and `let `keywords are used in declaring variables. `let `and `var `differ in the scope of the variables they create.
When you declare a variable with the `var `keyword, it is declared globally. The `var `keyword, however, is declared locally if inside a function.

```
var myName = "Dennis"; // declared globally 
console.log(myName) //Output- Dennis
```
The above `myName `variable 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 `myName `variable inside a function `firstName`, right? then we return the `myName `variable.
when you call the function, the `myName `variable can be seen by the function hence the console logs `Dennis`.
CASE 2
We have a function `secondName `that returns the `myName `variable which is only locally available in the `firstName `function. When you call the `secondName `function, the console logs an error.
However, changing the `myName `variable to global, the `secondName `function 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
}
```
2.  Variable declaration as a statement

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

```
3.  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 `x `and `y `are accessible because the `let `keyword creates variables with block scope. This means that the variables declared with `let `are only accessible within the block where they are defined or any nested blocks.

However, outside the `if `statement block, `y `is no longer accessible. When we attempt to access `y `after the `if `statement, an `Uncaught ReferenceError` is thrown because` y` 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 `const `keyword
The const keyword is applicable in many use cases in Modern Javascript.
>Some developers prefer to use the `const `keyword throughout. The developers, who use the `const ` keyword however, may use the `let `keyword when they need to reassign a value later.

> Variables declared with the `const `keyword are` read-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 the` arr` variable still points to the altered array. Like all arrays, the array elements in `arr `are mutable, but because `const `was used, you cannot use the variable identifier `arr `to 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 `let ``const `and `var `keywords.
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](https://twitter.com/eikev_dennis)