You either 'let', 'var' or keep 'const' in JavaScript
Tags: javascript, programming, webdev, beginners
Published: 2022-06-12 07:22:44

# Difference between var, let and const

In JavaScript, variables are assigned using three main keywords/ways which are:-
* _**var**_
* _**let**_
* _**const**_.

But, var has became the old way to declare a variable due to the introduction of JavaScript ES6. 

Many features were introduced such as let and const which have became de-facto ways for variable declarations.

**Note** Variable is the value that occupies space into the computer memory i.e. container that is used to store data.

There is difference between var, let and const in JavaScript. These differences between all these keywords, are based on the following concepts:-

## Scope
This refers to the way in which variables are accessed i.e. It's how we determine the accessibility of variables.
In JavaScript, there are three scopes:
1. Global Scope
2. Function Scope
3. Block Scope

### Global Scope
This refers to when variables are declared outside the function block and can be accessed anywhere within the program.
```
var age = 19;
let game = 'fifa';
const pie = 3.14;

function getAll(){
    console.log(age);
    console.log(game);
    console.log(pie);
}
console.log(age);
console.log(game);
console.log(pie);
getAll();
```
**Note**:Any of var, let or const are used to declare global variables which can be accessed anywhere in the program.

### Function Scope
This refers to when variables are declared inside the function scope and can only be accessed within a function. Also known as local scope.

```
function getAge(){
    var name = "John";
    console.log(name);
}
// console.log(name); // ReferenceError: name is not defined
getAge();
```

**Note**:Only _**var**_ is function scoped i.e. a variable declared by var in function block can accessed only in function itself and cannot be accessed outside the function i.e. It throws a _ReferenceError_

### Block Scope
This refers to when variables are declared in the block or curly brackets and cannot be accessed outside it. A block can be function or control structures such as if, for, while etc.

```
function gaming(){
    let name = "John";
    const age = 19;
    console.log(name);
    console.log(age);
}
// console.log(name); // ReferenceError: name is not defined
// console.log(age); // ReferenceError: name is not defined

if(true){
    let name = "Paul";
    console.log(name);
}
// console.log(name);
gaming();
```
**Note**:Both _**let**_ and _**const**_ are block scoped i.e. a variable declared by let or const in a block can accessed only in the block and cannot be accessed outside the block i.e. It throws a _ReferenceError_

## Hoisting
This refers to the behavior to move up the declarations to the top of the scope before code execution. It's a tendency that allows variables and functions to be used before their declaration i.e. the variables/ functions declarations are moved up to the start of code block before execution regardless where they are declared in the code block.

* var allows hoisting 
```
name = "John";
console.log(goal);
var name;
```
* let and const don't allow hoisting
```
goal = "business";
console.log(goal);
let goal;
```

```
goal = "business";
console.log(goal);
const goal;
```
## Declaration & Accessibility 
The variables declared using _**var**_ can be declared without initialization.

```
var age;
console.log(age); // undefined
```
**Note**: The variables declared using _**var**_ can be accessed without initialization and returns undefined.

Also those using _**let**_  can be declared without initialization.

```
let age;
console.log(age); // undefined
```
**Note**: The variables declared using _**let**_ cannot be accessed without initialization and returns error.


And those using _**const**_ cannot be declared without initialization.

```
const pie;
console.log(pie); // SyntaxError: Missing initializer in const declaration
```
**Note**: The variables declared using _**const**_ cannot be accessed without initialization as it cannot declared without initialization.

## Re-declaration
The variables declared using _**var**_ can be re-declared and updated.

```
var age = 19;
var age = 20;
age = 30;
```

While those using _**let**_  cannot be re-declared but can be updated.

```
let game = 'fifa';
game = 'pes';
```

And _**const**_ can neither be re-declared nor updated.

```
const pie = 3.14;
const pie = 2.15; // SyntaxError: Identifier 'pie' has already been declared
pie = 10; // TypeError: Assignment to constant variable.
```

## Summary

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snmw871amesqsk4tjvlc.PNG)
> Image credit: [GeeksforGeeks](https://www.geeksforgeeks.org)