DEV Community: Gautam Anand

Javascript Sort: Simplified🧑‍💻

Gautam Anand — Fri, 22 Sep 2023 20:41:10 +0000

Is Javascript Sorting Simple?

Let's just admit that we all have gone to StackOverflow and just copied and pasted the javascript sort() method.

Well, I hope after reading this article, you might stop doing it and start writing your own custom javascript sorting methods.

Basics

To begin with any function, we need to understand the very basics of the sort() method.
It is a Higher Order Function, we'll know how.
As the name suggests, it sorts the elements in the array.

How?

Working of `sort()`

I love explaining with examples.

const array = ["Harry", "John", "Bob", "Zayn", "Chris"];
console.log(array.sort()); // [ 'Bob', 'Chris', 'Harry', 'John', 'Zayn' ]

This works exactly like sort(), except that it works only like this when we are sorting strings.

This is the default behavior of Javascript Sort() function - It converts the elements to string and compares the INSIDE value(i.e. the UTF-8 values) and returns the sorted array

For UTF-8 reference check this cheatsheet!
Alternatively, you may try running the below script

console.log("a".charCodeAt(0)); // 97

So in the above example, it resulted us the correct output because it actually looked up the UTF-8 values of the elements.

Suppose we have the same array variable

array.forEach((element) =>
  console.log(element.charCodeAt(0), " ", element.charAt(0))
);

This would actually tell us what is the value that was compared in real like this.

// console output
66   B
67   C
72   H
74   J
90   Z

Hence, Now when we actually try to sort an array full of numbers using the sort() function, we don't get the EXPECTED result.

Example

const array = [54, 133, 96, 0, 31, 101];
console.log(array.sort());

This will result an array like this - [0, 101, 133, 31, 54, 96] and the reason is stated above.

Solution

If you were reading up to here carefully, you must've remembered that sort is a higher-order function.
which basically means that it takes a callback() function as an argument.

The callback function takes two arguments(a,b)
a is the first element of the array and b is the second element.
It should return any of the three values: (-1, 0, 1) according to our requirements.

if negative: a < b
if positive: a > b
if zero: a == b // let it be as it is.

Writing our first compare function

It would be as simple as writing basic if else.

function compareFn(a, b) {
  if (a < b) return -1;
  else if (a > b) return 1;
  else return 0;
}

Let's just put our compareFn() in action!

const numbers = [54, 133, 31, 96, 0, 31, 101, 101];

function compareFn(a, b) {
  if (a < b) return -1; //BOOKMARK
  else if (a > b) return 1;
  else return 0; // means its equal
}

console.log(numbers.sort(compareFn)); // [ 0,  31,  31,  54, 96, 101, 101, 133 ]

See? we did it!
We actually sorted an array with numerical values!

But wait do we have to write the whole above logic just to create a sort() function that sorts numbers?
Javascript cannot be this harsh to us right?

It's not.

Our Final Touch to `sort()` function.

Well if we look closely to this line in our compare function

if (a < b) return -1;

NOTE:

This condition can only occur when we try to subtract a larger number from a smaller number that would result in a negative number.

Read that again!

So if we subtract b from a, this actually solves our all of the problems.

Listen.
We wanted a negative, a positive, and a zero right?

const a = 10;
const b = 100;
console.log(a - b); // would be negative

Also,

const a = 100;
const b = 10;
console.log(a - b); // would be positive

And if they are equal then it would actually give us zero.

This actually will sort our array again in an ASCENDING order with a much cleaner code.

We just cracked it!

Instead of writing the whole logic, we could just write our compare function like this.

function compareFn(a, b) {
  return a - b; // does all the job...
}

Now when we look at the code it should look like this

const numbers = [54, 133, 31, 96, 0, 31, 101, 101];

function compareFn(a, b) {
  return a - b; // b - a for descending order for obvious reasons.
}
console.log(numbers.sort(compareFn)); // [ 0,  31,  31,  54, 96, 101, 101, 133 ]

And since we know it just has a single line we can use an arrow function instead.

const nums = [6, 3, 8, 2, 5, 1];
console.log(nums.sort((a, b) => a - b)); // [1,2,3,5,6,8]

That's it.
Thank you for reading up to here,
If you really find this useful, share this blog with your friends, your co-workers, or anyone in your family who loves or hates javascript!

Social Links 👇
🌐Website
💻LinkedIn
🎶Instagram

Map, Filter and Reduce in Javascript 👨🏼‍💻

Gautam Anand — Fri, 08 Sep 2023 15:53:38 +0000

What are these?

These are the higher order functions of javascript.
A higher-order function can be defined as a function inside another function.
These functions are used to transform an Array and return a new Array as the result.

