Forem: Pritam Kumar

Closures in JavaScirpt

Pritam Kumar — Thu, 19 May 2022 07:27:21 +0000

Hello, Everyone! Hope You all are doing well.

What is Scope?
What is Global, Block and Function scope?
What is Lexical Scope?
What is Closures?

In this Blog, I'll be writing about Closures, one of the confusing topic in JavaScript. And I'm sure that every JavaScript programmer encountered this name while learning JavaScript Language.

To understand Closures in better way. Here's is prerequisites to know. But don't worry if you don't know these concepts, I'm also writing about these Topics Such as Scope, Block scope, Function scope, Lexical Scope as mentioned above.

Let's Start with Scope.

Scope

The simple meaning of Scope is accessibility of variable from where is defined in JavaScript program.

Let's Understand with example.

 let a = "JavaScript";
 console.log(a); // JavaScirpt

In the above example, It can be easily accessible. That's ok
But If we declare a variable inside a if block.

if (true) {
  let a = 'JavaScript';
}

console.log(a); //  ReferenceError: a is not defined

The above example will throw an ReferenceError: a is not defined, Because, if code block created scope with variable that only accessible inside that block only.

Global Scope

If The variable declared outside of any other scope, and that variable can be access to any other scope.

var a = 5;
var b = 5;

function sum() {
  if (true) {
    const sum = a + b;
    console.log(sum); // 10
  }
}
sum();

In the above example, I declare two variable a, b and assign a value 5. The global variable accessed inside other scope, That's why it logs sum = 10

Block Scope

When ES6 Introduced, Two new keyword were introduced to declare variable in JavaScirpt let and const, Both are block scope keyword. That can be only access inside that block only.

if (true) {
  const message = 'Hello JavaScript';
  console.log(message); // 'Hello JavaScript'
}
console.log(message); // ReferenceError

In the first log, It prints Hello JavaScript, because we are accessing inside that block but if we try to access outside of block it will throw an ReferenceError.

Note:- The code block for, while also create block scope.

Note: - var is not block scope.

if (true) {
  var message = 'Hello JavaScript';
}
console.log(message); 'Hello JavaScript'

In case of var keyword, if {} code block does not create a scope. That's why we're accessed message variable outside of the if block.

Function Scope

A JavaScript functions create scope with all variables (let, const, and var) that are only accessible inside that function body.

function sum() {
  var a = 5;
  let b = 5;
  const c = 5;
}
sum();

console.log(a, b, c); // ReferenceError: a is not defined

Lexical Scope

Let's start with an example

let myName = 'Pritam';

function one() {
  let age = 15;

  function two() {
    let address = 'Hazaribagh';

    let bio = `My name is ${myName}. and age is ${age}, and Address is ${address}`;

    console.log(bio); // My name is Pritam. and age is 15, and Address is Hazaribagh

  }

  two();
}

one();

In the Above Example

The function two() can access of it's Parent scopes variables,
also can access variable of global scope. But How? How a function scope has access of it's outer function scope. Let's know about it.

The answer is Because of Lexical scope / Lexical Environment

In the concept of Lexical scope, inner function has access of outer function's scopes.

But How it works? , How it remembers?

In JavaScript, Whenever a function created, It make reference of it's lexical variable due to an internal hidden property
[[Environment]].

Note: All function has [[Environment]] property.

Closures

A Closures is the combination of function bundle together with reference of It's lexical environment.

A Closures allows you access of lexical scope even outside of it's lexical scope.

Note: - Every time Closures form when function created.

Let's Understand with an example.

function outerFunc() {
  let outerVar = 'I am Developer!';
  function innerFunc() {
    console.log(outerVar); // => logs "I am outside!"
  }
  innerFunc();
}

outerFunc();

In the above example, due to lexical scope, innerFunc() has access of It's lexical variable. That we know very well.

Now let's make changes on program, innerFunc() invoked to be outside of outerFunc() scope or lexical scope. I mean, in other function.

function outerFunc() {
  let outerVar = 'I am Developer!';
  function innerFunc() {
    console.log(outerVar); // => logs "I am outside!"
  }
 return innerFunc
}

function newFunc() {
  const myInnerFunc = outerFunc();
  myInnerFunc();
}
 newFunc()

