Why does changing a variable in a function not reflect in the passed variable itself?

Question

let a = 2;

let change = (val) => {
  val = 3;
}

change(a);
console.log(a);

I hoped the value of a was 3, but actually it is 2. Why?

Answer 1

And I return the question, why do you think a should be 3 if at no time you changed your value?

You know What is a variable? Then there is a value stored in it, if you do not change the value of the variable, as this value should change automatically?

It’s good to ask, but you need to start from the right premises.

You have two variables, one is a that has never been changed. And has val that exists within a function that is changed, but soon after its value is dropped. val exists only within the function.

When you call a function and pass a argument is assigning the value of that argument to the variable declared as a parameter. In the function call it would be the same as doing:

val = a;

val receives the value it had in a, but val doesn’t happen to be a. There’s a copy of value.

I’ll ask you another question. Why did you ask:

let change = (val) => {
    val = 3;
}

When I could have:

function change(val) {
    val = 3;
}

Do you know the implications of each one? Do the simple until you need to do the complex.

Answer 2

The reason is described in documentation:

Primitive Parameters (such as a number) are passed to functions by value; the value is passed to the Function, but if the Function changes the value of the Parameter, this change is not reflected globally or in the Calling Function.

In other words, parameters primitive (as a number) are passed to functions by value: this means that the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected outside it.

That means this function:

function change(val) {
    val = 3;
}

changes the value of the parameter val, but this change is not reflected outside the function.

In fact, a function created with the keyword function is not always equivalent to Arrow Function (which is the syntax you used). Of course in many cases "will work" the same way, but there are important differences between these two options. ^{_{I have seen many people using Arrow Function without thinking, thinking it is the only way (or the "modern way") to declare a function, but for cases like yours, there is no gain in using them, and I prefer to create a function even normal.}}

---

And it makes sense that it does. For example, I can call the function this way:

change(10);

I passed the value directly, with no external variable to the function. If the function changes the value that is outside it, when doing val = 3, what exactly would be changed? The 10? Makes no sense.

And if I called it that?

change(outraFuncao() * 10 + 5);

Supposing outraFuncao is a function that returns some value, and I even multiply it by 10 and sum 5, and the result is passed to change. If the function change change the value that is outside of it, which exactly would be changed?

That is, in my humble opinion, it makes no sense that the assignment made within the function reflects outside it.

---

In short, if you do:

function change(val) {
    val = 3;
}

let a = 2;
change(a);

The value of a is copied to the parameter val. Within the function, val has its value changed, but this change does not reflect a (since val is only a copy of the value of a). When the function closes its execution, val is discarded (because it exists only within the function). E a continues with its unchanged value.

---

Finally, it is interesting to know the concepts of passing by value and by reference to better understand what happens. And to delve specifically into Javascript, read here.