We will be using this array for all the examples

const arr = [10, 40, 20, 50, 80, 30];

map( )

Goes through each and every value of the array and do specified task.
It takes a callback function and returns the result

let us add +10 to every element in the array

function addTEN(element) {
  return element + 10;
}
console.log(arr.map(addTEN)); // [20,50,30,60,90,40]

This may be the first time you have seen someone using map like this.

Well, this approach is called writing a map using anonymous arrow functions.

const res = arr.map((val) => val + 10);
console.log(res); // [20,50,30,60,90,40]

filter( )

As the name suggests it filters.

Filters what?

It filters the elements of the array that satisfy the given predicate or condition (function) and returns the same.

It also takes a callback function

Let us filter all the elements greater than or equal to 50

const result = arr.filter((val) => val >= 50);
console.log(result); // [50,80]

OR we may write it like this

const result = arr.filter(function isGreaterThanHalf(val) {
  return val >= 50;
});
console.log(result); // [50,80]

reduce( )

It actually does not reduce anything!
The name itself is very confusing.

Then what is reduce?

Used in such places when we have to take the whole array and get the result as a single element from that array.

Finding the sum of each element in the array
Finding the largest or smallest element It all results in a single value.

Before we jump into the code we are going to implement one of the above examples without using reduce or the non-functional way.

function findSum(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) sum += arr[i];
  return sum;
}
/* Two things to learn from the above code
    1. Single Statement does not require any curly braces {}
    2. That += is same as sum = sum + arr[i];``
    GREAT RIGHT?
*/

console.log(findSum(arr)); // 230

Now, How we can transform the above logic and write a reduce function instead? (the easier way).

The reduce() function takes two parameters.

callback(collector,currentValue) 1.1 collector - this is the variable where the final value will be stored. 1.2 currentValue - the current value which is being iterated.
initial value for collector

const output = arr.reduce(function (collector, current) {
  collector = collector + current;
  return collector;
}, 0); // this zero(0) is the initial value for our sum to be stored in.

And when you google some solution you may see this type of example on stackoverflow which most of you didn't understand and just copy pasted the code.

const output = arr.reduce((col, cur) => (col += cur), 0);

Lets find the maximum in an array using reduce( )

const output = arr.reduce(function (maximum, current) {
  if (current > maximum) maximum = current;
  return maximum;
}, 0);
console.log(output); // 80

NOTE: We have taken the second parameter or the initial value of maximum as 0 because we have assumed that the array does not have any negative integers, otherwise we would have taken the first element as the maximum.

The most complex but aesthetic way to write the same example will be

const output = arr.reduce((max, cur) => (cur > max ? (max = cur) : max), 0);
console.log(output); // 80

Real Life Examples using Map, Filter and Reduce

For more complex examples we are taking this array which sort of looks like a data coming right from an API.

const apiData = [
  { name: "Gautam Anand", age: 51, education: "Graduate", isActive: true },
  {
    name: "Ram Kumar Sharma",
    age: 23,
    education: "Never Went to School",
    isActive: false,
  },
  {
    name: "Harshal Jain",
    age: 51,
    education: "Graduate",
    isActive: true,
  },
  {
    name: "Siddhart Singh",
    age: 40,
    education: "Post Graduate",
    isActive: false,
  },
];

Find a list to get all the first names from apiData

map( ) tricky question

const list = apiData.map((user) => user.name.split(" ")[0]);
console.log(list); // [ 'Gautam', 'Ram', 'Harshal', 'Siddhart' ]

The split(" ") method splits the list into various parts or arrays wherever it finds a space
hence the name became an array like this ['Gautam','Anand'] and to access its first element we added [0].

reduce( ) tricky question

Write reduce function such that we should get all of the ages and thier occurences.

// Output:
{ 23: 1, 51: 2, 40: 1 }

Its a very good question

const output = apiData.reduce((collector, current) => {
  // checking if the key already exists
  if (collector[current.age]) {
    // incrementing the value
    collector[current.age]++;
  } else {
    // creating the key first time
    collector[current.age] = 1;
  }
  // returning the collector
  return collector;
}, {}); // taking the initial value as {} to add key values into it.
console.log(output);

I think the comments are pretty self-explanatory. Still in case you are having trouble understanding here, try running the same in your IDE.

Chaining filter( ) and map( )

Let's have a look at this last example where we have to find all the names of the people who are active.

Lets create a filter( )

const result = apiData.filter((user) => user.isActive === true); // or just user.isActive
console.log(results);

This will provide us the Array of Objects which contains all the active users not the Names

