Concatenar javascript

Question

Concatenar is a Portuguese word which means concatenate. You would have often come across this term while working with data structures and algorithm. In this article, we will discuss about concatenation in JavaScript.

Table of contents: -

1. What is concatenation in JavaScript?
2. Concatenation in strings
   1. Using + operator
   2. Using join() method
   3. Using concat() method
   4. Template literals
3. Concatenation in arrays
   1. concat() method
   2. Using spread operator
   3. Using .push() method
4. The Conclusion

What is concatenation in JavaScript? #

Concatenation simply means to add one or more entity to an existing entity. In other words, merging two entities is known as concatenation. We can concatenate several datatypes like strings, arrays etc.,

Concatenation of Strings #

A string is a collection of one or more characters which may include alphabets, numbers or symbols like (!, @, #, $). In JS, we can use 4 different ways to concatenate strings. These are as follows:

1.Using + operator

The + operator can be used to concatenate two strings. The following is the JS code.

let str = 'This is ';
let str2 = str + 'an ' + 'example' + '.'
console.log(str2);
 

The following will be shown in the console:

This is an example. 

2.Using .join() method

The join() method enables us to add the elements of an array and returns a string. Since we work with arrays, its easier to add a string.

const array = ['My favourite fruits are'];
const one = 'apples';
const two = 'mango';
const three = 'berries';
const fruits = [one, two, three].join(', ');  // apples, mango, berries

array.push(fruits);  // [ 'My favourite fruits are', 'apples, mango, berries' ]

let demo = array.join(' '); 
console.log(demo);
 

The console displays the following:

My favourite fruits are apples, mango, berries 

3.Using concat() method

JavaScript has a built-in method for concatenating strings. The concat() function usually takes up one or more parameters and then returns a concatenated string.

const one = 'apples';
const two = 'mango';
const three = 'berries';

let demo = 'My favourite fruits are '.concat(one, ', ', two, ', ',three);
console.log(demo);
 

The console will display:

 My favourite fruits are apples, mango, berries

Note Since strings are immutable, the concat() does not modifies the strings.

let string1 = 'John';
let string2 = string1.concat(' ', 'Thales');

string1; // 'John'. Strings are immutable, so `concat()` does not modify `string1`
string2; // 'John Thales'
 

One of the drawbacks of using this method is that it is a necessary condition that string1 should be a string. If it has non-string value then error will be shown. Hence, the concat() method is rarely used.

However, if it is unavoidable to use concate(), then the best way is to keep an empty string as the string1.

 let demo= ''.concat('John', ' ', 'Thales');
console.log(demo);

4.Template literals

You may have heard about the term string interpolation. It is a process in which an expression is added or merged to a string. This is what is done by template literals.

const username = 'John Thales';
const hobby = 'dog lover';
let demo = `Hi, I'm ${username} and I'm a ${hobby}`;
console.log(demo);
 

The console will display:

Hi, I'm John Thales and I'm a dog lover 

Concatenation in arrays #

An array is collection of items of same datatype. Arrays can be concatenated in different ways. These are as follows:

1.Concat() method

Using the arr1.concate(arr2) method, we can merge the arrays.

// concatenate arr1 and arr2
const result = arr1.concat(arr2);
or another form can be 
const result = [].concat(arr1, arr2);
let’s see an example.
const fruits = ['Apples', 'Banana'];
const vegetables = ['Jackfruit', 'Brinjal'];
const result1 = fruits.concat(vegetables);
const result2 = [].concat(fruits, vegetables);
console.log(result1); 
console.log(result2);
 

The console will display:

[ 'Apples', 'Banana', 'Jackfruit', 'Brinjal' ]

[ 'Apples', 'Banana', 'Jackfruit', 'Brinjal' ]
 

2.Using spread operator

Within the square brackets, write the array items prefixed by (…) separated by commas. JavaScript creates a new array with all the arrays concatenated.

// concatenate arr1 and arr2
const result = [...arr1, ...arr2];
let’s see an example.
const fruits = ['Apples', 'Banana'];
const vegetables = ['Jackfruit', 'Brinjal'];
const result = [...fruits, ...vegetables] 
console.log(result);
 

The console will display:

 [ 'Apples', 'Banana', 'Jackfruit', 'Brinjal' ]

Note Items of the concatenated array are inserted in the similar order as the arrays appear within the literal.

3.Using .push() method

Suppose you don’t want to create a new array but concatenate the existing ones, then we use the .push() method. This is a mutable approach.

const fruits = ['Apples', 'Banana'];
fruits.push('Jackfruit', 'Brinjal');
console.log(fruits);
 

Conclusion #

There are several techniques to concatenate strings and arrays in JavaScript. For strings, we use the above-mentioned ways.

To concatenate two or more arrays, you may either use the spread operator [...arr1, ...arr2] or a functional method [].concat(arr1, arr2). Because the concatenated array is saved in a new array, these methods are immutable.

Use the arr1.push(...arr2) technique to do a mutable merge that is, merge into an array without creating a new one.