Introduction

In JavaScript, the + operator can join strings, but it also performs numeric addition and type coercion. That makes it convenient for simple cases and error-prone in larger expressions, so it is worth understanding both what it does well and where other string-building tools are clearer.

How + Concatenation Works

When at least one operand is a string, JavaScript converts the other operand to a string and joins the two values.

1const firstName = "Ada";
2const lastName = "Lovelace";
3
4const fullName = firstName + " " + lastName;
5console.log(fullName); // Ada Lovelace

This is the most direct use case. You have two or three values, you want one final string, and the expression is easy to read.

The same rule applies to numbers:

1const orderId = 42;
2const label = "Order #" + orderId;
3
4console.log(label); // Order #42

JavaScript converts 42 to "42" because the expression already contains a string.

Why Type Coercion Can Surprise You

The catch is that + is overloaded. With numbers, it adds. With strings, it concatenates. In mixed expressions, evaluation order matters.

console.log(1 + 2 + "3"); // 33
console.log("1" + 2 + 3); // 123

In the first line, 1 + 2 is computed first as numeric addition, giving 3, then "3" is appended. In the second line, the first operand is already a string, so the rest of the expression becomes concatenation.

This is why + is fine for clear string expressions but dangerous when arithmetic and formatting are mixed together casually.

When + Is Fine

Use + when:

• the expression is short
• all values are already strings or obvious primitives
• readability is still high

const warning = "File " + fileName + " was not found.";

That is completely reasonable. The trouble begins when the number of pieces grows or when conditions and formatting rules make the expression hard to scan.

When to Prefer Template Literals

For most modern JavaScript, template literals are clearer than repeated + concatenation.

1const fileName = "report.csv";
2const warning = `File ${fileName} was not found.`;
3
4console.log(warning);

Template literals are easier to read because the final string shape is visible directly. They also reduce bugs caused by missing spaces, operator precedence, or accidental coercion.

For multiline output, they are much cleaner:

1const user = "Ada";
2const report = `User: ${user}
3Status: active
4Role: admin`;
5
6console.log(report);

That is much more maintainable than a long chain of "..." + "\n" + "...".

Building Many Strings Efficiently

If you are joining many items, Array.prototype.join() is often a better mental model than repeated concatenation in a loop.

1const parts = ["alpha", "beta", "gamma"];
2const result = parts.join(", ");
3
4console.log(result); // alpha, beta, gamma

This is especially useful when the content already exists as a collection. It expresses intent better than incremental result += value logic scattered through a loop body.

There is also a maintainability benefit. When separators become conditional, join() lets you build the list of meaningful parts first and format it afterward. That is often easier to test than a loop that mutates one growing string across several branches.

Common Pitfalls

• Mixing numbers and strings in one + expression and expecting purely numeric addition.
• Building long, unreadable concatenation chains when template literals would show the final string more clearly.
• Forgetting spaces or separators between concatenated values.
• Using repeated concatenation in collection-building code where join() would express the intent better.
• Assuming + is harmless type conversion even in expressions where coercion changes the result unexpectedly.

Summary

• In JavaScript, + concatenates when at least one operand is a string.
• The same operator also does numeric addition, so mixed expressions can surprise you.
• Short concatenations with + are fine when they stay obvious.
• Template literals are usually clearer for dynamic or multiline strings.
• 'join() is often the right choice when combining many string parts from an array.'