Sorting Method of Arrays in JavaScript

Sorting Method of Arrays in JavaScript

Understanding the Sort Method of Arrays

Understanding the Sort Method of Arrays. How to use JavaScript’s sort?

  • The JavaScript array sort() is used to sort array elements.
  • By default, the array will sort in ascending order, but we can change it.
  • This method willchange the original array.
  • We can also provide our comparing function to implement custom sorting.
var array = [1,2,3,1,2,3];

array.sort(); [1,1,2,2,3,3]

Let’s try another example:

var array = [1,2,11];

array.sort(); // [1,11,2]

For the above code, the expected result is [1,2,11], but we get [1,11,2]. The reason is the sort method converts the elements into strings then compares their sequences of UTF-16 code units values.

So the 11 is converted to “11”. When we compare two strings like “11” and “2”, the char code is compared means char code of 1 is 49 , whereas char code of 2 is 50. Because of 49 < 50, we get [1,11,2].

If the array contains any undefined, then all undefined elements are sorted to the end of the array. We can use the default sort method to sort strings.

var names = ["John", "Abu", "Babu", "Balu", "Antony"]

names.sort();

console.log(names); // ["Abu", "Antony", "Babu", "Balu", "John"]

For other types, we need to pass our compareFunction as an argument to sort Function. The compare function takes two arguments. The two arguments are taken as from array on index [0,1] , [1,2] … [arrayLength-2, arrayLength-1] for comparing the pair of elements.

The sorting of elements is based on the return value of compareFunction for each pair of comparison. If the function returns…

  • >0 then the position of a and b is swapped.
  • <=0 then there is no change in position

Let’s write a compare function to sort numbers.

function compare(a, b) {

  if (a < b ) {
    return -1;
  }

  if (a > b ) {
    return 1;
  }

  // otherwise a == b
  return 0;

}

// Now if we execute

var array = [2,1,11];
array.sort(compare);

log(array); [1,2,11];

The above compare function can be simplified as:

function compareNumbers(a, b) {

  return a - b;

}

Because, when we do a-b, if a > b then it returns number > 0. If a<b, then it returns < 0. When a=b , then it returns 0.

To sort numbers in Descending Order, just change the a-b to b-a .

function Descending(a, b) {

    return b- a; 

}

Sorting Array of Objects

var users = [ {name: "John", age:20}, {name:"Antony" , age : 33}];

function sortByAge(obj1, obj2) {

    return obj1.age - obj2.age;

}

function sortByName(obj1, obj2) {
   return obj1.name.localeCompare(obj2.name);
} 

users.sort(sortByAge);

// output 
0: {name: "John", age: 20}
1: {name: "Antony", age: 33}

users.sort(sortByName);

//output

0: {name: "Antony", age: 33}
1: {name: "John", age: 20}

The **localeCompare()** method used in sortByName compareFunction returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

If the CompareFunction returns undefined, null, NaN, Infinity, then the array will not sort two members

var array = [3,2,1, 110, 102 , 30];

function customCompare(a, b){
   if(a > 10 || b > 10) {
      return Infinity;
   }
   else {
      return a-b;
   }
}

array.sort(customCompare);

In the above example, we have defined if the a and b is less than 10 , it will sort by ascending order. Otherwise, the function will return Infinity, though Infinity > 0. But, it will not be swapped. This is the same for undefined, null, NaN.

Thank you for reading !

JavaScript Javascript Tips Data Structures Programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How To Implement Your First Linked List Data Structure In JavaScript

How To Implement Your First Linked List Data Structure In JavaScript. In this article, we are going to cover the concept of linked lists, what linked lists are and how to implement one in your project. This article covers the basic way to implement a linked list in JavaScript.

Learning JavaScript: Data Types and Variables

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

Data Structures You Should Know as a JavaScript Developer

Understanding Data Structures is helpful in all aspects of programming, you don’t need to have a particular use case where you’ll use a Tree or a Graph to have to consider learning about them. In fact, I don’t think I’ve ever implemented a proper Tree structure in my 15 years of software development.

JavaScript Data Structures: Queues and Stacks

A departure from the usual JavaScript problem-solving tutorials and discuss two common data structures, Queue and Stack.

5 Data Structures to Master in R if you want to be a Data Scientist

5 Data Structures to Master in R if you want to be a Data Scientist: Learn how to master the basic data types, and advanced data structures, such as factors, lists, and data frames.