// OUTPUT:
[
  {
    name: "Gautam Anand",
    age: 51,
    education: "Graduate",
    isActive: true,
  },
  {
    name: "Harshal Jain",
    age: 51,
    education: "Graduate",
    isActive: true,
  },
];

to get the names we will chain the filter() with map().

const result = apiData.filter((user) => user.isActive).map((user) => user.name); 
console.log(result); // [ 'Gautam Anand', 'Harshal Jain' ]

That's it for this reading, if you liked reading up till here please give it a ❤️.

Social Links 👇
🌐Website
💻LinkedIn
🎶Instagram

Javascript Essentials 🧑‍💻

Gautam Anand — Sun, 03 Sep 2023 12:20:13 +0000

Introduction

Well, we all start somewhere to start learning JavaScript, I wish this kind of beginner's guide would be available for me to get the very basics of JS.
If you are not new to javascript, this will be a perfect read to brush up your skills or building a stronger foundation.

Enjoy Reading

What is Javascript

JS is synchronous single-threaded language

Synchronous - It executes its code line by line.
Single-Threaded - Executes one line at a time.

How does JS Works?

Javascript works inside an execution context,
they have 2 components namely Memory and Code
Memory is also called as Variable Environment
Code is also called Thread of Execution

Hoisting

JS Code Hoisting is when a javascript code executes then even before the execution of the first line of the code it scans the entire code for declarations of functions & variables
Allocates memory for it in the Global Execution Context as variables/identifiers as undefined and creates a reference in case of functions.

var x = 10; // x will be undefined before execution

function getName() {
  console.log("Hello World");
} // gets copied entirely

Undefined vs Not Defined

Well as javascript creates a global execution context,
It allocates memory to all the declared variables & functions
By default, it allocates undefined to it. and when the variable assignment line is executed it assigns the respective value to it.

Eg `undefined`

var a;
console.log(a === undefined); //true

Not Defined

When JS tries to find a variable that was not found in the initial scan it gives the. implies that there was not memory allocated to the variable.

Eg `Not Defined`

var a = 10;
console.log(x); //here x is not defined in the scope

ReferenceError: x is not defined

Temporal Dead Zone -

let us look at this example

console.log(a); // Error
console.log(b); // undefined
let a = 10;
var b = 10;

ReferenceError: cannot access 'a' before initialization

let and const are not on the global object
instead they are stored in a different memory space than global called SCRIPT and since the console.log points to the global object, it does not find let a = 10; in it.

Example for Temporal Dead Zone

1. let c;
2. const a = 10;
3. if (a === 10) {
4.   c = "Temporal Dead Zone Ended";
5. }

Here, the above example shows that until the variable c or a is assigned any value, it will stay in a special zone called as Temporal Dead Zone 💀

let v/s const v/s var

In case of let and const there are no re declarations allowed.
Not even the console will work 😅

console.log("This will not print");
let a = 10;
var a = 10; // Redeclaration of identifier 'a'

Resulting in
SyntaxError: Identifier 'a' has already been declared.

var a = 10;
var a = "Please like this article";

No Error is there, re declarations are allowed in var

How to avoid temporal dead zone?

- Always put your declrations on the top of the file so that as soon as it starts executing it will get all the variables declared.
- By doing this we can shrinking the Dead Zone Window close to zero by moving all the declarations at the top.

Block in Javascript

Block is a set of lines covered by {} to provide it as a single statement.

Example

if (true) console.log("Single Statement");

That's the reason we dont need Curly Braces {} in if condition because it's a Single Statement
We use {} to provide a block, to have multiple statements

Example

if(condition){
  line1;
  line2;
  ...
} else {...}

function hello(){
 line1;
 line2;
 ...
}

Scopes in Block v/s Global

let & const are block scoped and var is global scoped.

How?

Example again! Let's say we execute this code

{
  var a = 10; //global
  let b = 20; //block
  const c = 30; //block
}

Proof

Shadowing

It is a concept of js where a variable declared using var hides the global scoped variable

var a = 10;
{
  var a = 100; // this 'a' shadows the global scoped 'a'
}
console.log(a); // results 100

But let and const works differently because they do not exist outside the current scope

let b = 10;
{
  let b = 100;
}
console.log(b); // results 10

let c = 1;
{
  let c = 10;
}
console.log(c); // results 1

Illegal Shadowing 😵‍💫

It is when we try to scope a let declared variable using a var.

let a = 100;
{
  var a = 10; // Error! Illegal Shadowing
  let a = 2; // works just fine!
}

SyntaxError: Identifier 'a' has already been declared

Closures 😶‍🌫️

A function bundling with its lexical scope is closure.