In this case innerFunc has still access of its lexical scope variable (outerVar), even executed outside the scope of outerFunc(). This is case, closure comes into picture. Due to closure the innerFunc remembers it's lexical scope variable from the place where it is defined. No matter, the innerFunc invoked outside of the scope.

I hope this will give you an basic understanding of Closures.

References:

Thank you for reading.

PollyFill for map(), filter(), forEach().

Pritam Kumar — Sat, 14 May 2022 08:00:18 +0000

Hello Everyone! Hope you all are doing great.

Function?
- Ways to writing a function in JavaScript?
Higher order function?
First order function?
What is pollyfill?
Pollyfill for map, filter, forEach

Before Writing about pollyfill, I'll explain about function, Higher order function, and First order function.

Let's dive into it...

What are function in JavaScript?

Function in JavaScript are Building block of code (Statement).
Which is responsible of a particular operations, that can be re-use in your JavaScript program without repetition. (You have to just invoke it, where you want to use this function)

It takes some value as input(argument),and return some value after invocation.

There are Three ways to write function in JavaScript?

Function Declaration

It is a Traditional ways to declare a function in JavaScript. It start with function keyword, after that function name with parenthesis and then curly braces.

// Function declaration

function add(x, y) {        
    console.log(x + y);
}

// Function invocation 
add(2, 3);

Function Expression

Function are first class citizen in JavaScript.
In JavaScript function are treated as like any other variable.

// Single line of code
let add = (x, y) => x + y;

console.log(add(3, 2));

In Function Expression, If there are more than one parameter in function should use parentheses with parameter. And when there are multiple lines on code we should use return keyword in the expression.

// Multiple line of code

const great = (x, y) => {
  if (x > y) {
    return 'a is greater';
  } else {
    return 'b is greater';
  }
};

console.log(great(3, 5));

Now Let's Know about Higher order Function and First order function

In JavaScript Higher order function either it take function as argument or return a function are know as Higher order function.
On the other hand, If a function that takes only primitives or object as arguments and returns only primitive or object are know as First order function.

//returning a function
function nums(x, y) {
  return function sum() {
    return `The sum is ${x + y}`;
  };
}

const getSum = nums(3, 5);

console.log(getSum());

//function as a parameter
function message (name) {
  console.log(`Hello ${name}`)
}

function greet (name, cb) {
  cb(name)
}

greet("Pritam", message)

Functions such as filter(),map(),reduce(), forEach etc, these all are example of Higher-Order Functions in JavaScript. which is use with a array.

Now Let's move to pollyfill.

Pollyfill

A Pollyfill is a piece of code used to provide modern functionality to older browser that do not natively .

Suppose a older browser does not support modern functionality, A developer code that functionality from scratch.

It is Browser fallback that it does not support.

Let's write first pollyfill for map() function.
Before that, knows about what it does with an Array.

map()

The map() function/method call a callback function once for each element in the array.

The map() method to iterate over an array and modifies the array element using a callback function. and return a new array. does not mutate the original array.

The callback function in map has three arguments current Element, index and original array.

Example

const array = [3, 6, 9, 1, 2];
const newArray = array.map((num) => num * 3);
console.log(newArray);

Pollyfill for map()

Array.prototype.myMap = function (callback) {
  let newArray = [];

  for (let i = 0; i < this.length; i++) {
    newArray.push(callback(this[i], i, this));
  }

  return newArray

};

const result = array.map((num) => num * 3);
console.log(result);

// Here, this keyword reference to parent array.

forEach()

The forEach method call a callback function once for each element in the array. It does not return new array. Mostly is uses over for loop, just to iterate an array element.

const array = [3, 6, 9, 1, 2];

array.forEach((num) => {
  console.log(num); // 3, 6, 9, 1, 2

});

Pollyfill for forEach()

Array.prototype.myForEach = function (callback) {
//Since forEach does not return array
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this); 
  }
};

array.myForEach((num) => console.log(num));

filter()

The filter method return a new array with all elements that pass the test implemented by provider function. It does not mutate the
original array.

const array = [3, 6, 9, 1, 2];
const result = array.filter((num) => num> 3)
console.log(result) // [6, 9]

Pollyfill for filter

Array.prototype.myFilter = function (callback) {
  let newArray = [];

  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      newArray.push(this[i]);
    }
  }

  return newArray;
};

const result = array.myFilter((num) => num > 3);
console.log(result); // [6, 9]

What is Array.prototype?

The JavaScript array prototype constructor is used to allow to add new methods and properties to the Array() object.

Thank you for reading...

Redux Toolkit: createAsyncThunk

Pritam Kumar — Fri, 13 May 2022 08:03:05 +0000

Table of Content

Redux
Redux Toolkit
createAsyncThunk

Hello Everyone! Hope you all are doing great. 😊

In this Blog I'm writing about createAsyncThunk but before diving into this I'll explain Redux and Redux toolkit.

What is Redux?

Redux is open source JavaScript library to managing state in JavaScript applications runs in different platform such as client side, server side. Redux commonly use with JavaScript libraries such as Reactjs, Angular etc. With redux all states of a application states kept in a store, which can be share to all component of your application.

When use Redux ?

In general, When your application grows at large scale, where managing states is difficult to you. Now you can look for tools like Redux. It's makes easy to managing states at one place.

Problem with Redux ?

According to official docs, There are three major problem with That developers are facing.

“Configuring a Redux store is too complicated”
“I have to add a lot of packages to get Redux to do anything useful”
“Redux requires too much boilerplate code”

Now Let's Understand Redux Toolkit

What is Redux Toolkit?

Redux Toolkit is abstraction version of Redux.

Redux toolkit is the new standard way to write redux logic which is solve our three major problem, which is mentioned above with Redux.

Features comes with Redux Toolkit

configureStore()
createReducer()
createAction()
createSlice()
createAsyncThunk()
createEntityAdapter()
createSelector()

You can read more about Redux Toolkit

Now You have a basic knowledge of Redux and Redux Toolkit. Let's understand createAsyncThunk()

What is createAsyncThunk() ?

Redux Thunk is middleware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises. link

According to the official docs

This abstracts the standard recommended approach for handling async request lifecycles.

createAsyncThunk is a middleware to perform asynchronous operations such as fetching an API, This package included by Default with Redux Toolkit.
Basically, createAsyncThunk() is function which is take three parameter

type
payloadCreator
options

Let's understand one by one

type:

"data/getData" (reducerName/actionType)

A string value generate a constant action type. It represent the life cycle of a async operations.

pending: 'data/getData/pending'
fulfilled: 'data/getData/fulfilled'
rejected: 'data/getData/rejected'

payloadCreator

A function with two parameter

arg
thunkAPI

arg

A single value that can be passed to the thunk creator, when createAsyncThunk function dispatched. (we'll see through an example.)

thunkAPI

ThunkAPI is an object, contains all the parameter that can be passed to redux thunk function.

dispatch: for dispatching different actions.
getState: to access the redux store from within the callback
requestId: this is a unique id redux-toolkit generates for each request
signal: this can be used to cancel request.
rejectWithValue: It is a utility function that can returns to the action creator a defined payload, in case of error.
extra: the “extra argument” given to the thunk middleware on setup, if available

Options

It is an object with options field.

The main reason to use createAsyncThunk(). It generates promise life cycle action types based on three states.

pending: 'data/getData/pending'
fulfilled: 'data/getData/fulfilled'
rejected: 'data/getData/rejected'

Let's Examine with an example

Step1:

We have to create a slice and make a API fetch call with createAsyncThunk function

import { createAsyncThunk } from '@reduxjs/toolkit';

export const getAllData = createAsyncThunk(
  'data/getData',
  async () => {
    return axios.get(`https://jsonplaceholder.typicode.com/posts`);
  }
);

const initialState = {
    loading: false,
    data: [],
    error: ""
}

const dataSlice = createSlice({
    name: 'data',
    initialState,
    extraReducers: {
      [getAllData.pending] = (state) => {
        state.loading = true;
      },

      [getAllData.fulfilled] = (state, action) => {
        state.loading = 'Fulfilled';
        state.data = action.payload;
      },

      [getAllData.rejected] = (state) => {
        state.loading = false;
        state.error = "Error occurred"
      }
    }

export default dataSlice.reducer;

On the Initial Call of the createAsyncThunk dispatch data/getData/pending lifecycle action type.
If our data fetch is successful, the data/getData/pending action type gets dispatched.
In case of data/getData/rejected is dispatched, then createAsyncThunk function return a rejected promise containing with an error.
In this extraReducer, we make our changes to the states

Hope This blog will give basic overview of createAsyncThunk .