<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
<title>Coder Legion - Recent posts tagged concentration</title>
<link>https://coderlegion.com/tag/concentration</link>
<description>Powered by Question2Answer</description>
<item>
<title>Concatenar javascript</title>
<link>https://coderlegion.com/17392/concatenar-javascript</link>
<description>&lt;p&gt;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.&lt;/p&gt;
&lt;div id=&quot;toc-div&quot;&gt;
&lt;h4&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;&lt;strong&gt;Table of contents: - &lt;/strong&gt;&lt;a id=&quot;toc-toogle&quot; class=&quot;open&quot;&gt;&lt;/a&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;div id=&quot;toc-list&quot;&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#what&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;What is concatenation in JavaScript?&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#string&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;Concatenation in strings&lt;/span&gt;&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#sol1&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;Using + operator&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#sol2&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;Using join() method&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#sol3&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;Using concat() method&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#sol4&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;Template literals&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;&lt;/li&gt;


&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#array&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;Concatenation in arrays&lt;/span&gt;&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#m1&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;concat() method&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#m2&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;Using spread operator&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#m3&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;Using .push() method&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#con&quot;&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;The Conclusion&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;section&gt;&lt;a id=&quot;what&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;h2&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;&lt;strong&gt;What is concatenation in JavaScript?&lt;/strong&gt;&lt;/span&gt;&lt;strong&gt; &lt;a id=&quot;TypeError-str-object&quot; style=&quot;color: blue;&quot; rel=&quot;nofollow&quot; href=&quot;#what&quot;&gt;#&lt;/a&gt;&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;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.,  &lt;/span&gt;&lt;/p&gt;&lt;/section&gt;
&lt;section&gt;&lt;a id=&quot;string&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;h2&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;&lt;strong&gt;Concatenation of Strings&lt;/strong&gt;&lt;/span&gt;&lt;strong&gt; &lt;a style=&quot;color: blue;&quot; rel=&quot;nofollow&quot; href=&quot;#string&quot;&gt;#&lt;/a&gt;&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt; 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:&lt;/span&gt;&lt;/p&gt;
&lt;section&gt;&lt;a id=&quot;sol1&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;strong&gt;1.Using + operator&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;The + operator can be used to concatenate two strings. The following is the JS code.&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;
&lt;span style=&quot;font-family:arial,helvetica,sans-serif;&quot;&gt;&lt;strong&gt;let str = 'This is ';
let str2 = str + 'an ' + 'example' + '.'
console.log(str2);
 &lt;/strong&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;The following will be shown in the console:&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;This is an example. &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/section&gt;
&lt;section&gt;&lt;a id=&quot;sol2&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;strong&gt;2.Using .join() method&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;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.&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;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);
 &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;The console displays the following:&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;My favourite fruits are apples, mango, berries &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/section&gt;
&lt;section&gt;&lt;a id=&quot;sol3&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;strong&gt;3.Using concat() method&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;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. &lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;const one = 'apples';
const two = 'mango';
const three = 'berries';

let demo = 'My favourite fruits are '.concat(one, ', ', two, ', ',three);
console.log(demo);
 &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;The console will display:&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt; My favourite fruits are apples, mango, berries&lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;div class=&quot;div-purple&quot;&gt;
&lt;span class=&quot;alert-header&quot;&gt;Note&lt;/span&gt;
&lt;span class=&quot;alert-body&quot;&gt;Since strings are immutable, the concat() does not modifies the strings.&lt;/span&gt;
&lt;/div&gt;

&lt;pre&gt;&lt;code&gt;&lt;strong&gt;let string1 = 'John';
let string2 = string1.concat(' ', 'Thales');

string1; // 'John'. Strings are immutable, so `concat()` does not modify `string1`
string2; // 'John Thales'
 &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;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. &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;However, if it is unavoidable to use concate(), then the best way is to keep an empty string as the string1.&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt; let demo= ''.concat('John', ' ', 'Thales');
