Array reducer producing unexpected result of NAN

Question

Array reducer producing unexpected result of NAN

Query

I am facing an issue with a specific array and reducer function. The array in question is as follows:

let oddsArray = [undefined, undefined, 5, 5]

Accompanied by this reducer function:

const reducer = (accumulator, currentValue) => accumulator + currentValue

Upon calling console.log, I encounter the following output:

console.log(oddsArray.reduce(reducer, 1), 'oddsArray') /// NAN

This only changes when the array excludes any undefined values:

[5, 5, 5, 5] /// 20

Desired Outcome

My objective is to sum up all numbers within the array even if there are undefined elements present. Therefore, the initial total of the array should have been:

let oddsArray = [undefined, undefined, 5, 5] // 10

Is there a method to achieve this?

Thank you!

javascript arrays undefined nan

Answer 1

Answer №1

To handle undefined values, you can use the following code: currentValue || 0

let numsArray = [undefined, undefined, 5, 5]
const total = numsArray.reduce((previousValue, currentValue) =>
                      previousValue + (currentValue || 0), 0);
console.log(total);

Answer 2

To handle undefined values, you can use the following code: currentValue || 0

let numsArray = [undefined, undefined, 5, 5]
const total = numsArray.reduce((previousValue, currentValue) =>
                      previousValue + (currentValue || 0), 0);
console.log(total);

Answer 3

Answer №2

For a more versatile solution, particularly when summing only the numbers in an array containing various types of elements, you can utilize Number.isNaN() to determine if the current value of the reducer is a number:

let newArray = [undefined, undefined, 5, 5, null, "hello", {"foo":"bar"}];
const reducer = (acc, currVal) => acc + (isNaN(currVal) ? 0 : currVal);
let result = newArray.reduce(reducer, 0);
console.log(result);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Answer 4

For a more versatile solution, particularly when summing only the numbers in an array containing various types of elements, you can utilize Number.isNaN() to determine if the current value of the reducer is a number:

let newArray = [undefined, undefined, 5, 5, null, "hello", {"foo":"bar"}];
const reducer = (acc, currVal) => acc + (isNaN(currVal) ? 0 : currVal);
let result = newArray.reduce(reducer, 0);
console.log(result);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Array reducer producing unexpected result of NAN

Query

Desired Outcome

Answer №1

Answer №2

Similar questions

Difficulty encountered when trying to initialize a multidimensional array within a class

How to conditionally set the active class in a React component

What exactly is the purpose of calling upon 'express' - a reference to a function or an object?

Which callback function is best suited for handling the response in an XMLHttpRequest and rendering it on the webpage?

Order of AngularJS Scope.on and Scope.emit Invocation in a Filter

How come the text color isn't changing in my Tailwind CSS and Next.js project?

Once the image is requested in HTML, three.js makes a subsequent request for the same image

"Silent Passageway: Connecting Node JS to ASW RDS MySQL Through a Secret

Bringing in d3js into Angular 2

Utilize the request object from Express within a Mongoose Plugin

What is the best way to pass an array of objects to a component as a prop and then distribute individual objects within the array as props to nested components?

Error in Angular authentication validation when verifying the response of a URL for the status "success"

Enhanced Search and Replace Techniques in HTML using jQuery and JavaScript

Exporting a Three.js scene to a data URL is as easy

The JQuery duplication process did not function as anticipated

An error was encountered while parsing JSON: Unexpected token u found at the beginning of the JSON data. This occurred in the file AuthContext.js within the context folder of the src directory

Eliminate the navigation bar option from a website template

Unable to retrieve JSON data from the remote URL

Trouble with passing options to ES6 module imports

JSFiddle Functioning Properly, But Documents Are Not Loading