3

I'm playing around with some ES6 and we know that const values cannot be changed/reasigned. In that case, why is it allowed to change?

{ const name = 'unchangable'; sayName = (name) => { console.log(name); } } sayName('changed');
Improve this question
2
  • 2
    in sayName function name is a local variable, not your const Commented Apr 7, 2017 at 11:27
  • 1
    You're not changing your variable, console.log takes argument of the fat arrow function, name is still unchanged Commented Apr 7, 2017 at 11:28

4 Answers 4

Reset to default
2

It's not changing, you just print the value that you pass to the function NOT the const name.

Example:

{ const name = 'unchangable'; sayName = (newName) => { name = newName; // This will make an error } } sayName('New Name')

Where your code is equal to the code blow 

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You need to understand how scope and closures work in JavaScript.

Every time you create a function you are essentially creating a new level of scope. Everything declared inside that function is accessible by that function and every other function defined within it. For example"

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

Every time the JavaScript engine sees an RHS operand (that is a value in the right side of =) and that variable is not a string, number, function, e.t.c but something that looks like a variable name, the JS engine will search for that variable in the local scope. If not found, it will traverse all scopes built on top of that

In my previous example if fullName was not found inside sayFullName the JS engine would search all variables declared inside sayFirstName 's scope. If not found there it would search the global scope which in the browser, it's the window object. If the variable is not found there either, an Error is thrown.

Now, in your code you define a const name in the outer scope. Then you go ahead and create a new function, sayName. This function has a scope of its own. Everything declared within it, including the arguments is a new thing.

So what happens when you do this:

console.log(name);

The JS engine sees an RHS operation, you are attempting to set the value of console.log's first argument to name. So it searches for name. The first place it's going to look is the local function scope, that of sayName. It's going to find it there because you defined it in the arguments list. So it will never have to search outside of your function, so it will never find the const name.

You might as well write the function like this:

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

The result remains the same.

Improve this answer

Comments

0

There are two cases where const does not work as you think it should.

  • A const object literal.
  • A const reference to an object.
Improve this answer

Comments

0

The problem is that you are creating a new local variable for your function.

The shorthand function you are using would be the following in full length:

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

Name gets created inside the function and not pulled from outside of it. You should run your code with the following:

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

This would try to assign the new string to your constant and log it to the console afterwards.

Improve this answer

Comments