[Javascript ] Array methods in depth

Sort can automatically arrange items in an array. In this lesson we look at the basics including how to sort an array of strings alphabetically and the correct way to perform a numerical sort on an array of numbers. We finish as always with a practical use-case that shows not only sort in action, but also how it can be chained together with other array methods such as map and join.

Problem with sort number in Array:

var data = [10, 20, 15];
var sorted = data.sort();

console.log(sorted); // [10, 15, 20]

Code works fine, but there is a problem: 

When calling sort on an array with numbers, what actually happens is each number is converted to a string, and they're compared using their position in Unicode.

var data = [10, 20, 15, 30 ,2];
var sorted = data.sort();

console.log(sorted); // [10, 15, 2, 20, 30]

This is because, in Unicode, 10 does come before 2. Again, this is because these numbers are being converted to strings first.

To solve the problem:

var data = [10, 20, 15, 30 ,2];
var sorted = data.sort( (a,b)=>{
  return a-b;
} );

console.log(sorted);

We need to provide a comparative function to make it work. If a - b < 0 then it just put a before b;

Also according to that, we can compare the lenght of string, then sort them in order:

var sorted = names.sort( (a,b)=>{
  return a.length - b.length;
} );
console.log(sorted); // ["Bob", "Kent", "Kettly", "Jusnine"]

A more useful example : sort objects

var list = lessons.sort( (a,b)=>{
  return a.views-b.views
} )
.map( (lession)=>{
  return `    <li>${lession.title} - ${lession.views}</li>`;
} )
.join('
');

var output = `<ul>
${list}
</ul>`;

console.log(output); 
/*
"<ul>
    <li>Javascript Array methods in depth - concat - 1000</li>
    <li>Javascript Array methods in depth - join - 1025</li>
    <li>Javascript Array methods in depth - slice - 1050</li>
</ul>"
*/