Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Are both addition and concatenation same in JavaScript?
In JavaScript, addition and concatenation are fundamentally different operations that can produce similar results depending on the data types involved. The + operator performs both operations contextually, while the concat() method is specifically for concatenation.
The + operator behaves differently based on operand types: when at least one operand is a string, it performs concatenation; when both operands are numbers, it performs arithmetic addition. The concat() method, however, is only available for strings and arrays.
String Operations
For strings, both + operator and concat() method produce identical results.
Using Addition (+)
<!DOCTYPE html>
<html>
<body>
<h2>Adding two strings</h2>
<p id="demo1"></p>
<p id="type1"></p>
<script>
let x = "Hello ";
let y = "World!";
let z = x + y;
document.getElementById("demo1").innerHTML = z;
document.getElementById("type1").innerHTML = "Type: " + typeof(z);
</script>
</body>
</html>
Using Concatenation (concat)
<!DOCTYPE html>
<html>
<body>
<p>Concatenating two strings</p>
<p id="demo2"></p>
<p id="type2"></p>
<script>
let x = "Hello ";
let y = "World!";
let z = x.concat(y);
document.getElementById("demo2").innerHTML = z;
document.getElementById("type2").innerHTML = "Type: " + typeof(z);
</script>
</body>
</html>
Array Operations
Arrays behave very differently with + versus concat(). The + operator converts arrays to strings first, while concat() properly merges arrays.
Using Addition (+)
<!DOCTYPE html>
<html>
<body>
<p>Adding two arrays</p>
<p id="demo3"></p>
<p id="type3"></p>
<script>
let arr1 = [1,2,3,4];
let arr2 = [5,6,7,8];
let res = arr1 + arr2;
document.getElementById("demo3").innerHTML = res;
document.getElementById("type3").innerHTML = "Type: " + typeof(res);
</script>
</body>
</html>
Using concat() for Arrays
<!DOCTYPE html>
<html>
<body>
<p>Concatenating two arrays</p>
<p id="demo4"></p>
<p id="type4"></p>
<script>
let arr1 = [1,2,3,4];
let arr2 = [5,6,7,8];
let res = arr1.concat(arr2);
document.getElementById("demo4").innerHTML = res;
document.getElementById("type4").innerHTML = "Type: " + typeof(res);
</script>
</body>
</html>
Number Operations
Numbers can only be added with +; concat() throws an error since numbers don't have this method.
Using Addition (+)
<!DOCTYPE html>
<html>
<body>
<p>Adding two numbers</p>
<p id="demo5"></p>
<p id="type5"></p>
<script>
let x = 102;
let y = 199;
let z = x + y;
document.getElementById("demo5").innerHTML = z;
document.getElementById("type5").innerHTML = "Type: " + typeof(z);
</script>
</body>
</html>
Using Concatenation (concat) - Error Case
<!DOCTYPE html>
<html>
<body>
<p>Trying to concat two numbers</p>
<p id="demo6"></p>
<script>
let x = 102;
let y = 199;
try {
let z = x.concat(y);
document.getElementById("demo6").innerHTML = z;
} catch(e) {
document.getElementById("demo6").innerHTML = "Error: " + e.message;
}
</script>
</body>
</html>
Mixed Data Types
When mixing numbers and strings, the + operator performs string concatenation, while concat() requires the string to be the caller.
<!DOCTYPE html>
<html>
<body>
<p>Number + String vs String.concat(Number)</p>
<p id="demo7"></p>
<p id="demo8"></p>
<script>
let num = 100;
let str = " records";
// Using +
let res1 = num + str;
document.getElementById("demo7").innerHTML = "Addition: " + res1 + " (Type: " + typeof(res1) + ")";
// Using concat
let res2 = str.concat(num);
document.getElementById("demo8").innerHTML = "Concatenation: " + res2 + " (Type: " + typeof(res2) + ")";
</script>
</body>
</html>
Comparison Summary
| Data Type | + Operator | concat() Method | Result Same? |
|---|---|---|---|
| Strings | Concatenation | Concatenation | Yes |
| Numbers | Addition | Error | No |
| Arrays | String conversion | Array merging | No |
| Mixed Types | String concatenation | Depends on caller | Sometimes |
Conclusion
Addition and concatenation are not the same in JavaScript. The + operator is context-sensitive and performs different operations based on data types, while concat() is a specific method for strings and arrays. Understanding these differences is crucial for predictable code behavior.
2K+ Views
