How to use sort() and join() array methods in JavaScript

The term sort and join are two English words that iterates something in our minds when we come across them in any sentence. Here in JavaScript, the sort() and join() are array methods predefined with a piece of instructions in the JavaScript Programming Language and it's frameworks.

Array Method: sort()

The join() array method is a JavaScript command that creates a new string by changing the positions of element in the declared array.

It casts all the elements in the declared array into strings and makes comparism to determine the order of the element in the array.

Example:

let names = [ 'Mosh', 'Quam', 'Bashir', 'Ola' ];
sortNames = names.sort();
console.log(sortNames);   // ['Bashir', 'Mosh', 'Ola', 'Quam']

In the above example, the array method sort the elements in ascending order.

var numbers = [ 1, 3, 15, 6, 7, 45, 8, 20, 9 ]; 
var sortNumbers = numbers.sort();
console.log(sortNumbers); // [ 1, 15, 20, 3, 45, 6, 7, 8, 9 ]

In the above example, the 15 & 20 comes before 3 likewise 45 coming before 6, 7, 8, 9 because all elements are converted into strings and string "15" & "20" comes before "3" likewise "45" coming before "6", "7", "8", & "9" during a string comparism.

To get rid of these string conversion & comparism, we pass a comparism argument in the sort() method.

The syntax of the compare Function goes thus:

myArray.sort(compareFunction)

This comparism argument also known a function accepts two arguments(a, b) which return values determining sorting order.

Below is an example of a sort method that sort an array of numbers in ascending order

        let arr = [1,3,2,3,5];
        sortArrInAscendingOrder = arr.sort(function(a,b) {
            return a-b;
        })
        console.log(sortArrInAscendingOrder);

Here is another example of a sort method that sort an array of numbers in descending order

        let arr = [1,3,2,3,5];
        sortArrInDescendingOrder = arr.sort(function(a,b) {
            return b-a;
        })
        console.log(sortArrInDescendingOrder);

Also, like sorting an array of elements with datatype string, numbers etc., we can also sort array of objects by a specified property.

The below example is an array of objects students containing three properties:

let students = [
    {name: 'Mosh', matric: 170102131, birthDate: "July 11, 2001"},
    {name: 'Smith', matric: 170102011, birthDate: "May 25, 2000"},
    {name: 'Rowe', matric: 170102100, birthDate: "November 12, 2003"}
];

To sort the above array by their matric, the code syntax is illustrated as follows:

students.sort(function (a, b) {
    return a.matric - b.matric;
});

console.log(students);

To sort the above array by their name, the code syntax is illustrated as follows:

students.sort(function (a, b) {
    return a.name - b.name;
});

console.log(students);

To sort the above array by their birthDate, the code syntax is illustrated as follows:

students.sort(function (a, b) {
   let p = new Date(a.birthDate),
        q = new Date(b.birthDate);
    return p - q;
});

console.log(students);

Array Method: join()

The join() array method is a JavaScript command that creates a new string from the given array and returns the created string by concatenating all elements in the array, and if the elements in the array is greater than 1 (elements.length > 1), the elements are separated by a comma or any specified separator passed into the function argument. In the case of an array having only an item, it returns the item without a separator.

The following are examples of various way of using the join() array method in JavaScript:

var names = ['Mosh', 'Quam', 'Bashir', 'Ola'];
console.log(names.join()); /** This creates and returns all elements with a comma separator  
 Result: Mosh,Quam,Bashir,Ola **/

console.log(names.join('')); /** This creates and returns all elements without separator  
 Result: MoshQuamBashirOla **/

console.log(names.join(' ')); /** This creates and returns all elements with a single space separator 
 Result: Mosh Quam Bashir Ola **/

console.log(names.join(-)); /** This creates and returns all elements with a dash separator 
 Result: Mosh-Quam-Bashir-Ola **/