concat() JavaScript String Method – How to Merge Strings
Whenever you use concat() on a string, the method does the following:
- It concatenates (merges) its calling string with its arguments.
- It creates a new string with the merged values.
concat()
does not alter the original string.- A calling string is a string on which you used
concat()
. So, instring1.concat(string2)
,string1
is the calling array. concat()
is sometimes written asString.prototype.concat()
because it is a method of theString
object'sprototype
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"
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"
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([]); // ""
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"
The snippet above used concat()
to merge string1
with a number.
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"
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"
The three lines of code above appear to do the same thing, but here's the difference:
concat()
and the template literal coerced53
directly to a string.- The addition operator (
+
) first coerced53
to its primitive data type (Number in this case). concat()
and the template literal call thetoString()
method in priority.- The addition operator (
+
) calls thevalueOf()
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.