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
Selected Reading
How to multiply two Arrays in JavaScript?
In JavaScript, multiplying two arrays means performing element-wise multiplication, where each element at the same index in both arrays is multiplied together. This creates a new array with the products.
Element-wise Array Multiplication
When multiplying arrays, we iterate through corresponding indices and multiply the values at those positions:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Multiplication</title>
</head>
<body>
<h1>Multiply Two Arrays</h1>
<div id="arrays"></div>
<div id="result"></div>
<button onclick="multiplyArrays()">Multiply Arrays</button>
<script>
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [2, 3, 4, 5, 6];
document.getElementById('arrays').innerHTML =
`Array 1: [${arr1}]<br>Array 2: [${arr2}]`;
function multiplyArrays() {
let result = [];
let minLength = Math.min(arr1.length, arr2.length);
for (let i = 0; i < minLength; i++) {
result[i] = arr1[i] * arr2[i];
}
document.getElementById('result').innerHTML =
`Multiplied Array: [${result}]`;
}
</script>
</body>
</html>
Using map() Method
A more functional approach uses the map() method for cleaner code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Multiplication with map()</title>
</head>
<body>
<h1>Array Multiplication Using map()</h1>
<div id="output"></div>
<script>
function multiplyArraysWithMap(array1, array2) {
let minLength = Math.min(array1.length, array2.length);
return array1.slice(0, minLength).map((val, index) => val * array2[index]);
}
let numbers1 = [10, 20, 30, 40];
let numbers2 = [2, 3, 4, 5, 6];
let multiplied = multiplyArraysWithMap(numbers1, numbers2);
document.getElementById('output').innerHTML = `
<p>Array 1: [${numbers1}]</p>
<p>Array 2: [${numbers2}]</p>
<p>Result: [${multiplied}]</p>
`;
</script>
</body>
</html>
Handling Different Array Lengths
When arrays have different lengths, we multiply only the overlapping elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different Length Arrays</title>
</head>
<body>
<h1>Multiplying Arrays of Different Lengths</h1>
<div id="demo"></div>
<script>
let shortArray = [1, 2, 3];
let longArray = [5, 10, 15, 20, 25];
function safeMultiply(arr1, arr2) {
let result = [];
let length = Math.min(arr1.length, arr2.length);
for (let i = 0; i < length; i++) {
result.push(arr1[i] * arr2[i]);
}
return result;
}
let product = safeMultiply(shortArray, longArray);
document.getElementById('demo').innerHTML = `
<p>Short Array: [${shortArray}] (length: ${shortArray.length})</p>
<p>Long Array: [${longArray}] (length: ${longArray.length})</p>
<p>Multiplied: [${product}] (length: ${product.length})</p>
<p>Note: Only first ${Math.min(shortArray.length, longArray.length)} elements multiplied</p>
`;
</script>
</body>
</html>
Comparison of Methods
| Method | Readability | Performance | Best For |
|---|---|---|---|
| For Loop | Good | Fast | Large arrays, performance-critical code |
| map() Method | Excellent | Slightly slower | Functional programming, cleaner code |
Conclusion
Array multiplication in JavaScript performs element-wise multiplication of corresponding indices. Use for loops for performance or map() for cleaner, functional code. Always handle different array lengths appropriately.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements