Why use spread operator when sorting an array in JavaScript?

[shivajikobardan]

TL;DR Summary

spread operator javascript

I Understand the basic theory behind spread operator.

const girlNames = ['Jessica', 'Emma', 'Amandine']
const newGirlNames = [...girlNames]
console.log(newGirlNames)
// Output: ["Jessica", "Emma", "Amandine"]

But I don't understand when it's applied. See here.

function createList() {
  [...richestPeople]
    .map(a => ({ value: a, sort: Math.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(a => a.value)
    .forEach((person, index) => {
      const listItem = document.createElement("li");
      listItem.setAttribute("data-index", index);
      listItem.innerHTML =
        `
    <span class="number">${index + 1}</span>
    <div class="draggable" draggable="true">
    <p class="person-name">${person}</p>
    <i class="fa-solid fa-grip-lines"></i>
    </div>

    `

      listItems.push(listItem);
      draggable_list.appendChild(listItem);
    })
}

Why do we require spread operator here? I tried to see the output w/o spread operator and seeing that didn't help.
output with spread operator:

output without spread operator:

It must be obvious to people, but it's not to me. I'm not getting it.

 

[pasmith]

This suggests that [...arr] is an efficient way of creating a copy of the one-dimensional array arr. Without the operator, you have [arr], an array consisting of a single entry, namely arr. Hence your second screenshot has the entire list of names as a comma-separated string in a single <li> tag, rather than each name in its own <li> tag as in the first screenshot.

 

[pbuk]

function createList() {
  [...richestPeople]
    .map(a => ({ value: a, sort: Math.random() }))
    // ...
}

Why do we require spread operator here? I tried to see the output w/o spread operator and seeing that didn't help.

You don't. The code below has exactly the same result.

function createList() {
  richestPeople
    .map(a => ({ value: a, sort: Math.random() }))
    // ...
}

But note

function createList() {
// This sorts the array richestPeople.
richestPeople.sort();
// This creates a new array of the elements of richestPeople and sorts it.
// richestPeople is left unsorted.
sortedRichestPeople = [...richestPeople].sort();
// This code has an identical result and is preferred by some:
sortedRichestPeople = richestPeople.slice().sort();