String Concatenation in JavaScript: How to Join Text and Variables

String concatenation means combining two or more strings into one.

Let’s say you want to greet a user by name. You could write:

String concatenation adds pieces together, left to right, building a new string in the process.
(click on the image to open in a new tab)

How to perform string concatenation

The three main ways to implement string concatenation in JavaScript are: the + operator, the += operator, and the .concat() method. These techniques all have value, and their suitability depends on the context.

String Concatenation with the + Operator

This is the most common and straightforward method.

This is string concatenation using the + operator.
(click on the image to open in a new tab)

You can use it to combine string literals, variables, or both, and it always returns a new string, since strings are immutable.

It works left to right, one piece at a time—so spacing and punctuation are something you control.

Using the += Operator (Appending a string)

The += operator is shorthand for “take the existing string and add to it.”

Here the string is constructed bit by bit.
(click on the image to open in a new tab)

This is handy when you’re building a string piece by piece. Think of it like stacking text on top of more text.

It’s very readable in loops or when appending based on conditions.

The .concat() Method

JavaScript also offers the built-in .concat() method:

You can chain multiple arguments in a single line.
(click on the image to open in a new tab)

It works the same as +, but resembles a function call.

.concat() may feel more structured to beginners who are used to calling methods on objects—but under the hood, it works similarly to the + operator.

Note: You can chain multiple variables as arguments.
Here, we chain multiple arguments and variables in a single line.
(click on the image to open in a new tab)

So, Which One Should You Use?

  • Use + when combining a few known parts—it’s fast, familiar, and clear.
  • Use += when you’re building up a string over time, like in a loop or conditionally.
  • Use .concat() if you prefer method syntax or need to pass many parts at once.

They all produce the same result: a brand new string, since JavaScript strings are immutable.

Template Literals

JavaScript also supports template literals, which let you embed variables directly into a string using backticks and ${} syntax:

Template literals produce the same result—but with cleaner code.
(click on the image to open in a new tab)

This produces the exact same result—but with cleaner, more readable code.

Final Thoughts

String concatenation lets you build dynamic text by combining strings and variables. Whether you’re displaying messages, constructing URLs, or building HTML snippets, this is one of the most basic and useful tools in a developer’s toolkit.

Although my blog doesn’t support comments, feel free to reply via email or X.