Forem: Ashik Patel

How JavaScript works ?

Ashik Patel — Thu, 01 Dec 2022 21:51:22 +0000

Hey, let's talk about how JS works.

To the very base level every single execution that happening in JavaScript is happening inside the 'Execution Context'. It is responsible for executing the code line by line with the available context. Before going further, consider the following illustration to get good idea of how execution context look like and works.

You can assume execution context as a container having 2 parts.

Code also known as thread of execution
Memory also known as variable environment.

Code is basically a place in execution context where generally our JS code resides. It will make the program line by line and so that is why JavaScript is called as single threaded language. In addition to this, JavaScript also executes the code in specific manner or way, it is called single threaded synchronous programming language as well.

Memory is responsible for storing variable, functions and etc. While executing the program, JS will consume these variables and functions from the memory. Most importantly all of these stored variable, functions and etc are being stored as a key value pair.

So this is how JS works basically.

forEach VS Map.

Ashik Patel — Thu, 01 Dec 2022 00:58:24 +0000

Let's keep it on point. JS has few methods for the Array to find or search or iterate items through particular Array. Here we want to discuss 2 mostly and widely used methods,

forEach
Map

Basic definition and example

forEach method can be used to iterate through an Array. This method will be provided with a callback function, which will be called for each and every item available in Array. An Important point to remember is that, forEach does not return an array, in fact it returns 'undefined'. So if you my man working on some logging or processing which does require every item of an array and does not required anything in return you should consider this method as your to-go tool. let's take an example.

let's now see what's that returnedValue is holding. any guess ?

Now, map method works same as the forEach but the major difference is that it returns the same length of the newly created array as on array it is being called. Means it does not return 'undefined' as forEach do, but it returns modified array according to the callback function of the same length. In addition to that, the callback is invoked for every items available in an element. You can always use this method when you want to do some processing or modification on every item of an array and use that newly created array further. example is given below.

Chaining ability.

wait wait wait, what the heck is that? well, in simple terms as you are now absolutely clear that forEach does not return anything and returning just 'undefined', it is not able to perform chaining operations like reduce, sort and etc. But but but, map is returning an array based on the callback modifications, we can chain methods on it. See it is that simple

When to use what ?

I will say you will encounter an 'Anti-Pattern' if using map and getting array in return, and for serveral reason you stupid dev does not want to use it further. So if you really do not need to use returned value please please go for forEach.
vice versa is also fine.

Performance ?

Well, depends on the several factors I do not want to dig into it.

Array.from VS Array.prototype.map

Ashik Patel — Tue, 29 Nov 2022 18:06:21 +0000

Hello there,

let's discuss these 2 amazing methods or functions in a proper context and get to know each of them.

Array.From(arrayLike) is a static method which can be used to create an array from any sort of array-like non-array object in order to perform any available instance method of Array.prototype. Not clear yet ? stick with me I will try to make it clear.

Array.prototype.map is a instance method which also works similar to the Array.from but it is only working with instance of the Array.

Consider the following examples.

Output:

Here you can see, the output is same but the internal working is a bit different.

From the above example we cannot use Array.from as instance method on any array. Same goes for map, we cannot perform map method on Array class itself.

i.e

When we consider map, it will work only on instance of an Array.

i.e

so now is it possible to create a whole new array with the Array.from ? Yes you can do the above with the following code.

Important

*Now since you're able to create a whole new array with the use of Array.from method, you can perform all the other Array.prototype methods such as sort,push,append,pop and etc with newly create an array. *

Array.from is really helpful when you are working with very large and complex project. it helps to prevent any breakdown while dealing with array methods when sometimes your incoming data or response looks like array but it is non-array object. In this case one can always double check and create an actual Array to perform other useful array methods.

P.S Scenario is based on my own working project.

Thanks

Object Oriented JavaScript & More ! [ Part 1 ]

Ashik Patel — Sat, 26 Mar 2022 03:55:53 +0000

Hey There!

Let's talk about JavaScript and Object-Oriented Programming. Huh? Oh yes. Everything in JS ( I will use JS as an alias for Javascript, so please bear with me ) is referenced as an object to some extent. Today, I will show you how to implement Object Oriented concepts using JS and its ES6 features.

Before we get more in-depth, we will go through the object and we will see why we really need OOP concepts in JS.

Consider the code below.

const userOneName = 'John Doe';
const userOneEmail = 'johnDoe@gmail.com';

const usertwoName = 'Shah';
const usertwoEmail = 'shah@icloud.com';

const userThreeName = 'Jack';
const userThreeEmail = 'jack@Something.com';

this code does not make any sense when you try to look at it from the entity perspective. It is really boring to keep writing and repeating the same code of line for the same entity.

Now, let's create an object of UserOne by the following code.

const UserOne = {
  name: "joh  doe",
  email: "john@gamil.com",
  printUser: function () {
    console.log(`${this.name} ${this.email}`);
  },
};

