How to make a Sort of a converted Nodelist to array?

Question

I am trying to sort the array by the style property order.

This is my attempt:

var interval = setInterval(() => {
  var letterDivs = gameBox.getElementsByClassName("wordBox")[0].childNodes;

  console.log([...letterDivs]);

  [...letterDivs].sort((a, b) => {
    (a.style.order > b.style.order) ? 1 : -1;
  });
  console.log(letterDivs);
}, 300);

The last console.log does not return the sorted list. Why? How do I sort the list?

Answer 1

The estate <elm>.style.order returns a string with the value set in the CSS property order of the element in question.

Since it is a string, you should worry about converting it to the appropriate type (number) since the comparison operators (such as >) compare strings lexicographically (so for example, '11' < '100' would return false, what is absurd from the numerical point of view).

That said, you can do something like this:

const letterDivs = document.querySelectorAll('.wordBox > *');

const sorted = [...letterDivs].sort((a, b) => {
  const aNum = parseInt(a.style.order, 10);
  const bNum = parseInt(b.style.order, 10);
  
  // Irá jogar aqueles com `order` inválido para o final.
  if (Number.isNaN(aNum)) return 1;
  if (Number.isNaN(bNum)) return -1;
  
  // Ordena de ordem crescente:
  return aNum - bNum;
});

console.log(sorted.map((el) => el.textContent));

<div class="wordBox">
  <span style="order: 4">4</span>
  <span style="order: 2">2</span>
  <span>Sem Order</span>
  <span style="order: 3">3</span>
  <span style="order: 1">1</span>
  <span style="order: dasdkaj">Order Inválido</span>
  <span style="order: 5">5</span>
</div>

^{Note that I used map at the end of the previous example only to print the text of each element in the console. But this shows that the list was correctly ordered.}

Note that I have also been concerned with dealing with possible cases where the element does not have a property order valid. In this case, either a string or an empty string would be returned. How Javascript interprets them as NaN by means of parseInt, check if they are NaN and order them within the comparison function. In this case, I sort them to the end of the list.

And the expression [...letterDivs].sort((a, b) => /* ... */) returns a new array. How we use the Operator spread within a new literal array, the NodeList letterDivs original will not be modified, since it was only used to make a copy for a new array. Thus, we need to assign the result of the expression in question to a new variable. In this case, I created a new variable called sorted.

And finally its comparison function was also not returning any value. I used the return for that reason. Learn more.