Wanna sort() things out in JavaScript ?

Zakaria Elk — Fri, 18 Sep 2020 14:39:00 +0000

We all have our life priorities, sometimes we stick to them and others we let loose. JavaScript doesn't, especially if you use the sort() method properly.

In a nutshell, the sort() method sorts the elements of an array in place and returns the sorted array.

How does it really work?

Let's first have a quick look at sort() basic syntax (from mdn)

Syntax

arr.sort([compareFunction])

The compareFunction is optional and can be set if we want to define a the sort order. If compareFunction is not supplied, all non-undefined array elements are sorted by converting them to strings and comparing strings in UTF-16 code units order.

If compareFunction is supplied, all non-undefined array elements are sorted according to the return value of the compare function. If a and b are two elements being compared, then:

If compareFunction(a, b) returns less than 0, sort a to an index lower than b (i.e. a comes first).
If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behavior, thus, not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.
If compareFunction(a, b) returns greater than 0, sort b to an index lower than a (i.e. b comes first).

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

Not convinced? 🤔 Let's try sorting these numbers

const numbers = [1, 2, 100, 3, 200, 400, 155];
const numbersSorted = numbers.sort(function(firstItem, secondItem) {
    if(firstItem > secondItem) {
        return 1;
    } else if (firstItem < secondItem) {
        return -1;
    } else {
        return 0;
    }
})

console.log(numbersSorted); // [1, 2, 3, 100, 155, 200, 400]

We can shorten this function to

const numbersSorted = numbers.sort((firstItem, secondItem) => firstItem - secondItem);
console.log(numbersSorted); // [1, 2, 3, 100, 155, 200, 400]

This time, let's not set a compare function and rely on the default one as mentioned earlier. Let's sort the following toppings array alphabetically

const toppings = ["Mushy Boi", "Chili", "Pickles", "Avocado", "Onions", "Cheese", "Chiles","Hot Sauce", "Bacon", "Lettuce", "Tomatoes", "Mushy Boi", "Eggs"]
console.log(toppings.sort()); //["Avocado", "Bacon", "Cheese", "Chiles", "Chili", "Eggs", "Hot Sauce", "Lettuce", "Mushy Boi", "Onions", "Pickles", "Tomatoes

Let's push it a little more and sort the prices

const productsSortedByPrice = Object.entries(prices).sort(function (a, b) {
  const aPrice = a[1];
  const bPrice = b[1];
  return aPrice - bPrice;
});
console.table(Object.fromEntries(productsSortedByPrice));

We use the Object.entries to get everything as we need to display both keys and values.
We call our sort and set a function with (a, b) which will hold the first and second item of each success pairs.
We set 2 variables that will hold the values of the entries. In our case the price.
We return the difference which will set the order of prices by returning (-1, 1 or 0)
We log the result by converting our result array into an object using Object.fromEntries, and we return our function result inside of it. Here we're using console.table for a better display of the result.

I hope you learned a thing or 2 from the above post. If you liked it, hit any of those nicely designed buttons, and let's connect! 🚀

Wait... Undefined or Not defined or Null?

Zakaria Elk — Sun, 13 Sep 2020 16:01:04 +0000

Some of the simplest concepts in JavaScript can be a little tricky to make sense of. One of these is the difference between undefined, not defined and null

Let's start with the easiest one 🤓

Undefined:

There are certain cases where undefined value is returned in javascript such as:

1) Whenever we declare a variable without assigning any value to it, javascript implicitly assigns its value as undefined.

let name;
console.log(name); //undefined

2) When a value is not assigned in an array or object.

let numArray = [1,2,,4];
console.log(numArray);  
//[1, 2, , 4]typeof(numArray[2])
//"undefined"

3) When functions don’t have a return statement but are called for assigning a value to a variable.

let add = (a,b) => {
  let c = a+b;
// no return statement
}let sum = add(2,3);
console.log(sum); 
//Output: undefined

In the code block above, since we commented the return statement, the value of variable sum is given as undefined in the output.

Not defined:

A not defined variable is one which has not been declared at a given point of time with a keyword like var, let or const.

console.log(a);
var a = 5;
//Output:- undefined

While if we don’t use the var declaration, the above the output will look like this:

console.log(b);
b = 5;
//Output:- "ReferenceError: b is not defined

Null:

null is a reserved keyword in javascript. We can assign a null value to a variable explicitly using this keyword. null essentially represents a non-existent or an empty value i.e. we explicitly tell the JavaScript interpreter that the variable has no value.

let life = null;
console.log(life); //null

DEV Community: Zakaria Elk

Wanna sort() things out in JavaScript ?

Wait... Undefined or Not defined or Null?