It's easy with an example

function first() {
  var a = 10;
  function second() {
    console.log(a);
  }

  return second;
}
...
let getFunction = first();

/* after this line, instance of 
first() function is popped out of 
the call stack */
...
getFunction(); // outputs: 10;

Theoretically it should not work as the identifier a needs to be outside the scope BUT when the second() function is returned it comes with its lexical scope as well. That's what exactly closure is.

Tricky Interview Question on setTimeout and Closures

Problem Statement - Print numbers from 1 to 5 with an interval of 1 second each.

You might get the confidence that this is a simple question and will come up with a code looking like this 👇

for (var i = 0; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, i * 1000);
}

Above code would go wrong (why?) by printing 6 in each line. and can be fixed by just using a let instead of a var

What if?

The interviewer asked you to do it with var only?

Relax don't sweat out. I'll tell you what to code and explain it how it works.

Here's the code that you're interested in 😆
with the explaination

for (var i = 0; i <= 5; i++) {
  // used var
  function closure(i) {
    setTimeout(() => {
      console.log(i);
    }, i * 1000);
    closure(i);
  }
}

Identifying the problem

Well the problem with the previous code using var was js maintains an execution context and the way the setTimeout() works is it stores the callback function and attaches a timer to it and goes to the next line.
as the variable i does not exists in the callback function it points to the outside reference of i from the for loop.
Now it creates 5 copies of functions with the timer and now by the timer expires js does not wait, for loop ends. it is just too late. the value of i becomes 6 at last.

Fixing the problem

Fix 1: using let declaration

We have discussed above that let is block scoped, the answer lies within that line.

When we use the let it creates separate blocks for its memory allocation. whereas in case of var all 5 functions were pointing to the same memory space available in the global execution context

Fix 2: using closures or functions

This will actually provide them a new copy of i in it everytime the setTimeout() was called

Types of Writing Functions

Function Declaration

function hello() {
  console.log("Like This Blog and star the repo");
}

Function Expression

const callAPI = async function () {
  const data = fetch("https://somesite.io/get/data/1232");
  return data;
};

Parameters v/s Arguments

function greet(name) {
  // identifier name is a parameter
  console.log(`Hello ${name}`);
}

greet("Gautam"); // "Gautam" is an Argument

First Class Functions

functions having functions in their arguments.
The ability of functions to be used as values and be able to return and pass as arguments to another function.

function first(doesSomething) {
  doesSomething();
}

first(() => {
  console.log("hello World");
});

Callback Functions in JS

These functions are sent in the arguments of another functions and are used respectively whenever needed,

setTimeout(function () {
  console.log("Timer");
}, 5000);
function x(y) {
  console.log("x");
}

x(function y() {
  console.log("y");
});

Arrow Functions

These functions are introduced in ES6 or EcmaScript 6 (2015)
They just allow us to write shorter syntaxes

Before

function addOne(addNumber) {
  return 1 + addNumber;
}

After

const addOne = (addNumber) => 1 + addNumber;

Above method allows us to write functions without using the function keyword.

If you liked reading till here. please like this blog and go to github for the codes and please star the repository.

DEV Community: Gautam Anand

Javascript Sort: Simplified🧑‍💻

Is Javascript Sorting Simple?

Basics

Working of sort()

Solution

Writing our first compare function

Our Final Touch to sort() function.

Map, Filter and Reduce in Javascript 👨🏼‍💻

What are these?

map( )

filter( )

Filters what?

reduce( )

Then what is reduce?

Lets find the maximum in an array using reduce( )

Real Life Examples using Map, Filter and Reduce

map( ) tricky question

reduce( ) tricky question

Chaining filter( ) and map( )

Lets create a filter( )

Javascript Essentials 🧑‍💻

Introduction

What is Javascript

How does JS Works?

Hoisting

Undefined vs Not Defined

Eg undefined

Not Defined

Eg Not Defined

Temporal Dead Zone -

Example for Temporal Dead Zone

let v/s const v/s var

How to avoid temporal dead zone?

Block in Javascript

Example

Example

Scopes in Block v/s Global

How?

Proof

Shadowing

Illegal Shadowing 😵‍💫

Closures 😶‍🌫️

Tricky Interview Question on setTimeout and Closures

What if?

Identifying the problem

Fixing the problem

Fix 1: using let declaration

Fix 2: using closures or functions

Types of Writing Functions

Function Declaration

Function Expression

Parameters v/s Arguments

First Class Functions

Callback Functions in JS

Arrow Functions

Before

After

Working of `sort()`

Our Final Touch to `sort()` function.

Eg `undefined`

Eg `Not Defined`