DEV Community: Swastik Upadhye

Javascript : Interpretated or Compiled ?

Swastik Upadhye — Mon, 24 Oct 2022 18:39:52 +0000

Introduction

This is a long-debated question. The most of the community goes with the interpreted language. But what is interpreted language ? Does it fit entirely to the defination of interpreted language ? We are going to touch some of the key concepts : Compilation, Interpretation, Parsing, AST, etc. Let's find out one by one.

Compilation

The computer understands only 0s and 1s which is called as machine code. So at the final stage every computer program must be converted into this machine code.
The program or the source code written by the user goes through various stages and it is called either compilation or interpretation.

In the compilation process, the entire source code is converted into a machine code at once. And it produces a binary code which is portable that can be executed later on.

When it comes to Javscript we don't really see this kind of behaviour/mechanism right.

But this is not the pefect base reason that we can go for final conclusion.

Moreover, how Javascript handles the errors plays key role to conclude upon whether it is compiled or interpreted.

Interpretation

In the Interpretaion, there is an interpreter which runs and executes the code line by line. So program is running and executed at the same time.

So to simply it. Let us consider that we have 5 lines of code.
In the Interpretation, the code is being executed frome line no. 1 to 5 sequentially.
Now if there's an error due to change in value at runtime that cannot be detected early.

So does this conclude that JS is not an Interpreted language ?

Now it sounds so confusing and really hard to conclude right. We should understand what is parsing and what are parsed languages ?

Parsing

Some languages undergo through processing step before executing which is nothing but parsing.

So unlike Interpreted languages if there's any error at line no.3 It can be detected in the parsing phase itself before execution.

Now the big question is what is the difference between parsed language and compiled language.

It is to be noted that :

All compiled languages are parsed

When any program is parsed completely then after the parsing it outputs the program in a specific parsed form which is called as Abstract Syntax Tree (AST)

Let's consider the following example :

var a = 10;

Equivalent AST for above program :

Note : We can check AST generated for our source code here : AST

What happens in case of JS ?

We can observe that there is an early error detection mechanism when we try to execute the Javascript program
So this infers that Javascript program is being parsed before its execution.
Thus, Javascript is a Parsed Language
Now this parsed Javascript code is converted to some kind of byte-code by Javascript engine.
Furthermore this byte code is refined and optimized by JIT compiler and then Javscript VM executes it.

Conclusion

Although Javascript looks like an interpreted language at first glance.
It is clear now it goes through various phases as stated above.
Javascript is a mixed approach of Compiled and Interpretated Language.

Thank you for stopping by!. If you find it useful consider sharing it. You can connect with me here : LinkedIn

Understanding Slice Method In Javascript

Swastik Upadhye — Tue, 23 Aug 2022 18:33:00 +0000

Hey there 👋, I have explained Splice method in my previous post.
Here I am going to explain slice method with some examples.
Although there is not much difference in their names ( just an extra p , right ) but they differ so much in their mechanism or how they work.

Slice method does not mutate the original array.

Yeah, you have read it right. Unlike splice method, slice method does not change the contents of the original array.
Rather it returns a copy of the segment / fraction / slice of an original array ( more precisely a shallow copy ).

Take a look at syntax :

slice(start, end)

Note : start and end both can be optional.

To understand this we will directly jump into examples.
And for that we will start with simple scenarios

Now we can divide this in three parts :

slice without arguments : slice()
slice with start : slice(start)
slice with both start and end : slice(start, end)

Let's take a look at them one by one.

slice()

Example - 1

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice();
console.log(' result - 1 ', resultedArray);   // [1, 2, 3, 4, 5, 6, 7, 8, 9];

From the above example you might be wondering the original array and resulted array are exactly same.Then what the heck is the use of the slice method here.
Well it returns a copy ( shallow copy ) of an original array.
Following code block explains it.

