Sum Up an Array of Numbers : Frontend Coding Exercise

programming
1
This is a companion discussion topic for the original entry at https://www.kirupa.com/codingexercises/sum_arrays.htm
2

Here is one potential solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sum an Array of Numbers</title>
</head>
<body>
  <script>
    let numbers = [4, 10, 5, 7, 13, 20];

    let total = numbers.reduce((total, current) => total + current, 0);

    console.log(`Sum of array values is ${total}`);

  </script>
</body>
</html>

I recorded a video as well that walks through a few other solutions that could work:

4 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sum an Array of Numbers</title>
</head>
<body>
  <script>
    let numbers = [4, 10, 5, 7, 13, 20];
    let sum = 0
    numbers.forEach(num => sum += num)
    console.log(sum)
  </script>
</body>
</html>
1 Like
5

Hi @anilcha - welcome to the forums! Really nicely done with your entry. Very compact too :stuck_out_tongue:

You got the badge for completing this!

Cheers,
Kirupa

1 Like
6

I’m going to take advantage of the DOM to do the adding for me!

let numbers = [4, 10, 5, 7, 13, 20];

function div (width) {
  let el = document.createElement("div");
  el.style.display = 'inline-block';
  if (width) el.style.width = `${width}px`;
  return el;
}

let container = document.body.appendChild(div());
numbers.forEach(num => container.appendChild(div(num)));
let total = container.offsetWidth;
container.remove();

console.log(`Sum of array values is ${total}`);
3 Likes
7

Thank you. :smiley:

1 Like
8 
[4, 10, 5, 7, 13, 20].reduce(0, +) // Swift
1 Like
9

I’ve often wished JS had an add function, something along the lines of Math.max but for adding. The you’d be able to do something like

Math.add(...numbers)
1 Like
10

Why not:

Math.prototype.add = function(…nums){let acc = 0; for(let num of nums){acc += num} return acc}

even if they did release a Math.add It would probably be the same…

11

That’s probably what they thought with flatten :stuck_out_tongue_winking_eye:

2 Likes
12

Steve, Sen - you both got the badge (in case you didn’t get it already!) :medal_sports:

1 Like
13

Can I use R?

numbers = c(4, 10, 5, 7, 13, 20)
sum(numbers)
2 Likes
14

Yes! That is awesome :slight_smile:

2 Likes
15

Also, @TheCanadian, forgot to give you a badge :stuck_out_tongue:

image
image1222×440 44 KB

1 Like
16

My word, I just discovered all of the other challenges. I’m going to be busy for a while.

17

The evil way :stuck_out_tongue_winking_eye:
let numbers = [4, 10, 5, 7, 13, 20];
eval(numbers.join(‘+’));

2 Likes
18

That is pure evil! But, it does earn you a badge :slight_smile:

2 Likes
19

HTML:

Sum an Array of Numbers

Sum an array of numbers


Instructions:

Create an array of numbers and add them all together. The results should be in the console.

JavaScript:
// Create an array of numbers
let numbers = [
4,
10,
5,
7,
13,
20,
];

// Create a variable to hold the sum
let sum = 0;

// Loop over the array, adding each number to the sum
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}

// Put the result in the console
console.log("Sum of array values is: " + sum);

20 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sum an Array of Numbers</title>
    <!--<link rel="stylesheet" href="sumArrStyles.css">-->
</head>
<body>
    <h1>Sum an array of numbers</h1>
    <br>
    <h2>Instructions:</h2>
    <p>Create an array of numbers and add them all together.  The results should be in the console.</p>

    
    <script>
        // Create an array of numbers
        let numbers = [
            4,
            10,
            5,
            7,
            13,
            20,
        ];

        // Create a variable to hold the sum
        let sum = 0;

        // Loop over the array, adding each number to the sum
        for (let i = 0; i < numbers.length; i++) {
            sum += numbers[i];
        }

        // Put the result in the console
        console.log("Sum of array values is: " + sum);
    </script>
</body>
</html>