console.log(demo);
&lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/section&gt;
&lt;section&gt;&lt;a id=&quot;sol4&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;strong&gt;4.Template literals&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;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. &lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;const username = 'John Thales';
const hobby = 'dog lover';
let demo = `Hi, I'm ${username} and I'm a ${hobby}`;
console.log(demo);
 &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;The console will display:&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;Hi, I'm John Thales and I'm a dog lover &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/section&gt;
&lt;/section&gt;
&lt;section&gt;&lt;a id=&quot;array&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;h2&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;&lt;strong&gt;Concatenation in arrays&lt;/strong&gt;&lt;/span&gt;&lt;strong&gt; &lt;a style=&quot;color: blue;&quot; rel=&quot;nofollow&quot; href=&quot;#array&quot;&gt;#&lt;/a&gt;&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;An array is collection of items of same datatype. Arrays can be concatenated in different ways. These are as follows:&lt;/span&gt;&lt;/p&gt;
&lt;section&gt;&lt;a id=&quot;m1&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;strong&gt;1.Concat() method&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;Using the &lt;strong&gt;arr1.concate(arr2) &lt;/strong&gt; method, we can merge the arrays. 
&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;// 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);
 &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;The console will display:&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;[ 'Apples', 'Banana', 'Jackfruit', 'Brinjal' ]&lt;br&gt;
[ 'Apples', 'Banana', 'Jackfruit', 'Brinjal' ]
 &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/section&gt;
&lt;section&gt;&lt;a id=&quot;m2&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;strong&gt;2.Using spread operator&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;Within the square brackets, write the array items prefixed by (…) separated by commas. JavaScript creates a new array with all the arrays concatenated. &lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;// 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);
 &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;The console will display:&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt; [ 'Apples', 'Banana', 'Jackfruit', 'Brinjal' ]&lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;div class=&quot;div-purple&quot;&gt;
&lt;span class=&quot;alert-header&quot;&gt;Note&lt;/span&gt;
&lt;span class=&quot;alert-body&quot;&gt;Items of the concatenated array are inserted in the similar order as the arrays appear within the literal.&lt;/span&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;section&gt;&lt;a id=&quot;m3&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;strong&gt;3.Using .push() method&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;Suppose you don’t want to create a new array but concatenate the existing ones, then we use the&lt;strong&gt; .push() &lt;/strong&gt;method. This is a mutable approach.&lt;/span&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;strong&gt;const fruits = ['Apples', 'Banana'];
fruits.push('Jackfruit', 'Brinjal');
console.log(fruits);
 &lt;/strong&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/section&gt;
&lt;/section&gt;
&lt;section&gt;&lt;a id=&quot;con&quot; class=&quot;custom_anchor&quot;&gt;&lt;/a&gt;
&lt;h2&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/span&gt;
&lt;a style=&quot;color: blue;&quot; rel=&quot;nofollow&quot; href=&quot;#con&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;There are several techniques to concatenate strings and arrays in JavaScript. For strings, we use the above-mentioned ways.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;To concatenate two or more arrays, you may either use the spread operator&lt;strong&gt; [...arr1, ...arr2] &lt;/strong&gt;or a functional method &lt;strong&gt;[].concat(arr1, arr2)&lt;/strong&gt;. Because the concatenated array is saved in a new array, these methods are immutable.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-family: arial,helvetica,sans-serif;&quot;&gt;Use the&lt;strong&gt; arr1.push(...arr2)&lt;/strong&gt; technique to do a mutable merge that is, merge into an array without creating a new one.&lt;/span&gt;&lt;/p&gt;
&lt;/section&gt;
</description>
<category>Articles</category>
<guid isPermaLink="true">https://coderlegion.com/17392/concatenar-javascript</guid>
<pubDate>Mon, 11 May 2026 07:35:02 +0000</pubDate>
</item>
</channel>
</rss>