let products = [ { id : 100 , productName : 'Mobile', manufacturer : { id : 1 , countryCode : 'USA'}} ,{ id : 101 , productName : 'TV'}, { id : 102 , productName : 'Washing Machine', manufacturer : { id : 2 , countryCode : 'CAN'}} ];

let resultedArray = products.slice();

console.log( ' products ', products);
console.log( ' resultedArray ', resultedArray);

// To check their equality 
console.log( ' Equality ', products === resultedArray ) // false

// To check the equality of child nodes ( nested keys )
console.log(' child node ', products[0].manufacturer === resultedArray[0].manufacturer );   // true

As we check for the equality of parent object, it clearly gives us indication that both the objects are not same.
When we check for the equality of nested objects, it indicates that both are same.

That means slice method does make a shallow copy.

slice(start)

Example - 2

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(2);
console.log(' result - 1 ', resultedArray);   // [3, 4, 5, 6, 7, 8, 9];

Here in the above example slice method gives a slice or the portion of the array that starts with specified index to the end of the array.
Nothing fancier right, but wait there are several use cases start can be +ve , -ve , zero & index out of bound.
Let's look at them one by one.

Example - 3

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(-2);
console.log(' result - 1 ', resultedArray);   // [8, 9];

When the start is specified as -ve integer then it will point from the end of the array and slice / gives the portion of an array till the end.

Example - 4

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(0);
console.log(' result - 1 ', resultedArray);   // [1, 2, 3, 4, 5, 6, 7, 8, 9];

When the start is 0. It simply creates a copy.

slice() <=> slice(0)

Example - 5

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(20);
console.log(' result - 1 ', resultedArray);   // [];

When the start is index out of bound ( i.e greater than array length ) then it will return an empty array.

slice(start, end)

Example - 6

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(2, 4);
console.log(' result - 1 ', resultedArray);   // [3, 4];

In the above example slice method gives us a portion of array starting from start index - 2 upto end index but excludes the element at end index
Thus we get elements 3 and 4 at the index 2 and 3 respectively ( we did not get element present at index 4 );

When the end is specified then element at that position is excluded in the resulting array after slice

Now another use case can be end can be -ve. I won't go in details for that as you might have got the idea if you have gone through above examples.

Example - 7

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(2, -4);
console.log(' result - 1 ', resultedArray);  // [3, 4, 5];

Thank you for stopping by!. If you find it useful consider sharing it. You can connect with me here : LinkedIn

The Most Powerful Array Method : Splice

Swastik Upadhye — Thu, 11 Aug 2022 17:39:00 +0000

Splice is one of the most powerful methods of Array. We can achieve following things using splice method :

Remove element/s from a specified index of an array
Replace element/s from an array ( Remove + Insert )
Insert element/s to an array

In short, splice method mutates the original array.

Take a look at syntax :

splice(start, deleteCount, item1, item2, itemN)

Note : Except start all others are optional )

To understand this we will directly jump into examples.

Removing Elements from an Array

Example - 1

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(2);
console.log(' result - 1 ', numbers);   // [1, 2]

What splice method does here is it removes all the other elements from the specified index ( i.e start as specified in syntax )
Now there are four possibilities : start - index might be +ve , -ve , zero , index out of bound

Example - 2

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(0);
console.log(' result - 1 ', numbers);   // []

Basically splice method removes all the elements from index 0.
That means ultimately it removes all the elements from the array.
We can conclude that we can empty the array using splice method.

Example - 3

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(-2);
console.log(' result - 1 ', numbers);   // [1, 2, 3, 4, 5, 6, 7]

When start index is specified -ve then splice method removes all the elements from the end of that array.

Example - 4

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(20);
console.log(' result - 1 ', numbers);   // [1, 2, 3, 4, 5, 6, 7, 8, 9];

When start index is specified greater than or equal to length of the array then no element is removed.

Removing N no. of Elements from an Array

splice(start, deleteCount)

