JavaScript Strings
JavaScript String Immutability
Strings cannot be changed; every method returns a new one.
This is the single rule behind the most common string mistake.
Calling a method and ignoring the result does nothing at all.
Example
Example
javascript
let text = "hello";
text.toUpperCase();
console.log(text);The output is hello: the result was thrown away.
What Immutable Means
The characters of a string can never be modified.
Every method returns a brand new string.
To keep the result, assign it or use it straight away.
Syntax
Syntax
javascript
text = text.toUpperCase();Reassigning the variable is how the change sticks.
Assigning to a Position Fails
It does not throw, which makes it easy to miss.
Example
Example
javascript
const text = "hello";
text[0] = "H";
console.log(text);In strict mode this would throw; normally it is silently ignored.
Keeping the Result
Assign it back, or store it in a new variable.
Example
Example
javascript
let text = "hello";
text = text.toUpperCase();
console.log(text);The output is HELLO.
Chaining Works Because of This
Each method hands a new string to the next.
That is exactly why chaining reads so well.
Example
Example
javascript
const messy = " Ada Lovelace ";
console.log(messy.trim().toLowerCase().replace(" ", "-"));Four strings existed along the way, and the original is untouched.
Changing One Character
Rebuild the string around the position you want to change.
Example
Example
javascript
const text = "hello";
const changed = "H" + text.slice(1);
console.log(changed);Splitting into an array is another way to do it.
Building Strings Efficiently
Joining in a loop creates a new string every time.
Collecting into an array and joining once is faster for large amounts.
Example
Example
javascript
const parts = [];
for (let i = 1; i <= 3; i++) {
parts.push("item" + i);
}
console.log(parts.join(", "));For a handful of pieces either approach is fine.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String Immutability</title>
</head>
<body>
<h1>String Immutability</h1>
<p id="out"></p>
<script>
let text = "hello";
text.toUpperCase();
const ignored = text;
text = text.toUpperCase();
document.getElementById("out").innerHTML =
"Result ignored: " + ignored +
"<br>Result assigned: " + text +
"<br>Chained: " + " Ada Lovelace ".trim().replace(" ", "-");
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try removing the assignment:
Delete text = and watch the change disappear.
Important Points
- Strings cannot be changed in place.
- Every string method returns a new string.
- Assigning to a character position does nothing.
- Keep the result by assigning it.
- Chaining works precisely because each step returns a new string.
Conclusion
Immutability is why ignoring a method's result is the classic string bug.
Once you expect a new string back, everything else follows.
It is also what makes method chaining safe and predictable.