Using JavaScript: How to utilize Array.reduce within a function that also accepts arguments

Question

Using JavaScript: How to utilize Array.reduce within a function that also accepts arguments

let foo = 0;
let bar = 0;
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];

function calculateSum(arr) {
    return arr.reduce((accum, val) => accum + val, 0);
}

foo = calculateSum(arr1); // Expect foo to equal 15
bar = calculateSum(arr2); // Expect bar to equal 40

I want to reuse this function for different arrays and values. Instead of passing the sum as an argument, let's update the value directly by returning it from the function.

The new syntax maintains clarity in the code while achieving the desired functionality.

javascript arrays reduce

Answer 1

Answer №1

If I have it clear, all you really need is a simple sum function:

var x = 0;
var y = 0;
var nums1 = [1, 2, 3, 4, 5];
var nums2 = [6, 7, 8, 9, 10];

const calculateSum = (numbers) => numbers.reduce((result,current) => result + current)

x = calculateSum(nums1)
y = calculateSum(nums2)
 
console.log(x)
console.log(y)

Answer 2

If I have it clear, all you really need is a simple sum function:

var x = 0;
var y = 0;
var nums1 = [1, 2, 3, 4, 5];
var nums2 = [6, 7, 8, 9, 10];

const calculateSum = (numbers) => numbers.reduce((result,current) => result + current)

x = calculateSum(nums1)
y = calculateSum(nums2)
 
console.log(x)
console.log(y)

Answer 3

Answer №2

Primitive types in JavaScript are passed by value, while objects are passed by reference. Although it is possible to achieve this by wrapping the variable foo in an object, it is not recommended to design code in this way. Modifying function arguments can make the code difficult to understand and debug.

var foo = { value: 0 };
var bar = { value: 0 };
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9, 10];
    
function getSum(arr, sum) {
    sum.value = arr.reduce(function(accum, val) {
      return accum += val;
    }, 0)
}
    
getSum(arr1, foo);
getSum(arr2, bar);

console.log(foo.value);
console.log(bar.value);

If possible, it is advisable to find a solution to your problem without mutating variables.

Many linting tools, such as eslint, will raise an error if they detect mutation of function arguments.

Instead, it is better to separate the sum function from the assignment of the resulting value:

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9, 10];
        
function sum(arr) {
    return arr.reduce(function(acc, next) { return acc + next });
}

var foo = sum(arr1);
var bar = sum(arr2);
    
console.log(foo);
console.log(bar);

Answer 4

Primitive types in JavaScript are passed by value, while objects are passed by reference. Although it is possible to achieve this by wrapping the variable foo in an object, it is not recommended to design code in this way. Modifying function arguments can make the code difficult to understand and debug.

var foo = { value: 0 };
var bar = { value: 0 };
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9, 10];
    
function getSum(arr, sum) {
    sum.value = arr.reduce(function(accum, val) {
      return accum += val;
    }, 0)
}
    
getSum(arr1, foo);
getSum(arr2, bar);

console.log(foo.value);
console.log(bar.value);

If possible, it is advisable to find a solution to your problem without mutating variables.

Many linting tools, such as eslint, will raise an error if they detect mutation of function arguments.

Instead, it is better to separate the sum function from the assignment of the resulting value:

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9, 10];
        
function sum(arr) {
    return arr.reduce(function(acc, next) { return acc + next });
}

var foo = sum(arr1);
var bar = sum(arr2);
    
console.log(foo);
console.log(bar);

Using JavaScript: How to utilize Array.reduce within a function that also accepts arguments

Answer №1

Answer №2

Similar questions

I am facing issues with running my project due to a gyp error. Can anyone provide guidance on resolving this problem?

What is the best way to increase the value of a variable using jQuery?

Exploring the World of AJAX with CodeIgniter

Steps for storing div content (image) on server

Ajax: The response from xmlhttp.responseText is displaying the entire inner HTML rather than the specified text needed

Issue with Vue3: The imported module is not defined

What is the best way to position a container div over another container using Bootstrap or CSS?

Tips for pressing the enter key to submit when faced with two buttons

Display HTML content within a Material-UI Card component using React

Arrays contain multiple elements, not just a single item

The dimensions of the sprites within Three.js geometry

Can we rely on JavaScript to maintain the order of object properties?

How to manipulate iframe elements using jQuery or JavaScript

Samsung Galaxy S7 can interpret alphabetical parameters as numbers in a link sent via SMS

Improving Three.js performance for a single, substantial model

Acquiring the content of elements contained within a div container

Using jQuery, target the specific elements that have certain data attributes assigned to them

Executing jQuery after the body has finished loading

Having trouble with implementing Nested routes in Vuejs?

Why does the lazy loading feature keep moving the background image around?