Sum of Numbers in an Array

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Sum only numeric values from an input array, ignoring non-numbers and NaN. This reinforces safe type checking, accumulator patterns, and the idea that you shouldn’t coerce strings like '5' into numbers unless the problem explicitly asks for it.

Arguments

arr: any[] — An array containing numbers and possibly other types (e.g., strings, booleans, nulls). Only actual numbers should be summed.

Returns

number —

The sum of all numeric (non-NaN) elements in the array. Returns 0 if there are no numeric entries.

Examples

// Basic examples

sum([1, 2, 3]) // => 6

// '20' is a string → ignored

sum([10, '20', 30]) // => 40

// Ignores non-numbers

sum(['a', 5, true, 7]) // => 12

// Handles empty array

sum([]) // => 0

Solution

Overview

Iterate through the array, accumulate only valid numbers, and skip everything else. The key is to use typeof === 'number' and Number.isNaN so that NaN doesn’t poison the sum and strings/booleans aren’t implicitly coerced.

Approach 1: Imperative loop (explicit and safe)

Steps:

1) Initialize total = 0.

2) For each value v in the array, check typeof v === 'number' and !Number.isNaN(v).

3) If valid, add it to the total.

4) Return the total after the loop.

Complexity: O(n) time, O(1) space. This is predictable and avoids hidden coercions.

export default function sum(arr) {
  let total = 0;
  for (const el of arr) {
    if (typeof el === 'number' && !Number.isNaN(el)) {
      total += el;
    }
  }
  return total;
}

export default function sum(arr: any[]): number {
  let total = 0;
  for (const el of arr) {
    if (typeof el === 'number' && !Number.isNaN(el)) {
      total += el;
    }
  }
  return total;
}

Approach 2: Filter + Reduce (functional style)

Idea: first filter the array to only include valid numbers, then sum them using reduce().

How it works:

Use filter() to keep only elements where typeof el === 'number' && !Number.isNaN(el).
Use reduce() with an accumulator starting from 0 to sum the filtered values.

Why use it: concise and expressive, and the TypeScript version benefits from a type guard.

export default function sum(arr) {
  return arr
    .filter(el => typeof el === 'number' && !Number.isNaN(el))
    .reduce((total, el) => total + el, 0);
}

export default function sum(arr: any[]): number {
  return arr
    .filter((el): el is number => typeof el === 'number' && !Number.isNaN(el))
    .reduce((total, el) => total + el, 0);
}

Approach 3: Reduce-only with inline check

Idea: combine filtering and summing into a single reduce() call.

How it works:

Start with total = 0.
For each el in arr, check if it is a valid number.
If so, add it to total.
Return the final total.

Why use it: avoids creating an intermediate array, which can be more efficient for large inputs.

export default function sum(arr) {
  return arr.reduce((total, el) => {
    if (typeof el === 'number' && !Number.isNaN(el)) {
      total += el;
    }
    return total;
  }, 0);
}

export default function sum(arr: any[]): number {
  return arr.reduce((total, el) => {
    if (typeof el === 'number' && !Number.isNaN(el)) {
      total += el;
    }
    return total;
  }, 0);
}

Notes & Pitfalls

Pitfalls

Avoid coercing numeric strings — `'20'` should not be counted unless you explicitly convert it.
Skip `NaN` to prevent polluting the final sum.
Ensure non-numeric falsy values like `false`, `null`, or `undefined` are not counted.

Edge cases

Empty array → returns `0`.
All non-numeric → returns `0`.
Includes `NaN` → ignored.
Mixed types → only valid numbers contribute to the total.

Techniques

Type checking with `typeof` and `Number.isNaN`.
Using loops vs. functional array methods (`filter`, `reduce`).
Accumulator logic for numeric aggregation.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse JavaScript interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open JavaScript mastery study plan Open Company Prep Open JavaScript Framework Prep Guide