TheLazy.Dev
Portfolio GitHub

Blog

javascript |react |developer |html

Here is how I change the value of const keyword in Javascript

shearytan

Sheary Tan

Posted on February 27, 2019

Here is how I change the value of const keyword in Javascript

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.

const val = 10; // 10
val = 15; // Uncaught TypeError: Assignment to constant variable
Enter fullscreen mode Exit fullscreen mode

As expected, we are unable to reassign val to another number. How about string?

const str = 'I am a String'; // 'I am a String'
str = 'I am a Cheese Stringers now'; // Uncaught TypeError: Assignment to constant variable
Enter fullscreen mode Exit fullscreen mode

Still no. How about the array and object?

// Array
const arrVariable = [10, 11, 12, 13]; // [10, 11, 12, 13]
arrVariable = [14, 15, 16]; // Uncaught TypeError: Assignment to constant variable
Enter fullscreen mode Exit fullscreen mode 
// 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
Enter fullscreen mode Exit fullscreen mode

Javascript: Nope nope nope you can't do that nope...
But what if we do this:

const arrVariable = [10, 11, 12, 13]; // [10, 11, 12, 13]
arrVariable.push(14); // [10, 11, 12, 13, 14]
Enter fullscreen mode Exit fullscreen mode

What?! Let's continue and play around a bit...

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]
Enter fullscreen mode Exit fullscreen mode

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:

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: 'šŸ”'}
Enter fullscreen mode Exit fullscreen mode

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

Lastly,

arrVariable = 'I am an šŸ„‘'; // Uncaught TypeError: Assignment to constant variable 

šŸ˜‘šŸ˜‘šŸ˜‘šŸ˜‘šŸ˜‘
Enter fullscreen mode Exit fullscreen mode

Still nope, anyway...

šŸ’– šŸ’Ŗ šŸ™… šŸš©
shearytan
Sheary Tan

Posted on February 27, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Here is how I change the value of const keyword in Javascript
javascript Here is how I change the value of const keyword in Javascript

February 27, 2019