Now along with the index from where we can start removing elements, we can specify exactly how many elements can be removed with the deleteCount as specified in the syntax.
Note that it's an optional.
Now we will take a look at the examples so that we can get an idea of it

Example - 5

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(3,2);
console.log(' result - 1 ', numbers);   // [1, 2, 3, 6, 7, 8, 9]

Here in the above example splice method will start removing 2 elements (2 - deletecount) from the start index i.e 3

Replacing Elements from an Array

splice(start, deleteCount, item1, item2, itemN)

We can replace the elements from an array i.e inserting and removing the elements simultaneously.
Take a look at following example you can clearly understand this

Example - 6

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(3,2, "a", "b", "c");
console.log(' result - 1 ', numbers);   // [1, 2, 3, 'a', 'b', 'c', 6, 7, 8, 9]

Here, in the above example from index 3 ( i.e start - 3 ), 2 elements ( i.e delete count - 2 and elements : 3 & 4 ) are removed and "a", "b" and "c" are added.

Inserting Elements into an Array

This can be easily achieved by keeping delete count 0

Example - 7

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(3,0, "a", "b", "c");
console.log(' result - 1 ', numbers);   // [1, 2, 3, 'a', 'b', 'c', 4, 5, 6, 7, 8, 9]

I suppose this example doesn't need an explanation if you have gone through previous example.

Return value

Sometimes we need to keep track of exactly which are the elements are removed.
When we splice on an array then, it returns an array of deleted elements.
Take a look at this example :

Example - 8

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let deletedArray = numbers.splice(3,2);
console.log( " -- deleted arr --- ", deletedArray); // [4, 5]

Take a note of it, if no element is removed from an array then empty array is returned

Thank you for stopping by!. If you find it useful consider sharing it. You can connect with me here : Linkedin

Sorting In Javascript | How it works under the hood ?

Swastik Upadhye — Sun, 24 Apr 2022 10:09:00 +0000

Introduction

You might have guessed from the title what I'm going to talk about in this post. Sorting is one of the most popular and often used methods.

Sort() method sorts the elements of an array and returns an array in a specific sorted format.

Take a look at the following example.



let animals = [ "Zebra", "Bear", "Kangaroo", "Giraffe", "Lion", "Tiger", "Dog" ];
animals.sort();
console.log(animals);

// Output :  ['Bear', 'Dog', 'Giraffe', 'Kangaroo', 'Lion', 'Tiger', 'Zebra']

Oh! That's super easy 😄!

Now take a look at the following example.



let numbers = [ 1 , 50, 101 , 4 , 90 , 40 , 1000, 78 , 9 ];
numbers.sort();
console.log(numbers);

// Expected  Output :   [1, 4, 9, 40, 50, 78, 90, 101, 1000]
// Actual Output :   [1, 1000, 101, 4, 40, 50, 78, 9, 90]

Oh wait!😳 What did we get here?

Let's find out!🧐

From observation, one thing is clear that if the array contains the elements with string data type only, they are being sorted in ascending order.
Basically, what happens behind the scene is each element in an array is converted into string and then UTF-16 code equivalent value of them are compared.
Just to make it simple, look at the following diagram :

Now we get to know that why in the second example the output was so wierd.
Because we were not aware about the things happening under the hood.

Sort with Compare function

Also, there is an another form wherein sort methods can accept a callback function which is known as compare function
The compare function accepts two parameters ( e.g a & b ), and compare these two values.
If it is returning positive integer then it places b before a.
If it is returning negative integer then it places a before b.
If it is returning zero then it keeps the order as it is.

Now we will try to write a function for sorting an array which contains numbers.

Using Inline function

Using Arrow function

Using short-hand version

Return value :

sort() method works on the principle place-in algorithm.
It returns the reference of the original array.

That means if we try to change the returned array it will also change the original array as well.

Take a look at the following example :



