String Concatenation in JavaScript Explained with Examples

String Concatenation is the process in which two or more Strings are joined to make a Single String. Different programming languages have different implementations for String Concatenation.
In this post we are going to see How to Implement String Concatenation in JavaScript using different methods like

• String Concatenation in JavaScript with + operator
• String Concatenation in JavaScript using for loop
• String Concatenation in JavaScript with Variables

We are going to see String Concatenation in JavaScript with different examples for better understanding.

String Concatenation in JavaScript with + operator

In JavaScript easiest way to concatenate 2 strings is by using '+' Operator. This is the most used traditional method to concatenate 2 strings.

For Example

var str1 = "JavaScript";
var str2 = "foo";
var str3 = str1+str2;
console.log(str3); 

Output in Console :

"JavaScriptfoo"

Another way to append 2 String in Javascript using + operator is like below

var str1 = "JavaScript";
str1 += "Foo"
console.log(str1); 

Output in Console :

"JavaScriptFoo"

String Concatenation in Javascript using for loop

String Concatenation in JS can be achieved using loop controls.

When do we need to use loop to concatenate strings?
There could be many reasons based on our requirements to use the loops to concatenate different strings. So, one basic and frequently used reason for it is, suppose we have an array of strings and want to concatenate them to form a final Single String. As we don't know the length of the string array, we cannot use the + operator directly on array of strings and readability of the code decrease. The Simplest and Easiest way is to use 'for' loop on the array of strings and concatenate them using + operator. let us look at a simple example to concatenate a String Array in javascript .

var arr = ["Java","Script","Foo"];
var finalString = ""; 
for(var x=0; x<arr.length; x++)
{
    finalString += arr[x];
}
console.log(finalString) ;

Output in Console :

"JavaScriptFoo"

String Concatenation in JavaScript with Variables

Well, Concatenating 2 or more variables is same as "String Concatenation in JavaScript with + operator",  which we discussed already. Then why we need to understand it separately? There is a reason for it. Using + operator between two strings simply results a single final string. But what If we do operation on JavaScript variables?
As we all know Javascript variables can hold any type of data like String, Numbers, Boolean etc,we cannot easily determine which type of data a particular variable holding unless we do some checks on it like isNAN etc..
So If we do + operator on 2 different type of variables, actual results would be different than expected results

For Example

If one variable contains String and another Number, then output is String

var str1 = "JavaScript"; 
var str2 = 2;
var str3 = str1+str2;
console.log(str3); 

Output in Console :

"JavaScript2"

If both variables are Numbers, then output is a Number

var str1 = 3; 
var str2 = 2;
var str3 = str1+str2;
console.log(str3); 

Output in Console :

"5"

If both variables are Numbers, but used double-quote while assigning numbers, then output is a String

var str1 = "3"; 
var str2 = "2";
var str3 = str1+str2;
console.log(str3); 

Output in Console :

"32"

So, whenever we do String Concatenation with JavaScript variables, we should be careful about their data types. Otherwise we may get unexpected results.

Find More Details about String Concatenation In JavaScript here http://javascriptfoo.blogspot.in/search/label/Concatenation