Learn Basic Algorithmic Thinking by Building a Number Sorter - Step 7

JavaScript
1

Tell us what’s happening:

I am not stuck, I just don’t understand how it’s working. Can someone help me?

const sortInputArray = (event) => {
  event.preventDefault();

  const inputValues = [...document.getElementsByClassName("values-dropdown")];

  console.log(inputValues);
  
  console.log(inputValues.map((dropdown) => {
    return Number(dropdown.value);
  }))
}

The first console.log returns this:

[ { '0': {},
    '1': {},
    '2': {},
    '3': {},
    '4': {},
    '5': {},
    '6': {},
    '7': {},
    '8': {},
    '9': {} },
  { '0': {},
    '1': {},
    '2': {},
    '3': {},
    '4': {},
    '5': {},
    '6': {},
    '7': {},
    '8': {},
    '9': {} },
  { '0': {},
    '1': {},
    '2': {},
    '3': {},
    '4': {},
    '5': {},
    '6': {},
    '7': {},
    '8': {},
    '9': {} },
  { '0': {},
    '1': {},
    '2': {},
    '3': {},
    '4': {},
    '5': {},
    '6': {},
    '7': {},
    '8': {},
    '9': {} },
  { '0': {},
    '1': {},
    '2': {},
    '3': {},
    '4': {},
    '5': {},
    '6': {},
    '7': {},
    '8': {},
    '9': {} } ]

The second console.log returns this:

[ 8, 2, 4, 1, 3 ]

Can someone explain how?

Your browser information:

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

Challenge Information:

Learn Basic Algorithmic Thinking by Building a Number Sorter - Step 7

2

Hi Alex!
Let’s ignore the spread operator for the moment. What happens when you console.log just the first element of the className?

console.log(document.getElementsByClassName("values-dropdown")[0])

You should get the same thing but for just one dropdown: an object that has the list of possible values of the HTML element as keys with an empty object assigned to each.

And when we call the .value on this array element (containing the object just mentioned) we will then see the actual value selected of this dropdown element. So when we use these HTML DOM functions, they won’t necessarily return everything about that DOM element with the returned object.

Okay, so the spread operator basically tells the script: hey, i’ve got a bunch of things here that are sort of like an array and I want you to treat them as either an array or as individual arguments for a function. This is why it is called array-like. (Spread syntax (...) - JavaScript | MDN)

This is why the map function works. Now, for the map, let’s ignore what you saw in your first console.log and forget about the spread operator. In the map, think of each value as calling the next index of the “not-quite-an-array” from document.getElementsByClassName(“classname”). Then when we call .value on each index of the array (now helpfully called “dropdown” in you map function) we get the actual value of the DOM element.

I say it is “not-quite-an-array” because if you don’t do the spread operator on the collection of found items first you get an error with the map function because the map function only works on an array. (I think technically it is called an iterable which has different functionality in Javascript.)

I hope that helps!

1 Like
3

Thank you! I also found that when I added .value to your console log example, it produced the number I expected it to. So the object at className “values-dropdown”[0] contains all the possible values, and .value reveals, or returns, the input that the user selected and that was stored in the object when the submit button was pressed.

1 Like
4

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