How to Concatenate Two Strings in JavaScript

What is string concatenation in JavaScript?

String concatenation means the same thing in all programming languages. It simply adds one or more strings to another string, usually to the end of that string. For example, if you want to concatenate “Hello” and “Joshua”, it becomes “Hello Joshua” by adding Joshua to the end of Hello.

Methods to concatenate strings

Let’s discuss the various ways to combine strings in JS.

Using the “+” operator

In JavaScript, the “+” operator can be used to add strings together. You can add as many strings as you want.

Example:

let greeting = "hello";
let name = "Joshua";
let aboutMe = "programmer";
console.log(greeting + name + "is a" + aboutMe);
Output:
//helloJoshuais aprogrammer

You can see that there is a flaw in the output. There is no space between the variables that were concatenated. This can be corrected by adding a space between each concatenated variable.

         let greeting = "hello";
let name = "Joshua";
let aboutMe = "programmer";
console.log(greeting + " " + name + " " + "is a" + " " + aboutMe);
Output:
// hello Joshua is a programmer
Other examples:
let socialMedia1 = "Facebook"
let socialMedia2 = "Twitter"
let socialMedia3 = "Linkedln"
console.log("As a Programmer, it is good to be available on" + " " +  socialMedia1 + " " +
socialMedia2 + " " + socialMedia3 )

Output:
    // As a Programmer, it is good to be available on Facebook Twitter Linkedln</pre><p>Although the output is now correct (by adding a space (“ “) between each variable that was concatenated), the method used can be laborious when you want to concatenate up to 10 variables that were declared and initialized. This can be addressed with the next method.</p>

Using the template literals (${``})
The template literals is a special character in JavaScript that serves various purposes, such as multiline strings, string concatenation, etc. An ES6 feature, it was introduced in 2015 and is supported in all modern browsers except Internet Explorer. One major feature, “variable substitution”, allows JavaScript string concatenation.
Example:
let greeting = "hello";
let name = "Joshua";
let aboutMe = "programmer";
console.log(`${greeting} ${name} is a ${aboutMe}`);
The example shows that you don’t need to put a space like with the “+” operator. It is a template
 literal, so it takes care of it.
More examples:
let nameOfCompany = "Turing";
let stageOfCompany = "Startup";
console.log(
  `${nameOfCompany} named one of America's Best ${stageOfCompany} Employers for 2022 by 
Forbes`
);
Output:
//Turing named one of America's Best Startup Employers for 2022 by Forbes
The variable substitution method of template literals is one of the best ways to concatenate
strings in JavaScript.
Other examples:
let part1 = "learning";
let part2 = "JavaScript";
let part3 = "missing";
console.log(if you are not ${part1} ${part2}, you are ${part3});
Output:
//if you are not learning JavaScript, you are missing

Using the concat() method
concat() is a built-in method that combines strings in JS. It adds the new string to the old string and returns the overall string.
Example:
const myName = "Joshua";
console.log(myName.concat(" said that he loves programming"));
Output:
// Joshua said that he loves programming
let a = "string1";
console.log(a.concat("string2, string3"));
Output:
string1string2, string3
parameters
a – This is the existing string that you want to combine with other strings.
b – This is the new string that is to be added to a (the old string).
Examples:
let a = "programming";
let b = "excellently well";
console.log(a.concat("help a programmer think", b));

Output:
//programminghelp a programmer thinkexcellently well
In the above example, you can see that the error made in the + operator is also made here. This can be resolved the same way, i.e., by adding a space to separate each concatenation.
let a = "programming";
let b = "excellently well";
console.log(a.concat(" help a programmer think ", b));
Putting a space at the beginning of the concatenation will separate “programming” and “help”. It will also separate “think” and “excellently”.
Note: When using the concat() method, each concatenation is separated by a comma otherwise it will display an error.
let a = "programming";
let b = "excellently well";
console.log(a.concat(" help a programmer think" b));

Output:
// Uncaught SyntaxError: missing ) after argument list
An error is displayed when there is no comma between “programmer” and “b” because what you console.log cannot be evaluated correctly. You need to make sure that it is formatted properly by adding a comma. This tells JavaScript that it is undergoing concatenation, that b is a variable, and that you want to concatenate with the existing string (“programming help a programmer think”).
console.log(a.concat(" help a programmer think", b));

Using array.join() method
This will concatenate all the values in an array and return a new string from an array, which by default is separated by a comma. You can use other string parameters or separators to join the string together.
Example:
const sport = ["Football", "Tennis", "Cricket", "Golf"];
console.log(sport.join());
Output:
//Football,Tennis,Cricket,Golf
In the first example, the default string parameter or separator is a comma but you can use others to separate them, such as space, dash, or asterisk.
Using space
const sport = ["Football", "Tennis", "Cricket", "Golf"];
console.log(sport.join(" "))

Output:
Football Tennis Cricket Golf
Using dash
const sport = ["Football", "Tennis", "Cricket", "Golf"];
console.log(sport.join("-"));

Output:
Football-Tennis-Cricket-Golf
Using asterisk
const sport = ["Football", "Tennis", "Cricket", "Golf"];
console.log(sport.join("*"));

Output:
FootballTennisCricket*Golf

Conclusion
We’ve explored JavaScript concatenation, what it is, and the various methods used to concatenate strings, including the “+” operator, template literals, the concat method, and the array.join method. Use them in your projects whenever you need to update strings in your code.