At what point is a Javascript string immutable?

Something being immutable does not affect how you alter it in your editor-- it is immutable meaning that it cannot be changed in the execution of the code. And by this, we mean only that by changing its value, we are effectively creating a new thing. This differs from objects and arrays, which can have their value changed while remaining the same object. For example:

const object1 = { hello: 'world' };
const object2 = object1;

console.log('object1->', object1);
console.log('object2 ->', object2);

console.log('object1 === object2 ->', object1 === object2); // will be true
console.log('mutating object1...');
object1.hello = 'Shachar';

console.log('object1 has changed ->', object1);
console.log('object2 has changed->', object2);

console.log('object1 === object2 ->', object1 === object2); // they both still reference the same object

Both object1 and object2 are pointing to a reference of the same object. This object can be mutated by changing the property of object1's reference and object2 will reflect this mutation; because, again, they are both referencing the same object.

The same is not true of strings. For this reason a string cannot be changed in place with any methods. You can append a value with operations or string methods, but in doing so you are creating new objects, so you will need to reassign it to the variable, losing the reference to the original string:

let string1 = 'hello';
let string2 = string1;

console.log('string1 ->', string1);
console.log('string2 ->', string2);

console.log('string1 === string2 ->', string1 === string2); // true

string1.concat(' world!');
console.log('string1 ->', string1); // still just 'hello', because `concat` doesn't (and cannot) mutate the original string

string1 = string1.concat(' world!'); // change by reassignment
console.log('string1 ->', string1); // *now* it reflects the change

// but now string 1 and string 2 are different
console.log('string1 ->', string1);
console.log('string2 ->', string2);

// and not equal
console.log('string1 === string2 ->', string1 === string2);

// also, since they are immutable, strings are just compared by *value*, so we can do this

console.log('"hello" === string2 ->', "hello" === string2); //true

It can be a bit tricky at first to understand how all of this works. A few key points to remember:

1. Immutability doesn't refer to how they are handled in the editor; it refers to how they are handled in the JS execution environments
2. Objects and Arrays are passed by reference and are compared by reference, and can be mutated while keeping the original reference
3. Other types are scalar and immutable. They are compared by value, not reference. They cannot have their value changed-- one can only create new instances (although a variable can be made to point to any number of new instances if it is a let or var).

I hope this provides some clarity.