Simple explanation needed: Why does a variable reassignment not occur within a function where the variable name is passed as an argument?

Question

I'm working through my course, and keep hitting the same speedbumb. My mental model for why the following behavior is lacking. I'm after as simple an explanation as possible to fill the gap :)

In the following snippet the reassignment doesn't occur for the qux variable when it's name is passed into the function.

let foo = {a: 'hello',b: 'world'};
let qux = 'hello';

function bar(argument1, argument2) {
  argument1.a = 'hi';
  argument2 = 'hi';
}

bar(foo, qux);

console.log(foo.a); // Logs 'hi'
console.log(qux); // Logs 'hello'

But in the below example, when the variable name is explicitly referenced in the function, and the value is passed as an argument, then the reassignment occurs.

let foo = {a: 'hello',b: 'world'};
let qux = 'hello';

function bar(argument1, argument2) {
  argument1.a = 'hi';
  qux = argument2;
}

bar(foo, 'hi');

console.log(foo.a); // Logs 'hi'
console.log(qux); // Logs 'hi'

I understand object values are mutable, and primitive values are not. However, I don't understand why JS is not reassigning the variable in both instances?

I've reviewed this question, the answers to which go into some depth, but I can't seem to see a specific answer for why the reassignment specifically isn't happening.

Answer 1

function bar(argument1, argument2) {
  argument1.a = 'hi';
  argument2 = 'hi';
}

argument1.a = ... mutates whatever object is held by argument1 (whatever was passed as the first argument to bar). The change will be seen by anyone else who holds a reference to the same object.

argument2 = ... assigns a new value to the variable argument2. It does not influence whatever was assigned to the variable before, it simply says "the name argument2 now refers to this ... value". This variable has been declared as a parameter of bar, and thus is scoped to bar, and changes to it will only be seen within bar, because the variable only exists within bar.

let qux = 'hello';

function bar(..., argument2) {
  ...
  qux = argument2;
}

qux = ... assigns a new value to the variable qux. This variable has been declared in the global scope outside the function, so this alters that variable outside the function.

bar(foo, qux);

This calls bar and passes the values that foo and qux refer to as arguments. It does not pass "the variables foo and qux", it passes their values. If the value is mutable and is mutated inside the function (as is the case for foo), you'll see that mutation afterwards if you look at foo. If the value is not mutable (as is the case for qux), then there's nothing the function can do to that value that would be visible afterwards.

Again, do not confuse this with overwriting qux with a new value in your second case.

Answer 2

the big difference here is that you pass a reference to an object with foo, while you pass a value with qux

changing an argument that recieves a primitive value acts as a new variable in the function scope, while a passed reference 'points' to the original object

more -> https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0