In JavaScript ES6, the const keyword can unexpectedly be altered even though it is intended to be constant

Question

In JavaScript ES6, the const keyword can unexpectedly be altered even though it is intended to be constant

While experimenting with ES6, I came across an interesting feature - const values cannot be changed or reassigned. However, I noticed that in certain scenarios, it seems like we can change them. Can someone explain this?

{
   const name = 'unchangable';
   sayName = (name) => {
     console.log(name);
   }

}

sayName('changed');

javascript

Answer 1

Answer №1

When it comes to changing values in functions, remember that you are actually printing the value that is passed to the function and not the constant name itself.

Here's an example to illustrate this point:

const name = 'unchangable';
sayName = (newName) => {
     name = newName; // This will result in an error
}

sayName('New Name')

Your code should be like the following:

const name = 'unchangable';
sayName = (someName) => { 
     // There is no relationship between `someName` and the const `name`
     console.log(someName); 
}

sayName('New Name');

Answer 2

When it comes to changing values in functions, remember that you are actually printing the value that is passed to the function and not the constant name itself.

Here's an example to illustrate this point:

const name = 'unchangable';
sayName = (newName) => {
     name = newName; // This will result in an error
}

sayName('New Name')

Your code should be like the following:

const name = 'unchangable';
sayName = (someName) => { 
     // There is no relationship between `someName` and the const `name`
     console.log(someName); 
}

sayName('New Name');

Answer 3

Answer №2

It's essential to grasp the concept of scope and closures in JavaScript.

Each time you define a function, you are essentially establishing a new level of scope. Anything defined within that function is accessible by that function as well as any other functions nested inside it. For instance:

function sayFirstName(firstName) {
   //This function can access firstName
   function sayFullName(fullName) {
       //This function can access firstName and fullName
       console.log(firstName, fullName);
   }
}

Whenever the JavaScript engine encounters an RHS operand (a value on the right side of =) that appears to be a variable name, it will search for that variable locally in the scope. If not found, it will traverse up through all enclosing scopes.

Using the previous example, if fullName isn't found within sayFullName, the JS engine will look through variables declared in the scope of sayFirstName. If still not found, it will then search the global scope, which in the browser is the window object. Failure to find the variable anywhere will result in an Error being thrown.

Now let's consider a scenario where you declare a const name in the outer scope and proceed to create a new function, sayName. This function has its own separate scope where everything, including function arguments, is distinct.

What happens when you execute this code:

console.log(name);

The JS engine interprets this as an RHS operation, attempting to provide the value of name as the first argument to console.log. It starts searching for name beginning with the local function scope of sayName, where it finds the variable defined in the arguments list. Therefore, it never searches beyond the function scope to locate the const name.

You could simplify the function like so:

sayName = (foo) => {
  console.log(foo);
}

The outcome would remain unchanged.

Answer 4

It's essential to grasp the concept of scope and closures in JavaScript.

Each time you define a function, you are essentially establishing a new level of scope. Anything defined within that function is accessible by that function as well as any other functions nested inside it. For instance:

function sayFirstName(firstName) {
   //This function can access firstName
   function sayFullName(fullName) {
       //This function can access firstName and fullName
       console.log(firstName, fullName);
   }
}

Whenever the JavaScript engine encounters an RHS operand (a value on the right side of =) that appears to be a variable name, it will search for that variable locally in the scope. If not found, it will traverse up through all enclosing scopes.

Using the previous example, if fullName isn't found within sayFullName, the JS engine will look through variables declared in the scope of sayFirstName. If still not found, it will then search the global scope, which in the browser is the window object. Failure to find the variable anywhere will result in an Error being thrown.

Now let's consider a scenario where you declare a const name in the outer scope and proceed to create a new function, sayName. This function has its own separate scope where everything, including function arguments, is distinct.

What happens when you execute this code:

console.log(name);

The JS engine interprets this as an RHS operation, attempting to provide the value of name as the first argument to console.log. It starts searching for name beginning with the local function scope of sayName, where it finds the variable defined in the arguments list. Therefore, it never searches beyond the function scope to locate the const name.

You could simplify the function like so:

sayName = (foo) => {
  console.log(foo);
}

The outcome would remain unchanged.

Answer 5

Answer №3

Const behaves unexpectedly in two scenarios.

An object literal specified as const.
A const reference pointing to an object.

Answer 6

Const behaves unexpectedly in two scenarios.

An object literal specified as const.
A const reference pointing to an object.

Answer 7

Answer №4

The issue lies in the fact that a new local variable is being created within your function.

If you were to write out the shorthand function in full, it would look like this:

   sayName = function(name) {
       console.log(name)
   }

In this case, the variable 'name' is only accessible within the function and not from outside of it. To correct this, try running your code with the following adjustments:

{
   const name = 'unchangable';
   sayName = (nameInput) => {
     name = nameInput;
     console.log(name);
   }
}
sayName('changed');

This will attempt to update the value of the constant 'name' with the new string input and then display it on the console.

Answer 8

The issue lies in the fact that a new local variable is being created within your function.

If you were to write out the shorthand function in full, it would look like this:

   sayName = function(name) {
       console.log(name)
   }

In this case, the variable 'name' is only accessible within the function and not from outside of it. To correct this, try running your code with the following adjustments:

{
   const name = 'unchangable';
   sayName = (nameInput) => {
     name = nameInput;
     console.log(name);
   }
}
sayName('changed');

This will attempt to update the value of the constant 'name' with the new string input and then display it on the console.

In JavaScript ES6, the const keyword can unexpectedly be altered even though it is intended to be constant

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error encountered in React: When a parent component tries to pass data to a child

How to generate PDF downloads with PHP using FPDF

Real-Time Chat Update Script

The Express GET route does not support parameters or additional paths

Can you point me to the location where the 'req' parameter is specified?

IE8 does not properly execute AJAX call to PHP file

struggling to incorporate API Json response data into my HTML file using AngularJS

Is there a way to restrict the number of times I can utilize slideToggle function?

Get a collection of images packed into a single zip file

How to create dynamic options in a select dropdown based on the selection of another dropdown using HTML, JavaScript, or PHP

Issues with HTML formatting after using JQuery .load()

What sets TypeScript apart from AtScript?

Attempt to resend email if unsuccessful

The Controller is failing to pass JSON Data to the AJAX Call

Adjusting the X-axis in Highstock: Tips and Tricks

The .remove() method is ineffective when used within an Ajax success function

Is there a way to modify the style value within AngularJS?

Tips for transforming intricate JavaScript arrays into a unified array and iterating through to create a table

Modify the find function within LoopBack

Issue: Retrieve comments via AJAX (from database) in Laravel 5.2