let numbers = [1, 5, 6, 7, 2, 3, 4, 8, 9 ];
let sortedArray = numbers.sort((a, b) => a - b);

console.log( " numbers : ",numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log( " sortedArray : ",sortedArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9];

// To check the same reference 
console.log( numbers === soretedArray); // true

Application :

Earlier, In one of my Interviews I have been asked to write a program and the problem was :

//Given a list of non-negative integers, arrange them in such a manner that they form the largest number possible. The result is going to be very large, hence return the result in the form of a string.
// Input:
// 3 30 34 5 9
// 546 54 60 548

// Output: 9534330;
// 6054854654;

Thank you for stopping by!. If you find it useful consider sharing it. You can connect with me here : LinkedIn

Array : Reduce method ( How it works and its applications )

Swastik Upadhye — Sat, 19 Mar 2022 15:53:19 +0000

Introduction

As the title suggest we are going to discuss one of the most widely used array methods : reduce

The word itself describes that it reduces the input value to single output value. Let us see how it works!

It iterates over each element in an array from left to right
It accepts a callback function which has following parameters accumulator , currentvalue , index ,array and an optional intial value. ( although it is optional but it's a best practice to use it )
Syntax :

reduce(function(accumulator, currentValue, index, array) {
   /* function-body */
}, initialValue)

accumulator (a) - it is the return value in last iteration or initial value

currentvalue (c) - it is the value of the current element in the current ongoing iteration

index - it is the index of the current iteration

array - it is an input array on which we are providing applying the reduce function

initialValue - it is the starting value that is to be returned to the accumulator in the very first iteration

Now enough theory let us take a look an example. In this example we are going to calculate the total of all the numbers given in an array of numbers.

let arr = [ 1, 2 ,3,4,5,6,7,8,9,10];
const sum = arr.reduce((accumulator,currentvalue) => accumulator + currentvalue,0);
console.log("Sum : ",sum);

In the above example on the very first iteration, the value of accumulator is the initial value i.e 0 and current value is 1.
Thus it returns 0 plus 1 resulting 1 and accumulator value becomes 1. ( as we have provided addition logic )
Now in the next iteration, the value of accumulator is 1 and currentvalue is 2 so the next value of accumulator results into their addition as 3
This goes on till last iteration and the accumulator values is returned.
Take a note that we can provide any logic as per our need inside the function body. And also, we can provide any initial value.

Some of the practical use cases where we can use reduce function are :

create string from an array of characters.

Find max. value in a given array of numbers

Find the array of names for the given array of employees whose age is > 40

Find the frequency of same aged users from given array.

Thank you for stopping by. If you find it useful consider sharing it. You can connect with me here : linkedin

Array : Different ways to Remove Duplicates

Swastik Upadhye — Sat, 19 Mar 2022 14:20:25 +0000

This is a very short article which covers a common use case we come across in our day to day coding. We often want to remove duplicate values from an array. Let's see!

Examples

Thank you for stopping by. Let me know any other way to deal with it. Let's connect on : Linkedin

Dealing with Asynchronous data : Async - await

Swastik Upadhye — Sun, 23 Jan 2022 20:12:32 +0000

Welcome to the world of JS! As we have discussed in my previous post about how we can handle asynchronous data using Promises. If you are new to promises then I will highly recommend to check my previous post here : Promises. We are going to continue this discussion further a next step. ( Hopefully a last one on handling async data 😊 )

What is the need ?

Consider the example shown in the code snippet below.
Now open your code editor or console window in browser and try to write the code as below and hit enter.

Are you surprised to see the logs on the screen ?
Well don't worry I am going to cover it briefly here why this happens. ( For those who cannot access editor right now or as lazy as I am 😉 , take a look at screenshot below)

We can see that the order of the logs printed is not in the order that we are expecting.
But why this happens ? To answer this question we should have known that how Javascript handles settimeouts and promises behind the scene and a concept called event loop.

You can skip this part 👇 if you are a beginner

Brief Explaination for those who are curious 🤔

For those who are well aware of event loop, just note that event loop continuously monitors the callstack and checks the macrotask queue as well as microtask queue.
settimeouts come under macrotask queue while promises come under microtask queue
When there is nothing to execute in the main thread and call stack is empty then microtask queue gets the priority and gets executed and after that macrotask queue gets executed.
I know this is just too much in 2-3 lines to digest. If I try to explain it in details then this post will become too lengthy.
So it is clear from the logs that sequential execution isn't possible.
This problem is resolved by async functions with the use of await.

Async Functions

We can add async keyword to a normal function sothat it can return implicitly the promise rather than value.
Check out the following code snippet :

We can handle promises by chaining with then method if resolved or by chaining with catch method if rejected.
Now our goal is to wait till response come from the promises either resolved or rejected.
To achieve this await keyword has introduced.

Using await

When we add await keyword before a promise then the execution pauses here till the promise gets resolved or rejected.
Let us see an example shown in the code snippet below :

In the above code example, there are three tasks : task1 , task2 & task3 which take 10sec,3sec & 1sec respectively to complete.
When the async function getTaskData is invoked then it encounters task1 and waits(10sec) to resolve the promise and then after moves to task2.
Again it waits( 3 sec ),after resolving task2 it is moved to task3.
And at last, task3 gets resolved after 1sec
This way synchronous behaviour is achieved.

Handling Errors

We can make use of try-catch to handle the errors
Consider the following example for the sake of understanding

Takeouts

It's an extension of promises.
They make asynchrounous code look like synchronous.
async function always returns a promise.
We can make use of try-catch to handle the errors.

Thanks for reading the article!!!.Feel free to drop me here if you have any doubts or suggestions! You can connect with me here : Twitter & LinkedIn

Dealing with asynchronous data in Javascript : Promises

Swastik Upadhye — Sun, 16 Jan 2022 20:33:00 +0000

What is Promise ?

Well, we use this word in our daily life so many times. We often make promises to ourselves , sometimes we keep them and sometimes break them 😉. Does it have the exact same meaning when it comes to Programming ?

Well, sort of!. To make this understand we should recall what is the purpose of handling asynchronous data. In an asynchronous manner, what we are doing, first we complete the primary task and then only we try to accomplish susequent task.Here, primary task is a kind of a promise. Now, let us find out how are they exactly behave in programming context.

Promise

Promise is an object that produces a single value either resolved or rejected ( make them / break them )
Promise has three states : Pending , fulfilled & rejected. They are eager i.e as soon as we call promise constructor, it starts the given task.
It accepts two functions : resolve & reject
Promises are thennable i.e we can execute the subsequent task using then method.

In the above code example, we are going to perform one of the two actions depending on the lock down status.
If there is no lockdonwn then we can go for a trip otherwise we have to sit in our home.

Now, take a practical example. A user is trying to sign in a website. Here, authentication api is called if it is going to return a token then only user is allowed to see dashboard.

Promise Chaining

If we are having multiple asynchronous tasks which depend on one another then we can chain them using then method
As promises are thennable we can chain n number of promises one after another.

Handling Errors

Errors can be occured because of multiple factors. So it is neccessary to handle them rather than providing a broken page.
Promises do have a catch method. We can chain it to promise object.
The code example shown below illustrates that if there's an error then he/she will redirected to the signup page.

Advantages & Drawbacks

We don't need to nest the functions one into another, as it is done in the callbacks.
It improves the code readability and provides a better way of handling errors.
As promises are eager, once fired we cannot cancel them.
The programming execution doesn't stop at the moment until the promise is received. The program continues to run further line by line.
Also, still the code doesn't look synchronous.

Problem

In one of my Interviews I have been asked to write a promise.
Problem statement :
Write a promise if it is having number then it will resolve as number else reject as NOT a number

function getPromise(value) {
  return new Promise((resolve, reject) => {
    if (typeof value === 'number') {
      resolve('I am number!');
    } else {
      reject(' I am NOT a number!');
    }
  });
}

getPromise("abc").then((res) => {
  console.log('Resolved -------', res);
}, (err) => {
    console.log(" Rejected -----",err);
});

So to overcome the drawbacks, async-await is introduced
We will see what are they and how they work in the next blog.

Thanks for reading the article!!!.Feel free to drop me here if you have any doubts and suggestions!

Dealing with asynchronous data in Javascript : Callbacks

Swastik Upadhye — Sun, 02 Jan 2022 17:22:52 +0000

First of all, let us understand what is the meaning of word asynchronous in programming context.

Asynchronous

It is a behaviour when the program is being executed and the thread will not wait till the execution of the previous line is completed is asynchronous. ( synchronous meaning procedural one task is done then and then only another is taken)

Different ways to handle async data :

Callback
Promise
Async-await

In this article, I am going to discuss callbacks briefly.

Consider the below example, in which user is going to make a request on server to create a student and then trying to get all students.

Normal Approach

(For the sake of simplicity, I have mimicked the server request by adding setTimeout.)

let stdList = [];
function getStudents(){
   setTimeout( () => {
    return stdList;
   },3000);
}

In the above code snippet, the user is making a request to get the data from a server which is going to take some time ( 3 sec ) for completing it.

function createStudent(stdObj){
   setTimeout( () => {
     stdList.push(stdObj);
   },5000);
}

In the above code snippet, the user is trying to create a student i.e writing on the server which is going to take more time ( 5 sec ) for completing it. ( Generally, this much time doesn't take in reality but for the sake of understanding I am considering this )

let stdObj = { name : "Ayush" , age : 16 , nationality : "Indian" }
createStudent(stdObj);
getStudents();

To achieve this goal, if we go through conventional method by making one by one requests as shown in above code snippet.
After analyzing the result, the chances are very low that you will get exact output as expected.
Because write operation takes time than get operation. When we make request to the server for write operation, Javscript doesn't wait and it moves to next line and tries to execute.

So, to avoid this, callbacks plays an importantant role.
Let us understand what the heck callback is ? To understand this we need to have some basic knowledge of so called ~~functions~~ in Javascript ( which is the ❤️ of Javascript )

Callback (Callback Functions)

In JavaScript, functions are objects.
Functions are the first class citizens.
That means we can assign a function to a variable, we can return a function from a function, we can pass a function as an argument while calling a function, we can pass function as a parameter.
That means we can assign them to variables or can pass them to another function as a parameter.

Callback function : Function which is passed as an argument to another function and executed later on is called a Callback Function.

Higher Order Function : The function which takes another function as a parameter ( or a function that returns another function ) is called the Higher Order Function.

With Callback

function createStudent(stdObj,callback){
   setTimeout( () => {
     stdList.push(stdObj);
     callback();
   },5000);
}

createStudent(stdObj,getStudents);

Here, we are passing a function to another function : function getStudent is passed to the function createStudent which is totally valid in Javascript.
Now after the execution of the createStudent when we get response we are calling the getStudents ( i.e callback);
By this way, we get exact data as we expected.

Drawbacks

But wait! What if we have scenario wherein we are making multiple requests one after another. Is it feasible to go with this approach using callbacks?
The answer is big NO. Because we have to nest functions one into another which is not handy.
It is called as callback hell ( Pyramid of doom )
Moreover, it is not easy to debug the code and it's a very bad practice.
As complexity increases this can create problems.

So to overcome the drawbacks of callbacks, Promises are born.
We will see what are they and how they resolve the problems caused with callbacks in the next blog.

Thanks for reading the article, hope this will help you clear your doubts.Still if you have doubts or suggestions feel free to drop me here : LinkedIn