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:

#3
#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