Forem: Geo Mukkath

Explaining JavaScript closures in one simple program. 3 minute read.

Geo Mukkath — Thu, 08 Dec 2022 03:02:11 +0000

Closures are nothing but functions plus it’s lexical scope.

Let’s look at an example to understand closures.

function outer(){

  let a = 5;
  function inner(){
    console.log('inner', a);
  }
  inner();
}

outer();

//prints 'inner', 5

Here we have a function called outer.

We have an inner function called ‘inner’ which simply logs inner with a variable a.
The variable a is declared outside the inner function.

We call inner inside the outer function.

When we call the outer function it simply prints the log. That’s simple.

I’ve modified the code below. Now think of an answer.

function outer(){

  let a = 5
  function inner(){
    console.log('inner', a);
  }
  return inner;
}

let y = outer();

y();

It prints the exact same thing.

I have declared a variable y which stores the outer function and I call y later.
Here when I return inner, the value that get stored in the variable y must only be inner.
How does it remember a ? a is outside inner, despite that it remembers a.

This is called closure. The closure of inner is the function itself + its lexical scope.

JavaScript callback functions explained in plain English

Geo Mukkath — Tue, 06 Dec 2022 03:05:38 +0000

In simple language Callback functions are just functions that take another function as it’s argument. That’s it.

Let’s take a small example to better demonstrate what I am talking about.

function calc(add){
    let a = add + 3;
  console.log(a);
}

const add = (a,b) => {
    let sum = a + b;
  return sum;
}

calc(add(2,4));

Here I have two functions

calc and add

Let’s first talk about add.
The add function adds two values and returns the value.

The calc function takes an argument and whatever the argument returns, it adds 3 to it.

The add function over here is the callback function. We are calling add here as a parameter inside another function. This fits the the definition of callback functions.

We can also pass anonymous functions as callback functions.

function sayHello(hi){
    console.log('Hello');
  hi();
}

sayHello(function(){
 console.log('hi')
})

Output: 
hello
hi

sayHello passes an anonymous function.

We use callbacks often without even knowing it. Consider the setTimeout function.

setTimeout uses the callback function like so

setTimeout(() => {console.log('Inside a callback')},3000);
// logs 'Inside a callback' after 3 seconds

Here setTimeout prints ‘Inside a callback’. This too was a callback function that too an anonymous one.

Imagine if callback didn’t exists. We wouldn’t be able to make asynchronous behavior without it.

All of JavaScript's array methods you should know

Geo Mukkath — Mon, 14 Nov 2022 02:46:04 +0000

.length()
Gives us the length of the array.

let items = ["pen","paper","pencil"]

console.log(items.length);// 3

.concat()
Exactly the same as the strings concat method.

let items = ["pen","paper","pencil"];
let grocery = ["bread", "milk", "eggs"];

console.log(items.concat(grocery));

//["pen", "paper", "pencil", "bread", "milk", "eggs"]

We don not have any ‘+’ concat method for arrays

.every()
In every method, each element of the array must pass the condition in a function
The syntax here is array.every(function_name)

let items = ["pen","paper","pencil"];

function isString(item){
    return typeof item === 'string';
}

console.log(items.every(isString)); // true

let items = ["pen","paper","pencil", 23];

function isString(item){
    return typeof item === 'string';
}

console.log(items.every(isString)); // false

.fill()
The fill method as the name suggests fills the array with the item that has been passed

let items = ["pen","paper","pencil","glue","scissors"];

console.log(items.fill("crayon", 1,3));// ["pen", "crayon", "crayon","glue","scissors"]

console.log(items.fill("crayon", 1)); // ["pen", "crayon", "crayon", "crayon", "crayon"]

console.log(items.fill("crayon")); // ["crayon", "crayon", "crayon", "crayon", "crayon"]

const arr = Array(10).fill(20);

console.log(arr); // [20, 20, 20, 20, 20, 20, 20, 20, 20, 20]

Here the index 1 upto 3 (excluding 3) are filled with the string entered.

