Ways To Easily Concatenate Strings In JavaScript

Concatenation is a process of linking things together. In JavaScript, there are 3 ways you can concatenate strings together to form an output. Here's how they all work.

Using the + Operator to concatenate strings

The + operator lets you add two numbers together, and also allows you to concatenate two strings. Here's how it works:

const a = 'Hello';
const b = 'World';

const word = a + ' ' + b;

console.log(word);

Here's another example of using the + operator to concatenate strings in JavaScript.

const word = 'Hello' + ' ' + 'World';

console.log(word);

Another method of concatenating strings using + is to use it in conjunction with = assignment operator. What this does is adds the variable and then sets it as the new value.

Here is an example:

let word = 'Hello';
word += ' ';
word += 'World!';

console.log(word);
//will output 'Hello World!'

What's happening in the above code example is that the original variable is set to Hello . Space is then added through + and the variable word is reassigned with the value Hello .

The same process is repeated with World! , to come to the final result of Hello World!

Using .join() to concatenate strings

join() can be used on an array to produce a new string based on each element inside. Here is an example of the syntax:

const words = ['how', 'now', 'brown', 'cow'];

const sentence = words.join(' ');

console.log(sentence);

The console.log() will produce the following sentence: how now brown cow.

Notice that join() takes in a parameter. This parameter determines what the 'joining' string will be. In the above example, a space is indicated. If nothing is passed in, a comma will be printed as the default instead.

Here's an example:

const words = ['how', 'now', 'brown', 'cow'];

const sentence = words.join();

console.log(sentence);

//will print how,now,brown,cow

To get rid of the default comma when using join(), simply pass in the parameter that you want as its replacement instead.

But where in the real world would you use join()? Imagine you had a piece of data that contained a customer's first name and last name. You wanted your JavaScript program to print both. You have both details and mapped it to an array. Using join() is an easy method to achieve this.

This is just one example. Anything piece of data that you want to string up in order can use join() to effectively and efficiently concatenate variables together.

Using .concat() to concatenate strings

So far, the process of concatenating strings we've seen can involve the direct replacement of something that's already existing. For example, using + and += has the potential to reassign the original variable with a new value. The same can be said for join().

The issue with this is that it makes our variables mutable, therefore not protecting it against change. Mutability has its own issues. concat() is great because after it concatenates the string, it returns a new string. This means that the new value can be set against const and therefore make it immutable.

concat() also works well when you have values that are set against const, meaning that you can't modify the variable at all.

Here is an example of using concat():

const firstName = 'Aphinya';
const lastName = 'Dechalert';

const fullName = firstName.concat(' ', lastName);

console.log(fullName);
console.log(lastName.concat(' ', firstName));

You can keep adding as many things you want to concatenate using concat(), there is no limit to it.

Here is an example:

const letter = 'a';

console.log(letter.concat('b','c','d','e','f'));

//this will log out abcdef

It is also good to note that concat() will convert non string typed parameters into strings, regardless of what the original is. For example, .concat({}) will return [object Object] as the string. Here's a list of sample returns based on non-string typed parameters:

"".concat({})    // [object Object]
"".concat([])    // ""
"".concat(null)  // "null"
"".concat(false) // "false"
"".concat(8, 2)  // "82"

And that is basically the different ways you can concatenate strings in JavaScript. Thank you for reading and I hope you've found this piece as a helpful reference.