# 4 ways to concatenate strings in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jul 3, 2021. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-string-concat

> A quick guide to learn about 4 different methods to concatenate strings in JavaScript.

String concatenation is a common task in any programming language. There are 4 ways to combine strings in JavaScript. 

In this article, we'll look at all these methods to perform string concatenation in JavaScript.

## `concat()` Method

JavaScript `String` object has a built-in `concat()` method. As the name suggests, this method joins or merges two or more strings.

The `concat()` method doesn't modify the string in place. Instead, it creates and returns a new string containing the text of the joined strings.

```javascript
const name = 'Atta';
const country = '??';

const str = 'My name is '.concat(name, ', and I\'m from ', country);

console.log(str);
// My name is Atta, and I'm from ??
```

If the parameters are not of the type string, they are automatically converted to string values before concatenating.

```javascript
const str = 'The price is $'.concat(45.99);

console.log(str);
// The price is $45.99
```

## The `+` Operator

The same `+` operator that we used to add two numbers can also be used to combine two strings:

```javascript
const name = 'Atta';
const country = '??';

const str = name + ' ' + country;

console.log(str);
// Atta ??
```

The above method creates a brand new string. To mutate the existing string, you could use the shorthand `+=` operator:

```javascript
const name = 'Atta';
const country = '??';

let str = name;
str += ' ';
str += country;

console.log(str);
// Atta ??
```

The assignment operators (`+`, `+=`) [perform faster](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat#performance) on modern JavaScript engines, so there is no need to use the `concat()` method.

However, if you prefer readability over performance, use template literals (explained below).

## Template Literals

[Template literals](https://attacomsian.com/blog/javascript-template-literals) provides a modern way to work with strings in JavaScript. They are primarily string literals with embedded expressions. You can use string interpolation, [multi-line strings](https://attacomsian.com/blog/javascript-multiline-strings), and tagged expressions with them.

```javascript
const name = 'Atta';
const country = '??';

const str = `My name is ${name}, and I'm from ${country}`;

console.log(str);
// My name is Atta, and I'm from ??
```

I personally use template literals in JavaScript (and even in Node.js) to combine strings. Because they're more readable with no awkward backslashes to escape quotes, no empty spaces, and no more plus operators. You write exactly how you want your string to appear.

## `join()` Method

The `join()` method [concatenates all elements in an array](https://attacomsian.com/blog/javascript-convert-array-to-string) and returns a new string:

```javascript
const str = ['Atta', ' ', '??'].join('');

console.log(str);
// Atta ??
```

The first parameter of the `join()` method is the separator. If skipped, a comma (`,`) is used as a default separator:

```javascript
const str = ['Atta', '??'].join();

console.log(str);
// Atta,??
```

You can pass in any separator you want to combine strings:

```javascript
const str = ['Atta', '??'].join(' ');

console.log(str);
// Atta ??
```