Here is how I change the value of const keyword in Javascript
Tags: javascript, react, developer, html
Published: 2019-02-27 04:21:25

---
title: Here is how I change the value of const keyword in Javascript
published: true
description: A trick about const in Javascript
tags: javascript, reactjs, developer, html
---

Every Javascript developer knows that **var** and **let** is reassignable but **const** cannot be reassigned or redeclared again.

But there is a little secret about **const**, let's look at some code.

```javascript
const val = 10; // 10
val = 15; // Uncaught TypeError: Assignment to constant variable
```
As expected, we are unable to reassign _val_ to another number. How about string?

```javascript
const str = 'I am a String'; // 'I am a String'
str = 'I am a Cheese Stringers now'; // Uncaught TypeError: Assignment to constant variable
```

Still no. How about the array and object?

```javascript
// Array
const arrVariable = [10, 11, 12, 13]; // [10, 11, 12, 13]
arrVariable = [14, 15, 16]; // Uncaught TypeError: Assignment to constant variable
```
```javascript
// Obj
const objVariable = {1: 10, 2: 20, 3: 30, 4: 40}; // {1: 10, 2: 20, 3: 30, 4: 40}
objVariable = {5: 50, 6: 60}; // Uncaught TypeError: Assignment to constant variable
```
Javascript: Nope nope nope you can't do that nope...
But what if we do this:

```javascript
const arrVariable = [10, 11, 12, 13]; // [10, 11, 12, 13]
arrVariable.push(14); // [10, 11, 12, 13, 14]
```
What?! Let's continue and play around a bit...

```javascript
arrVariable[0] = 'Eat'; // ['Eat', 11, 12, 13, 14]
arrVariable[1] = '🥑'; // ['Eat', '🥑', 12, 13, 14]
arrVariable[2] = {1: 'Avocado'}; // ['Eat', '🥑', {1: 'Avocado'}, 13, 14]
arrVariable[3] = true; // ['Eat', '🥑', {1: 'Avocado'}, true, 14]

```

OMG what just happened? 


From MDN Web Docs, it describes: 
> The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the **variable identifier cannot be reassigned**. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered.

Who is the variable identifier/constant here? *arrVariable*, not the array itself.

MDN said variable identifier/constant cannot be reassigned, which means *arrVariable* **cannot be reassigned**. But what about the array? It doesn't have any effect, of course, it is still mutable.

**const** tells the reader that your variable cannot be reassigned, which is why it is highly recommended to use. It prevents us to create some unnecessary bugs and improve code readability.

Similar to object:


```javascript
const objVariable = {1: 10, 2: 20, 3: 30, 4: 40}; // {1: 10, 2: 20, 3: 30, 4: 40}
objVariable[1] =  '🍕'; // {1: '🍕', 2: 20, 3: 30, 4: 40}
objVariable[2] = ['Pizza', 'is', 'life']; // {1: '🍕', 2: ['Pizza', 'is', 'life'], 3: 30, 4: 40}
objVariable[3] = true; // {1: '🍕', 2: ['Pizza', 'is', 'life'], 3: true, 4: 40}
objVariable[5] = {1: '🍺', 2: '🍔'} // {1: '🍕', 2: ['Pizza', 'is', 'life'], 3: true, 4: 40, 5: {1: '🍺', 2: '🍔'}

```


So next time if someone asks you about our friend **const**, you know what to say.

Lastly, 

```javascript
arrVariable = 'I am an 🥑'; // Uncaught TypeError: Assignment to constant variable 

😑😑😑😑😑
```
Still nope, anyway...