Sorting alphabetically ascending and descending using .sort() I have created this basic use case of .sort() for my own reference. I am asking for a review to see if there are bad practices present or areas that could be optimised.

Is my use of modifying the array correct? Do I need to place the newly sorted list into a new array?
Using .map() I found it was parsing it as a string. Is insertAdjacentHTML() the right method to use here?



const listArea = document.getElementById('listArea');
const btnAsc = document.getElementById('asc');
const btnDes = document.getElementById('des');

// The Original Array
let architects = [
  "Lloyd Wright",
  "Hadid",
  "Mies van der Rohe",
  "Le Corbusier",
  "Foster",
  "Gaudi",
  "Piano",
  "Gropius",
  "Niemeyer",
  "Aalto",
  "Saarinen",
]

// Empty Array to Store Sorted Array
let sortedList = [];

// Click Events for the sort buttons
btnAsc.addEventListener('click', () =&gt; sortAsc(architects));
btnDes.addEventListener('click', () =&gt; sortDes(architects));

// Sort the array in ascending order
function sortAsc(arr) {
  // Clear the sortedList array
  sortedList.length = 0;
  
  // Convert each item in the architects array to lower case
  for(const element of arr) {
    // Push these lowercase elements into the sortedList array
    sortedList.push(element.toLowerCase());
  }
  sortedList.sort();
  populateList(sortedList);
}

function sortDes(arr) {
  sortedList.length = 0;
  for(const element of arr) {
    sortedList.push(element.toLowerCase());
  }
  sortedList.sort().reverse();
  populateList(sortedList);
}

function populateList(arr) {
  // Empty out the listArea of all content
  while(listArea.firstChild) {
    listArea.removeChild(listArea.lastChild);
  }
  // Map each item in the supplied array to an li, and remove comma at end of each
  let listArchitects = arr.map(item =&gt; `&lt;li&gt;${item}&lt;/li&gt;`).join('');
  listArea.insertAdjacentHTML('beforeend', listArchitects);
}

window.addEventListener('onload', populateList(architects));
#listArea {
  text-transform: capitalize;
}
&lt;div class="list"&gt;
  &lt;div class="buttons"&gt;
    &lt;button id="asc"&gt;Sort Ascending&lt;/button&gt;
    &lt;button id="des"&gt;Sort Descending&lt;/button&gt;
  &lt;/div&gt;
  &lt;ul id="listArea"&gt;
    
  &lt;/ul&gt;
&lt;/div&gt;
Some of the things I'd point out in your code for improvements:

Arrays can be a const since you will not modify the array itself but just push new elements to the array.
In your functions sortAsc, sortDesc, you are iterating through arr just to make it lowercase and iterating through the array again in sortedList.sort(). In such scenarios, think about how you can reduce number of iterations.
sort() does in-place sorting, so no need to create a new array.
In function populateList by running arr.map you are creating another new array which I don't think is necessary.



const listArea = document.getElementById('listArea');
const btnAsc = document.getElementById('asc');
const btnDes = document.getElementById('des');

const architects = [
  "Lloyd Wright",
  "Hadid",
  "Mies van der Rohe",
  "Le Corbusier",
  "Foster",
  "Gaudi",
  "Piano",
  "Gropius",
  "Niemeyer",
  "Aalto",
  "Saarinen",
];

function sortAsc() {
  architects.sort();
  populateList();
}

function sortDes() {
  architects.sort().reverse();
  populateList();
}

function populateList() {
  listArea.innerHTML = '';
  architects.forEach( (a) =&gt; {
    const list = document.createElement('li');
    list.innerText = a;
    listArea.appendChild(list);
  });
}

btnAsc.addEventListener('click', sortAsc);
btnDes.addEventListener('click', sortDes);

window.addEventListener('onload', populateList());
&lt;div class="list"&gt;
  &lt;div class="buttons"&gt;
    &lt;button id="asc"&gt;Sort Ascending&lt;/button&gt;
    &lt;button id="des"&gt;Sort Descending&lt;/button&gt;
  &lt;/div&gt;
  &lt;ul id="listArea"&gt;
    
  &lt;/ul&gt;
&lt;/div&gt;