Learn Functional Programming by Building a Spreadsheet - Step 20

JavaScript
1

Step 20
Declare a -sum- function that takes a -nums- parameter, which will be an array of numbers. It should return the result of calling -reduce- on the array to sum all of the numbers.
My code

const sum = nums => nums.reduce();

I’ve written the above wih different combinations of brackets [() and {}] and cannot get this to pass. I don’t know what I’m missing.
I don’t even know if I’m missing the issue entirely or if this is a syntax error i haven’t noticed

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Functional Programming Spreadsheet</title>
  </head>
  <body>
    <div id="container">
      <div></div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
#container {
  display: grid;
  grid-template-columns: 50px repeat(10, 200px);
  grid-template-rows: repeat(11, 30px);
}

.label {
  background-color: lightgray;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
}

/* file: script.js */

// User Editable Region

const sum = nums => nums.reduce();

// User Editable Region


const range = (start, end) => Array(end - start + 1).fill(start).map((element, index) => element + index);
const charRange = (start, end) => range(start.charCodeAt(0), end.charCodeAt(0)).map(code => String.fromCharCode(code));

window.onload = () => {
  const container = document.getElementById("container");
  const createLabel = (name) => {
    const label = document.createElement("div");
    label.className = "label";
    label.textContent = name;
    container.appendChild(label);
  }
  const letters = charRange("A", "J");
  letters.forEach(createLabel);
  range(1, 99).forEach(number => {
    createLabel(number);
    letters.forEach(letter => {
      const input = document.createElement("input");
      input.type = "text";
      input.id = letter + number;
      input.ariaLabel = letter + number;
      container.appendChild(input);
    })
  })
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 20

2

You have to tell the reduce method how to do the reduction. You do this by providing a “callback” function. Just calling it without the callback function doesn’t do anything. In fact, it should be throwing an error in the console.

MDN: Array.prototype.reduce()

2 Likes
3

I’ll be the first to admit, I do forget about the console if I forget to open devTools. (if i use the one in window, it closes each time i pass.

Your link was a huge help and I’m embarrassed to say I had been staring at it for a while. I stopped reading and re-reading the explanations and just looked at the example code. Thank you for reminding me to start from the beginning

1 Like
4

No need to be embarrassed. I hope I didn’t make you feel that way. It was not my intention. This stuff isn’t easy. Learning takes a while. Keep up the good work!

3 Likes
5

It’s a default setting I can’t disable lmao
It’s helpful when I’m told what I need to focus my studying/research on. I think direct responses like yours and a lot of other experienced folks, help us campers learn how to research better, rather than giving us the answers or a longwinded explanation initially. Like what I’ve just done lol

but for real, I had that MDN page open for no less than a full episode of Supernatural trying to figure out what I was missing.

Knowing i was looking in the right place, was a confidence boost and helped me a lot

1 Like
6

How does this MDN page help? If anything, the step doesn’t seem clear enough. It doesn’t tell you what to pass in reduce(), it just tells you to chain it to nums. I’ve gone through that MDN page, and don’t see how it would help tell you what you are supposed to pass through reduce() since it depends on the functions you are using.

7

I don’t know this for sure because I am not familiar enough with the previous JS courses before the spreadsheet, but I’m assuming that reduce was already introduced and explained in one of those previous courses. Thus, the MDN link was just to help refresh their memory.

I think as you get further into the JS curriculum, the instructions aren’t going to be as specific as in the earlier courses because it is assumed you have more skills and thus don’t need as much help.

As far as what to pass into reduce, the instructions say:

“It should return the result of calling reduce on the array to sum all of the numbers.”

If you understand how reduce works then this makes sense. The MDN page even has an example of doing exactly this.

8

Putting array as the argument is not what it is looking for though. That would lead me to think its not a clear instruction. Maybe I am not ready for javascript then.

1 Like
9

no, the reduce method takes a function as argument. The array is what the reduce method is called on, which is also repeated in the MDN page

10

Refer to Array.prototype.reduce() in MDN documentation.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.