This code makes sense now that we are encapsulating the properties of user entities into a single object. It is now possible to create the same object for another user by simply changing its properties and customizing them as well.

You can simply access the properties of the object by using the below code.


console.log(UserOne.name); 

//Dynamic Access
console.log(UserOne['email']);

You can access and retrieve data from the object using the above syntax. Dynamic access is recommended as the key to access the data may change and may depend on some external environment. This explanation is shown in the following code.

User = {
  name: "John Doe",
  email: "john@gmail.com",
};

var getUserBytKey = "name";
console.log(User[getUserBytKey]);
//output = John Doe

getUserBytKey = "email";
console.log(User[getUserBytKey]);
//output = john@gmail.com

// but we cannnot use below way to access the property
console.log(User.getuserBytKey);
//output = undefined

So I hope you are clear with this concept of Dynamic access of properties.

Now, what if there are more than one user object having same properties and methods ? Do we really need to keep copying this object and can modify accordingly ? NO NO NO. We really do not need to do this.

If you know JS well, then you will also be familiar with the prototype. Prototypes allow you to create multiple objects with similar properties and behaviors (generally functions). JS has its own implementation of Object-Oriented Programming High-Level Language since many developers are using or are compatible with Object-Oriented Programming High Level Language. Bingo! By using the new JS ES6 Class feature, we can replicate some of the basic concepts of OOP.

let's discuss Class. Well, behind the scene this class concept is using the working style of prototype. I want to talk a bit about prototype here.

i.e Let's create a Person prototype function and do some fun stuff with it.


function Person(name, age, email) {
  this.name = name;
  this.age = age;
  this.email = email;
  this.getInfo = function () {
    console.log(`${this.name} ${this.age} ${this.email}`);
  };
}

//This is how we can create a objects from the Person prototype..
const userOne = new Person("Alisha", 30, "alisha@gmail.com");
const userTwo = new Person("Shah", 30, "shah@icloud.com");

userOne.getInfo();

Yes, This is how you can play with the prototype.

Now enough of this. Let's play with classes.
No more talking, just understanding through code.

class User {
  constructor(name, email) {
    this.name = name; 
    this.email = email;
  }
  getInfo() {
    console.log(`${this.name} ${this.email}`);
  } 
}

Above code represents User class where you can have constructor and method.

Whenever you create an object based on a class, the constructor will initialize that object with default values.
let's create an object.


const UserOne = new User("John Doe", "jon@gmail.com");

const UserTwo = new User("Shah", "sha@as.com");

Here, UserOne and UserTwo are the object from the User class created using "new" keyword.

Taking note of the fact that, you can now create a function in the constructor, a function in a class generally represents the behavior of the object.

Also, Here, "this" keyword refer to the context of particular object.

so for UserOne, this refers to object UserOne
UserTwo, this refers to object UserTwo.

Is that clear? It is not that hard, you can try it by your self.
Comment down below if you find any difficulty understanding this article.

I will discuss some Advanced concepts In Part 2.

Service Discovery in Microservice Architecture.

Ashik Patel — Thu, 24 Mar 2022 20:35:09 +0000

In this article I will try to explain about Service Discovery in the Microservices Architecture.

As we all know that, in MS Architecture all the services may have n number of instances running. In this type of architecture, services might be scaled up or down which make the changes in number of instances particular services. As a result, all of the instances of the services are running on different port. Then how can an application handle request and find the suitable or desirable service among these ports ? That's where we need Service Discovery mechanism in order to serve request according to need of application.

What is Service Discovery ?

It is an infrastructure which keep tracks of all the services instances and route the request to it.

There are 2 Ways to Implement such infrastructure.

1.Service Mesh

This is used in mostly containerized infrastructure, where container keeps tracks of services.

2.Service Registry

When application does not have any control over network and there can be lot of inclusion of services then this pattern is more useful as it is working at application level.
Here, whenever a new service gets a life it will register it self to this service registry. So now if application wants to know about this service it will query to this service registry and service registry will provide metadata about requested services.
In addition to these, if one service has more than one instances running and registered @ service registry then service registry will provide port of request service to the application in such a way that load can be balanced in more efficient way.

Microservices at First !

Ashik Patel — Wed, 23 Mar 2022 20:23:01 +0000

Hey There !
let's talk about microservices.

Basic principles:

Microservices serve only one specific solution to the given problem. For an example, we can retrieve all the list of top 10 movies from the backend of our streaming app.
It can be deployed completely on independent system which do not necessarily have any relation with main system.
It always communicate over http methods.

Umm, Benefits ?

New Developers do not need to understand whole application and can focus on main assigned area.
These services can be developed by independent team according to the requirements.
No programming language barrier for developing microservices. You can choose best language according to need.
Bingo ! if one specific service goes down, take a deep breath your application won't get affected by this failure.

Whoah ! Drawbacks !!

Hard to Monitor end-to-end development
Dependency problems if one microservice depend on other when it is time to roll back changes.
Hard to test
All complexity now bear by network layer as it communicates via network protocols.