.filter()
In the every method we check if every element in the array passes a particular condition.
In the filter method we return the elements which pass a particular condition.

let items = ["pen","paper","pencil","glue","scissors"];

const new_items =  items.filter((item) => item.length > 4 );

console.log(new_items); // ["paper", "pencil", "scissors"]

In the above example we can see new_items return an array where each element has a length greater than 4.

.findIndex()
findIndex simply finds the index of the element in the array.

let items = ["pen","paper","pencil","glue","scissors"];

const new_items =  items.findIndex((item) => item === "paper" );

console.log(new_items); // 1

.flat()
The flat method is used to flatten an array. What do you mean by flattening an array ?
Flattening an array simply means that if you are presented an array like so

let arr = [1,2,3,[4,5],[6,7,[8,9,10]],11,12];

console.log(arr.flat()); // [1, 2, 3, 4, 5, 6, 7, [8, 9, 10], 11, 12]

One thing we can observe here is that .flat() only flattens one level deep. The array [8,9,10] is still present in our output because it’s 2 levels deep.
In this case we can do the following

let arr = [1,2,3,[4,5],[6,7,[8,9,10]],11,12];

console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

When we specify a number as an argument inside flat() we can go as many levels deep as we want. But what if we don’t know how deep the array is. In that case we can use a recursive function to solve that problem. Pls refer below:

let arr = [1,2,3,[4,5],[6,7,[8,9,10]],11,12];

const result = [];

function flattenArray(arr){
arr.forEach((ele) => (Array.isArray(ele) ? flattenArray(ele) : result.push(ele)));
return result;
}

