Skip to main content

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.
note
  • concat() does not alter the original string.
  • A calling string is a string on which you used concat(). So, in string1.concat(string2), string1 is the calling array.
  • concat() is sometimes written as String.prototype.concat() because it is a method of the String object's prototype property.

Syntax of the concat() Method​

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.

Examples​

Below are examples of the concat() method.

How to merge a string with another string​

// 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​

// 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​

"".concat(53); // "53"
"".concat("Brown"); // "Brown"
"".concat(true); // "true"
"".concat(undefined); // "undefined"
"".concat(null); // "null"
"".concat({}); // "[object Object]"
"".concat([]); // ""

Try Editing It

How to merge a string with a number​

// 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.

Buy CSS Grid book

How to merge a string with three numbers​

// 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​

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.

Overview​

concat() creates a new string by concatenating its calling string and its arguments.