Skip to content
Latest: Publish JavaScript Packages to NPM Like a Pro!

concat() JavaScript String Method – How to Merge Strings

Whenever you use concat() on a string, the method does the following:

  1. It concatenates (merges) its calling string with its arguments.
  2. It creates a new string with the merged values.

concat() accepts one or more arguments. Here is the syntax:

callingString.concat(item1, item2, ..., itemX)

The item arguments are the values you wish to concatenate with the callingString.

Below are examples of the concat() method.

// Define two strings:
const string1 = "Code";
const string2 = "Sweetly";
// Merge string1 with string2:
const newString = string1.concat(string2);
// Log the newString to the console:
console.log(newString);
// The invocation above will return: "CodeSweetly"

Try Editing It

The snippet above used concat() to concatenate (merge) string1 with string2.

How to merge a string with three other strings

Section titled “How to merge a string with three other strings”
// Define four strings:
const string1 = "Code";
const string2 = "Sweetly";
const string3 = ".";
const string4 = "com";
// Merge string1 with string2, string3, and string4:
const newString = string1.concat(string2, string3, string4);
// Log the newString to the console:
console.log(newString);
// The invocation above will return: "CodeSweetly.com"

Try Editing It

The snippet above used concat() to concatenate four strings.

How to merge a string with JavaScript data types

Section titled “How to merge a string with JavaScript data types”
"".concat(53); // "53"
"".concat("Brown"); // "Brown"
"".concat(true); // "true"
"".concat(undefined); // "undefined"
"".concat(null); // "null"
"".concat({}); // "[object Object]"
"".concat([]); // ""

Try Editing It

// Define a string:
const string1 = "October ";
// Merge string1 with a number:
const newString = string1.concat(26);
// Log the newString to the console:
console.log(newString);
// The invocation above will return: "October 26"

Try Editing It

The snippet above used concat() to merge string1 with a number.

// Define a string:
const string1 = "October ";
// Merge string1 with three numbers:
const newString = string1.concat(2, 0, 93);
// Log the newString to the console:
console.log(newString);
// The invocation above will return: "October 2093"

Try Editing It

The snippet above used concat() to merge string1 with three numbers.

concat() vs. Addition Operator vs. Template Literal

Section titled “concat() vs. Addition Operator vs. Template Literal”

The concat() method, addition operator (+), and template literal concatenate strings in very similar ways, but they are not equivalent.

For instance, consider this snippet:

"".concat(53); // "53"
`53`; // "53"
"" + 53; // "53"

Try Editing It

The three lines of code above appear to do the same thing, but here’s the difference:

  • concat() and the template literal coerced 53 directly to a string.
  • The addition operator (+) first coerced 53 to its primitive data type (Number in this case).
  • concat() and the template literal call the toString() method in priority.
  • The addition operator (+) calls the valueOf() method in priority.

Therefore, suppose you use the addition operator with objects whose valueOf() throws an Error. In that case, the browser will throw a TypeError. See this MDN description for a typical example.