console.log(flattenArray(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

.forEach()
forEach() literally iterates through each object in the array

let items = ["pen","paper","pencil","glue","scissors"];

let arr = items.forEach((item) => console.log(item)); 

//
"pen"
"paper"
"pencil"
"glue"
"scissors"

.from()
.from creates a shallow copy of an array.

let items = ["pen","paper","pencil","glue","scissors"];

let items2 = Array.from(items);

console.log(items2); // ["pen","paper","pencil","glue","scissors"]

Here items2 is a shallow copy of items.

console.log((items === items2)) // false

.isArray()

.isArray() is used to check if something is an array.

let items = ["pen","paper","pencil","glue","scissors"];

console.log(Array.isArray(items)); // true

.flatMap()

The .faltMap() method is going to do two tasks of .flat() and .map()

let arr = [1,2,3,[4],6,7,8,9,10,11,12];

console.log(arr.flatMap((e) => e * 2)); //[2, 4, 6, 8, 12, 14, 16, 18, 20, 22, 24]

As seen above we now have a flattened array with the operation done on each element.
Pls note that the flatMap() only flats arrays with one element in it.

.reduce()

The reduce method in JavaScript reduces an array into a single value.

let arr = [1,2,3,4];

console.log(arr.reduce((sum, val) => {
return sum + val
})); // 10

here reduce() takes two arguments sum and val. val is each value of the array and then it foes the operation inside the curly braces. Later it stores it to sum.

.includes()

.includes() checks if an element is present in an array.

let arr = [1,2,3,4];

console.log(arr.includes(2)); // true

.reverse()

The .reverse() method is used to reverse an array

let arr = [1,2,3,4];

console.log(arr.reverse()); // [4,3,2,1]

.some();

.some() is the opposite of .every()
If some of the conditions (at least 1) returns true for the condition, the return true.

let arr = [1,2,3,4];

let result = arr.some((e) => (typeof e === "number"));

console.log(result); // true

.sort()

.sort() is used to sort the array. It mutates the original array.

let arr = [12,5,1,6,4];

arr.sort((a,b) => {return a - b });

console.log(arr); //[1, 4, 5, 6, 12]

.splice()

The splice() method is used to delete and replace array elements.

The syntax for splice() is array.splice(startIndex,#ofItemsToDelete, item1, item2, item3);

let arr = [1,2,3,4];
const deletedItems = arr.splice(0,2,5,6,7);
console.log(deletedItems); //[1, 2]
console.log(arr); //[5, 6, 7, 3, 4]

Here the start index is 0, we are deleting 2 items and replacing it with 5,6,7 and 8.
We get the deleted items array and as mentioned earlier we get the mutated array.

Follow Geo Mukkath for learning advanced JavaScript in plain english.

The super-confusing proto vs prototype in JavaScript DECODED

Geo Mukkath — Thu, 10 Nov 2022 14:53:27 +0000

Always remember this.
.protoype can only be used on functions. Period.

Let’s say we have a constructor function called as myInfo

function Info(name,age) {
this.name = name;
this.age = age;
}

We are making a new object with our constructor function called geo.

let geo = new Info('Geo',26);

Now if we console log this we will get our object geo

And you can see that we can access the name and age property.

We can look at the prototype of our object geo using proto

Now try typing geo.prototype in your console

You won’t find an option called prototype.

Now I just want to re-iterate the fact that we can only use prototype on a function.
Since we are using a constructor function let’s use it on that.

If we type Info.prototype we will get the following

This is exactly same to geo.__proto__

Carzy isn’t it ?
We can even check if they are the same

But what if, what if we want to add a function to our geo object (technically a method) ?

We can easily do that with

geo.__proto__.hi = function() {console.log('hi')};

The problem comes when we have many such objects

Say we have

let john = new Info('John',20);
let sheila = new Info('Sheila',24);
let gary = new Info('Gary',27);
let kate = new Info('Kate',25);

We we would have to attach the hi function to each and every of our new objects we have created above.

Instead why not just use the prototype of the constructor function.

Just a side note… When we think of .prototype we might have this tendency to think that it shows the prototype, yes it does but logically speaking it is actually like function.customPrototypeIAmMaking

So lets make a sayHello function for Info

Info.prototype.sayHello = function () {console.log(`Hello I am ${this.name}`)};

No matter which object you create with the constructor function Info, you’ll always have access to the sayHello.

JavaScript Compiler theory and how it relates to scope

Geo Mukkath — Fri, 28 Oct 2022 02:47:19 +0000

JavaScript is a COMPILED language.

This will throw a lot of interviewers off their seats but that's a fact.
JavaScript compiles code and executes it on the spot, giving users the illusion that it's an interpreted language.

In the following lines I will give you a glimpse of what happens behind the curtains but more importantly I will be going deep on how all of this is tied to scope.

There are 3 concepts which you need to know before we proceed further.

1.Tokenizing

Think of tokenizing as breaking down each and every element in a piece of code.

For eg. let a = 5; can be broken into various elements namely
let, a, =, 5 and ;
Each element here is a 'token'.

Simple ? Ain't it ?
Onto the next step.

2. Parsing

During Parsing the tokens are parsed into a tree like nested structure. It's called an AST (abstract syntax tree).

The AST for our example let a = 5;can be represented something like this:

3. Code generation

Code generation is pretty simple (to understand).
During the code generation step the AST is turned into executable code. Which basically means that the variable a is created by allocating memory, the assignment process and all the charade that follows takes place in code generation.

Now back to where we left off.

JS code execution process

Engine

Complier

Scope

Engine being the manager does only tasks which are demanding. It often outsources some of his work to the compiler and the scope.

When a piece of code is executed, it's the compiler's job to perform tokenizing.
Again, considering our previous example let a = 5; it would look something like this.

After this process it parses the code into AST. (Parsing)

Now the next logical step would be code generation. Here's the catch. The complier now goes to the scope and asks if there is a variable called a already declared within the scope. If yes, the compiler proceeds to the next step. If not, then the compiler asks the scope to declare a variable called a. I like to think of the scope as a benevolent bouncer in a night club. It keeps a list of all the guests and if he encounters a stranger he just adds them to the list.

Once a is identified, the compiler hands over the code execution part to the engine. This is why I had stated that the engine does the heavy lifting (which includes creating memory, assigning value etc).

Before engine takes the helm, it asks the scope if a is accessible. If yes then it proceeds with it's usual routine of creating memory and assigning the value 5 to a and so on. If not, then it will spit out an error.

The below diagram summarizes the whole process

Remember I told you that the engine asks the scope if it can access the variable?
There are two ways it looks if the variable is accessible.

LHS and RHS.
Left hand side look up and Right hand side look up.

A lot many folks in the industry confuse it as looking on the left of the operator and right at the operator. That's just not true.
I'll show you a trick to identify which is LHS and RHS look-up very easily.

IMP!

Wherever you are assigning/passing data it is an LHS look up.
Wherever you are retrieving data it is an RHS loop up.

To get a better understanding consider the example below. Let's start small. We will build up from there.

Eg 1.

let a = 5;

Here we are simply assigning the literal value 5 to a variable a.

Now go back to the earlier statement and figure out which look-up this is.

Ans.
LHS.
Why ? Cause it's an assignment.

Eg 2.

function foo(a){
  console.log(a + 3);  
}

foo(5);

Ans.
Here foo(5) is RHS and foo(a) is LHS and a in a + 3 is RHS.
a is retrieved in the latter 2 cases.

That's it folks!
JS compilation and execution is far more complex than what I have described. I have given a high level view on the subject, the rest is out of scope for this post (no pun intended).

How would you explain JavaScript functions to a 5 yr old ?

Geo Mukkath — Thu, 20 Oct 2022 02:09:03 +0000

JS Functions

Say you need someone to fix your pipes at home.
Whom would you call ?
A plumber!

What does a plumber do?
He fixes pipes, drains and deals with everything related to your water connection.

Say you need someone to teach you math.
Whom would you call ?
A math teacher!

What does a math teacher do ?
She teaches everything relating to math like adding, subtracting , dividing and all the other good stuff.

Say you need a
.
.
.
.
.
.
.
.
You get the point.

In JavaScript a function is a reusable piece of code that does a very specific task and it can be called anytime during the execution of the program.

So in the case of our plumber it would look something like this

function plumber(){
console.log('I am here to fix your commode');
}

plumber();

What I have done above is called as a function declaration.
I have declared a function called plumber in line 1 and subsequently in line 2 the function does whatever it is supposed to do.

Declaring a function is not enough. Functions are reusable, hence we can call them anytime we need them.

Back to our scenario. The plumber for whatever reason has forgot to bring his equipment to work. Fortunately you have a spanner, hammer and a plunger at home. You give him the equipment.

In programming it's called 'Passing the arguments'

How would you do that? Simple. Pass them when you call the plumber.

plumber(🔧,🔨,🪠)

He will use the above equipment to fix your commode.

function plumber(🔧,🔨,🪠){
🔧 + 🔨 + 🪠= 🚽
console.log('I am here to fix your commode');
}

plumber(🔧,🔨,🪠);

A little post on JS loops

Geo Mukkath — Tue, 18 Oct 2022 02:42:09 +0000

Loops

Loops in its most simple sense is a piece of code that can run until a particular condition is met.
Say you are at an event and tasked to hand out name tags to visitors. There are only 50 name cards you are allowed to distribute cause the venue can only support 50 guests. In such a scenario once you hand out the 50th name card, you withdraw from distributing any cards further.

Now since you are a Software Engineer the event managers ask you to build a program that can be used in a machine to do the exact same task. How would you go about it ?

JS offers a couple of ways all coming under the concept of loops.

The while loop

The while loops simply states that as as long as the condition is true - keep running.

The syntax is as follows:

while(true){
console.log('Truthy runs')
}

To illustrate the above example we would use the while loop as follows:

let no_of_guests = 1;

while(no_of_guests <= 50){
let name = prompt('Pls enter your name: ');
console.log(name);
no_of_guests += 1;
}

Let's break it down line by line with a pseudocode.

1.START

2.Initialize the no. of guests to 1.

3.While the number of guests is less than or equal to 50 do the following
*Declare a local variable called name and ask the user to input his/her name.
*print the name in the console
*Increase the count of the guests by 1

4.END

The Do While loop

The do while loop in it's simplest sense means, run it once and keep checking if the condition is met, if it's not - stop.

The Do while loop is very similar to the while loop except that there is one slight difference.

Have a look at the syntax and try figuring out:

do{
console.log('Whateva');
}while(condition);

Back to our example, say there's a vip guest coming in and by convention you think that there's no need to check the guest list to let him in.

In that case the do while loop is useful.

let no_of_guests = 1; 
do{
let name = prompt('Pls enter your name: ');
console.log(name);
no_of_guests += 1;
}while(no_of_guests <= 49);

Pseudocode:

1.START
2.Initialize the no. of guests to 1.
2.Do this
*Declare a local variable and ask the name of the user.
*Console log the name.
*Increase the count of guest/s by one.
3.While this condition is true keep doing running step 2.
4.END

NOTE: Here we check if the no_of_guests is less than or equal to 49 cause the total number cannot exceed 50.

The For loop

For loop in its simplest sense is divided into 3 functions - To initialize; to check a condition; to re-calculate count.

It's the most used and common loop you will encounter out of the three listed.

The Syntax is as follows

for(declare variable; check condition; re-calculate count){
// do something amazing 
}

Four our name tag example the for loop would look something like this:

for(let i = 1; i <= 50; i ++){
let name = prompt('Pls enter your name: ');
console.log(name);
}

The for loop is popular over the other two because of it's conciseness.

Pseudocode:

1.START
2.let i be initialized to 1
3.Is the condition met ?
*If yes then initialize name to what the user inputs.
*Print the name in the console.
4.END

Day 0 - JavaScript - Statements, Expressions

Geo Mukkath — Sun, 25 Sep 2022 16:54:28 +0000

In the beginning there was code

A series of instructions that can be tell a computer to do stuff is code. I am all against text-book definitions. The ability to build stuff out of thin air is perhaps a superpower and programming/coding enables us to do just that.

Statements

A statement is a line of code that tells computer to do a specific task.

In JavaScript, you might encounter such statements.

x = y + 5;

The above is a statement in JavaScript. Let's distill it down to the very basics.

Now we can see that we have used letters, x and y. These are variables. Think of variables like buckets where you can store a value (Same as the ones we use in algebra).

The number 5 is quite literally 5. Its called a literal value ( No pun intended.) The = and + symbols are operators. + is used for addition and = is the assignment operator.
The statement simply adds the value 5 to whatever the value of y is and assigns it to x.

Expressions

A group of expressions make a statement.

a = b * 2;

Here there are 4 expressions here,

2 is the literal value expression.
b is the variable expression.
b * 2 is the arithmetic expression.
a = b * 2 is the assignment expression.

Please note that b * 2 is also an expression and can independently be a statement at the same time.

There is also something called a call expression which we will encounter in further posts.

Is JavaScript Compiled or Interpreted?(IMP!)

This is a common interview question and one that is widely misunderstood. You'll see that many blogs and videos on the internet talk about JS being an interpreted language. Before we look into that let's talk about interpreters and compliers, just to give some context for budding programmers.

As seen above x = y + 5 is easily understood by a human. But underneath the hood the computer translates the code to what it can understand. Some computer languages run the code top to bottom, line by line - this is called 'Interpreting' the code.

There are other computer languages where the translation is done ahead of time. Hence, when the program runs, it actually runs the compiled code.

JavaScript in reality uses a compiler, which goes against the popular notion that it is an interpreted languages. It compiles code and immediately runs the compiled code.

Starting coding with a basic statement

Type the below code in the console (Or use jsfiddle):

a = 5;
b = a * 4; 
console.log(b);

Assign the literal value 5 to the variable a.
Now multiply the literal value 4 to whatever the value of variable a is (in this instance, 5) and assign the product to the variable b.
Print the value of b. (We will be discussing console.log() later)

You will get an output 20.