Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Are both addition and concatenation same in JavaScript?
We can't say whether both are the same or both are different. In some cases, addition and concatenation will have the same result, but in some cases, they will be different. It is completely based on the type of variables. We will see it in detail below
We use the + operator for addition and the concat() method for concatenation in JavaScript. In some cases, both the + operator and the concat() method returns the same result. Adding and concatenating two strings using the + operator and the concat() method returns the same result.
We can also apply the same + operator for both addition and concatenation, but these two operations are not the same. When one operand is a string the + operator performs as a concatenation operation. If both operands are numbers, it performs the simple addition.
Let’s understand in detail if addition and concatenation are the same in JavaScript using different program examples.
Addition and concatenation of two strings
Let's consider two variables as a string.
Example : Using Addition (+)
<!DOCTYPE html>
<html>
<body>
<h2>Adding two strings</h2>
<p id="demo"></p>
<script>
let x = "Hello";
let y = "World!";
let z = x + y;
document.getElementById("demo").innerHTML = z;
document.write(typeof(z));
</script>
</body>
</html>
We can observe here, if we add two strings using addition, the output will be a string.
Example : Using Concatenation (concat)
<!DOCTYPE html>
<html>
<body>
<p>Concatenating two strings</p>
<p id="demo"></p>
<script>
let x = "Hello";
let y = "World!";
let z = x.concat(y);
document.getElementById("demo").innerHTML = z;
document.write(typeof(z));
</script>
</body>
</html>
You notice that the addition and concatenation of two strings are the same.
Addition and concatenation of two arrays
Let's consider two variables as arrays.
Example : Using Addition(+)
<!DOCTYPE html>
<html>
<body>
<p>Adding two arrays</p>
<p id="demo"></p>
<script>
let arr1 = [1,2,3,4];
let arr2 = [5,6,7,8];
let res = arr1 + arr2;
document.getElementById("demo").innerHTML = res;
document.write(typeof(res));
</script>
</body>
</html>
Here we can check is, when we add two arrays, the second array first element combined with first array last element. Addition (+), will not add comma (,) automatically. If you need to separate those elements, we need to add an empty element as the first element in the second array. Like,
Example
<!DOCTYPE html>
<html>
<body>
<p>Adding two arrays</p>
<p id="demo"></p>
<script>
let arr1 = [1,2,3,4];
let arr2 = [,5,6,7,8];
let res = arr1 + arr2;
document.getElementById("demo").innerHTML = res;
document.write(typeof(res));
</script>
</body>
</html>
If we add two arrays using addition, output will be string.
Example : Using concat() to add to arrays
We will check here for concatenate variables as arrays.
<!DOCTYPE html>
<html>
<body>
<p>Concatenate two arrays</p>
<p id="demo"></p>
<script>
let arr1 = [1,2,3,4];
let arr2 = [5,6,7,8];
let res = arr1.concat(arr2);
document.getElementById("demo").innerHTML = res;
document.write(typeof(res));
</script>
</body>
</html>
Here, no need to give an empty element in the second array in the first place. If we concat two arrays, the output will be an object.
Addition and Concatenation of two Numbers
Let's consider two variables as a number.
Example : Using Addition (+)
<!DOCTYPE html>
<html>
<body>
<p>Adding two numbers</p>
<p id="demo"></p>
<script>
let x = 102;
let y = 199;
let z = x + y;
document.getElementById("demo").innerHTML = z;
document.write(typeof(z));
</script>
</body>
</html>
What we can observe here is, If we add two numbers using addition (+) output will be a number.
Example : Using Concatenation (concat)
<!DOCTYPE html>
<html>
<body>
<p>Concating two numbers</p>
<p id="demo"></p>
<script>
let x = 102;
let y = 199;
try{
let z = x.concat(y);
document.getElementById("demo").innerHTML = z;
} catch(e) {
document.getElementById("demo").innerHTML = e;
}
</script>
</body>
</html>
It will throw an error. If we concat two numbers, output is an error.
Addition and Concatenation of booleans
Let's consider two variables as booleans.
Example : Using Addition (+)
<!DOCTYPE html>
<html>
<body>
<p>Adding two booleans</p>
<p id="demo"></p>
<script>
let addTrue = true;
let addFalse = false;
let res = addTrue + addFalse;
document.getElementById("demo").innerHTML = res;
document.write(typeof(res));
</script>
</body>
</html>
Here, true is counted as 1 and false is 0. Just, it will be mathematical operations i.e. addition.
If we have two variables as true, then output is 2. If two variables are false, then output is 0.
Example : Using concatenation (concat)
<!DOCTYPE html>
<html>
<body>
<p>Concating two booleans</p>
<p id="demo"></p>
<script>
try{
let concatTrue = true;
let concatFalse = false;
let res = concatTrue.concat(concatFalse);
document.getElementById("demo").innerHTML = res;
} catch(e) {
document.getElementById("demo").innerHTML = e;
}
</script>
</body>
</html>
Here we can see, that concatenation won't work for concatenating booleans. If we concat booleans, it throws an uncaught error.
Addition and Concatenation of Objects
Now, we check with variables as an object.
Example : Using addition (+)
<!DOCTYPE html>
<html>
<body>
<p>Adding two objects</p>
<p id="demo"></p>
<script>
let obj1 = {name : "xx"};
let obj2 = {name : "yy"};
let res = obj1 + obj2;
document.getElementById("demo").innerHTML = res;
document.write(typeof(res));
</script>
</body>
</html>
Example : Using Concatenation (concat)
<!DOCTYPE html>
<html>
<body>
<p>Concatenating two objects</p>
<p id="demo"></p>
<script>
try{
let obj1 = {name : "xx"};
let obj2 = {name : "yy"};
let res = obj1.concat(obj2);
document.getElementById("demo").innerHTML = res;
document.write(typeof(res));
} catch(e) {
document.getElementById("demo").innerHTML = e;
}
</script>
</body>
</html>
Till now, we have seen the addition and concatenation of variables as the same data types. Now, we will check the behavior with different data types.
Example
Here, we are taking one variable as a number and another as a string.
<!DOCTYPE html>
<html>
<body>
<p>Addition of number and string</p>
<p id="demo"></p>
<script>
let num = 100;
let str = " records";
let res = num + str;
document.getElementById("demo").innerHTML = res;
document.write(typeof(res));
</script>
</body>
</html>
Example : Using concatenation (concat)
<!DOCTYPE html>
<html>
<body>
<p>Concatenation of number and string</p>
<p id="demo"></p>
<script>
let num = 100;
let str = " records";
let res = str.concat(num);
document.getElementById("demo").innerHTML = res;
document.write(typeof(res));
</script>
</body>
</html>
Here, we already know that we cannot write concat for numbers. So we concatenated str with num. If we concatenate the number with str, It will throw an uncaught error.
In above code, for both addition and concatenation, we will get the same output.
Example : Using Addition (+)
Here, we will check with more than two variables.
<!DOCTYPE html>
<html>
<body>
<p>Adding multiple variables</p>
<p id="demo"></p>
<script>
let num = 1;
let bool = true;
let arr = [,2,4,5,6];
let str = "Hello";
let obj = {name : " World!"}
let res = num + bool + arr + str + obj;
document.getElementById("demo").innerHTML = res;
document.write(typeof(res))
</script>
</body>
</html>
Example : Using Concatenation (concat)
<!DOCTYPE html>
<html>
<body>
<p>Concating multiple variables</p>
<p id="demo"></p>
<script>
let num = 1;
let bool = true;
let arr = [,2,4,5,6];
let str = "Hello";
let obj = {name : " World!"}
let res = str.concat(arr).concat(num).concat(bool).concat(obj);
document.getElementById("demo").innerHTML = res;
document.write(typeof(res))
</script>
</body>
</html>
In above, we saw the difference for the addition and concatenation. For some cases output is same for both but some cases not. For the same cases, output is the same but typeof result is different. As we discussed, the output will depend on the type of variables.
Hope this will provide some clarification on addition and concatenation.
1K+ Views
