DEV Community

Sheary Tan
Sheary Tan

Posted on

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...

Top comments (1)

Collapse
 
mahrukhsa2 profile image
mahrukhsa2

Good one. enjoyed it