DEV Community: Tanmay Agrawal

Asymptotic analysis

Tanmay Agrawal — Tue, 12 Mar 2024 05:14:53 +0000

What is an Algorithm ? Lets discuss whats all the fuss is about!

An algorithm is a step-by-step set of instructions or rules to perform a specific task or solve a particular problem.
Therefore the algorithms are used in various fields, including mathematics, computer science, and everyday problem-solving. They provide a systematic and well-defined approach to solving problems, ensuring that the solution is accurate, efficient, and repeatable.

There are some key characteristics of algorithms that include:

Input: Algorithms take input, which is the information or data the algorithm operates on.
Output: Algorithms produce output, which is the result or solution generated after processing the input.
Definiteness: Algorithms have clear and unambiguous instructions for each step, leaving no room for ambiguity or interpretation.
Finiteness: Algorithms must terminate after a finite number of steps. They should not go into an infinite loop.
Feasibility: Algorithms describe operations that can be performed using basic operations and a finite amount of resources.
Effectiveness: Algorithms are designed to solve specific problems or perform particular tasks efficiently.

Algorithms can be expressed in various forms, including natural language, pseudo code, flowcharts, or specific programming languages. They serve as a fundamental concept in computer science and play a crucial role in the development of software and the design of efficient solutions for a wide range of problems.

As we are now clear what is an algorithm is, there no comes the main part!

Asymptotic analysis

Lets look at this term Asymptotic analysis :
Asymptotic analysis is a method used in computer science and mathematics to describe the behaviour of algorithms as the input size approaches infinity. The purpose of asymptotic analysis is to understand the efficiency and scalability of algorithms without being concerned with low-level details or constant factors. It provides a high-level view of the algorithm's performance in terms of time complexity and space complexity.

Time complexity and space complexity are measures used to analyse the efficiency of algorithms. They help us understand how the performance of an algorithm scales with input size and provide insights into how much time and memory an algorithm requires.

1.Time Complexity:

Time complexity is a measure of the amount of time an algorithm takes to complete as a function of the size of the input.
It is expressed using Big O notation (e.g., O(n), O(n^2), O(log n)), where "n" represents the size of the input.
The goal is to describe the upper bound of the running time in the worst-case scenario.

Examples:

O(1): Constant time complexity (e.g., accessing an element in an array by index).
O(n): Linear time complexity (e.g., iterating through an array).
O(n^2): Quadratic time complexity (e.g., nested loops).

2.Space Complexity:

Space complexity is a measure of the amount of memory an algorithm uses as a function of the size of the input.
Similar to time complexity, it is expressed using Big O notation.
It accounts for both auxiliary space (space used by the algorithm itself) and input space.

Examples:

O(1): Constant space complexity (e.g., using a fixed number of variables).
O(n): Linear space complexity (e.g., using an array with "n" elements).
O(n^2): Quadratic space complexity (e.g., using a 2D array with "n" rows and columns).

When analyzing algorithms, it's common to consider both time and space complexity to get a comprehensive understanding of their efficiency. It's often necessary to make trade-offs between time and space complexity based on the requirements and constraints of a specific problem or application. Algorithms with lower time and space complexity are generally considered more efficient, but the choice of algorithm depends on the specific context and requirements of the problem at hand.

Here is a short list of Time and Space complexity

Sorting Techniques:

Bubble Sort:
- Time Complexity: O(n^2) (average and worst case)
- Space Complexity: O(1)
Selection Sort:
- Time Complexity: O(n^2) (average and worst case)
- Space Complexity: O(1)
Insertion Sort:
- Time Complexity: O(n^2) (average and worst case)
- Space Complexity: O(1)
Merge Sort:
- Time Complexity: O(n log n) (average and worst case)
- Space Complexity: O(n)
QuickSort:
- Time Complexity: O(n log n) (average case), O(n^2) (worst case)
- Space Complexity: O(log n)
Heap Sort:
- Time Complexity: O(n log n) (average and worst case)
- Space Complexity: O(1)

Searching Techniques:

Linear Search:
- Time Complexity: O(n) (average and worst case)
- Space Complexity: O(1)
Binary Search (on a sorted array):
- Time Complexity: O(log n) (average and worst case)
- Space Complexity: O(1)

Inserting and Deleting Techniques:

Insertion in an Array:
- Time Complexity: O(n) (average case), O(1) (best case, when inserting at the end)
- Space Complexity: O(1)
Deletion in an Array:
- Time Complexity: O(n) (average case), O(1) (best case, when deleting from the end)
- Space Complexity: O(1)
Insertion in a Linked List:
- Time Complexity: O(1) (average and worst case, when inserting at the beginning)
- Space Complexity: O(1)
Deletion in a Linked List:
- Time Complexity: O(1) (average and worst case, when deleting from the beginning)
- Space Complexity: O(1)

These complexities are general guidelines and can vary based on specific implementations and optimizations. It's important to choose the appropriate algorithm based on the specific requirements and constraints of the problem at hand.

let us understand the time complexity equation

So, let us say we have an algorithm described by an equation as f(n) = 3n^2 + 5n + 14

not what to think about this equation ?

so we have to understand that here n represents the number of inputs, and n^2 means that there is a loop within the loop i.e, the nested loop

so here in the above mention equation if we simplify it means, that the algorithm has a nested loop with 3 lines of code, followed by a loop with in 5 lines of code and there are 14 lines of code outside of the loop.

If you have made this far, Congratulations. You have now learned the technical terms to start your journey in solving problems with optimised solutions.

#Microservices in Nodejs

Tanmay Agrawal — Thu, 07 Mar 2024 05:19:14 +0000

With the constant developing software industry, building the robust, scalable and maintainable apps is a constant pursuit.
In order to achieve such great challenges we have microservices.
As the name suggest, these can be judged as multiple small services that are integrated together to form one complete application.
And when we write these services with the help of the Nodejs, these are then known as the microservices with nodejs.

Lets demystify the MicroServices

Microservices architecture decomposes complex applications into independent, loosely coupled services. Each service encapsulates a specific functionality, communicates with others through well-defined APIs (Application Programming Interfaces), and is independently deployable. This approach offers several advantages:

Scalability: Individual services can be scaled independently based on their specific needs, ensuring efficient resource utilization.
Agility: Development teams can work on and deploy services in isolation, leading to faster development cycles and easier maintenance.
Resilience: Failure in one service has minimal impact on others, enhancing overall application reliability.
Technology Agnosticism: Different services can be built with different languages and technologies, fostering flexibility.

Node.js: A Microservices Powerhouse

Node.js, with its event-driven, non-blocking I/O model, is particularly adept at building microservices.

Here's why:

Lightweight and Efficient: Node.js excels at handling numerous concurrent connections, making it ideal for microservices that handle high volumes of requests.
Rapid Development: JavaScript, the language behind Node.js, is known for its ease of use and extensive ecosystem of libraries and frameworks, accelerating development.
Community and Support: Node.js boasts a vast and active community, providing ample resources and support for developers venturing into microservices.

There is a lot more to learn about what are microservices and how to efficiently use the microservice architecture while building your back-end. Here are some of the resources that will help beginners to get started with the microservices in Nodejs

Hands-On Mircroservices with Nodejs by :- Diogo Resende .
YT channel explaining microservices with nodejs .

Feel free to make a learning project github repository and reach out to me, to learn together and collaborate to develop your first Nodejs back-end system with Microservices

Happy Coding!!

JavaScript Advance Concepts

Tanmay Agrawal — Wed, 10 Jan 2024 05:12:35 +0000

Certainly! Here are the advanced JavaScript interview questions along with their answers and examples:

Explain event delegation in JavaScript.
- Event delegation is a technique where you add a single event listener to a parent element to listen for events that happen on its children. This is useful for handling events on dynamically added or large numbers of elements efficiently.
- Example:
```
 // Event delegation example
 document.getElementById('parent-list').addEventListener('click', function(e) {
   if (e.target && e.target.nodeName === 'LI') {
     console.log('List item clicked: ', e.target.id);
   }
 });
```
What is the difference between a promise and an async/await?
Promises are objects that represent the eventual completion or failure of an asynchronous operation, while async/await is a syntax built on top of promises that allows for more concise and sequential asynchronous code, making it easier to work with promises.

Example of async/await:

 async function myAsyncFunction() {
   let promise = new Promise((resolve, reject) => {
     setTimeout(() => resolve("Async/Await resolved!"), 2000);
   });
   let result = await promise;
   console.log(result);
 }
 myAsyncFunction();

Explain the concept of prototypal inheritance in JavaScript.

Prototypal inheritance is a way to create objects that inherit properties and methods from other objects. In JavaScript, objects can inherit properties from other objects through the prototype chain.
Example:

 function Animal(name) {
   this.name = name;
 }
 Animal.prototype.getName = function() {
   return this.name;
 };

 function Dog(name, breed) {
   Animal.call(this, name);
   this.breed = breed;
 }
 Dog.prototype = Object.create(Animal.prototype);
 Dog.prototype.constructor = Dog;
 Dog.prototype.getBreed = function() {
   return this.breed;
 };

 const myDog = new Dog('Buddy', 'Golden Retriever');
 console.log(myDog.getName()); // Output: Buddy
 console.log(myDog.getBreed()); // Output: Golden Retriever

What are the differences between the spread operator and rest parameter?
- The spread operator (...) unpacks elements in an iterable (like an array), while the rest parameter also uses the same operator to collect multiple elements and represent them as an array.
- Example of the spread operator:
```
 const array1 = [1, 2, 3];
 const array2 = [...array1, 4, 5, 6];
 console.log(array2); // Output: [1, 2, 3, 4, 5, 6]
```

Example of the rest parameter:

 function sum(...args) {
   return args.reduce((total, current) => total + current, 0);
 }
 console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Explain the difference between call, apply, and bind methods.
- call() and apply() are used to invoke a function immediately, while bind() is used to create a new function that, when called, has its this keyword set to a specific value. difference between call() and apply() is that call() uses the array of arguments!.
- Example of call method:
```
const person = {
fullName: function() {
 return this.firstName + ' ' + this.lastName;
}
};
const person1 = {
firstName: 'John',
lastName: 'Doe'
};
console.log(person.fullName.call(person1)); // Output: John Doe
```

Example of apply method :

 const numbers = [5, 6, 2, 3, 7];

// Using Math.max with apply to find the maximum number in an array
const maxNumber = Math.max.apply(null, numbers);

console.log(maxNumber); // Output: 7

Example of bind method:

 const module = {
   x: 42,
   getX: function() {
     return this.x;
   }
 };
 const unboundGetX = module.getX;
 const boundGetX = unboundGetX.bind(module);
 console.log(boundGetX()); // Output: 42

What is memoization, and how is it used in JavaScript?

Memoization is an optimization technique used to speed up the execution of functions by caching the results of expensive function calls and returning the cached result when the same inputs occur again.

Example:

 function memoize(func) {
   const cache = {};
   return function(...args) {
     const key = JSON.stringify(args);
     if (cache[key]) {
       return cache[key];
     } else {
       const result = func.apply(this, args);
       cache[key] = result;
       return result;
     }
   };
 }
 const memoizedSum = memoize((a, b) => {
   console.log('Calculating sum');
   return a + b;
 });
 console.log(memoizedSum(3, 5)); // Output: Calculating sum 8
 console.log(memoizedSum(3, 5)); // Output: 8 (from cache)

Explain the concept of currying in JavaScript.
- Currying is the process of breaking down a function with multiple arguments into a series of functions that take one argument at a time. This can help create specialized functions and make code more modular.
- Example:
```
 function multiply(a) {
   return function(b) {
     return function(c) {
       return a * b * c;
     };
   };
 }
 console.log(multiply(2)(3)(4)); // Output: 24
```
What are the differences between let and const in JavaScript?
- let is a block-scoped variable that can be reassigned, while const is also block-scoped but cannot be reassigned once it has been assigned a value.
- Example of let:
```
 let x = 10;
 x = 20;
 console.log(x); // Output: 20
```

Example of const:

 const y = 10;
 // y = 20; // This will throw an error
 console.log(y); // Output: 10

Explain the difference between the Document Object Model (DOM) and Virtual DOM.
- The DOM is a programming interface for HTML and XML documents, while the Virtual DOM is a lightweight copy of the actual DOM, used for efficient updates in certain JavaScript frameworks like React.
- Example:
```
 // DOM manipulation example
 const element = document.getElementById('myElement');
 element.textContent = 'Hello, World!';

 // Virtual DOM example (in React)
 const element = <div>Hello, World!</div>;
```

What are Web Workers in JavaScript, and what are their use cases?

Web Workers allow you to run JavaScript in the background, independently of the user interface, providing a way to handle computationally intensive tasks without blocking the main thread, thus improving the overall performance of web applications.
Difference between main thread and web-worker is that web-worker cannot manipulate the DOM.
Example:

  // Creating a web worker
  const worker = new Worker('worker.js');
  //Here worker.js is another scipt file it has a 
  //function onmessage(){
    //  postMessage('Hello, worker!');
    //}
  worker.onmessage = function(event) {
    console.log('Message received from worker:', event.data);
  };
  //worker.postMessage('Hello, worker!'); this is to access worker from index.js

Difference between cookies, globalStorage and sessionStorage ?
Cookies, sessionStorage, and localStorage are all mechanisms in JavaScript used for storing data on the client-side, but they have different use cases and behavior. Here are explanations and examples for each:
Cookies:
- Cookies are small pieces of data stored in the browser that are sent with every HTTP request. They are primarily used for maintaining session information, user preferences, and tracking information.

Example:

   // Setting a cookie
   document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
   // Retrieving a cookie
   const cookieValue = document.cookie;
   console.log(cookieValue);

Session Storage:
- sessionStorage is a mechanism that allows you to store data for a specific session, meaning the data is stored only for the duration of the page session. Once the tab is closed, the data is removed.

Example:

   // Setting data in sessionStorage
   sessionStorage.setItem('key', 'value');
   // Retrieving data from sessionStorage
   const data = sessionStorage.getItem('key');
   console.log(data);

Local Storage:
- localStorage is similar to sessionStorage but persists even when the browser is closed and reopened. The data stored in localStorage remains available until explicitly cleared by the user or by the web application.

Example:

   // Setting data in localStorage
   localStorage.setItem('key', 'value');
   // Retrieving data from localStorage
   const data = localStorage.getItem('key');
   console.log(data);

Each of these storage mechanisms serves a different purpose, and choosing the appropriate one depends on the specific requirements of the application. Cookies are typically used for small amounts of data that need to be sent with each request, while sessionStorage and localStorage are used for larger amounts of data that need to be stored on the client side for a longer duration.

Difference between Pure functions and Impure functions In JavaScript, functions are broadly categorized as either pure or impure based on their behavior and the effects they have on the program state. Understanding the distinction between pure and impure functions is crucial for writing reliable and maintainable code.

Pure Functions:

Definition: Pure functions are functions that always return the same output for a given input and have no side effects on the program's state or the outside world. They depend only on their arguments and do not modify variables outside their scope.
Characteristics:
- Given the same input, pure functions always return the same output.
- They do not cause any observable side effects, such as modifying global objects or variables, or performing I/O operations.
Example:

   function add(a, b) {
     return a + b;
   }

Impure Functions:

Definition: Impure functions are functions that may produce different results for the same input and can cause side effects, such as modifying global objects, performing I/O operations, or altering the program's state.
Characteristics:
- They may rely on and modify variables outside their scope.
- They can produce side effects, such as modifying external state or performing I/O operations.
Example:

   let c = 10;
   function multiply(a, b) {
     return a * b + c; // Accessing and modifying the global variable c
   }

Key Differences:

Pure functions are deterministic and do not alter the program's state, while impure functions may produce different results and have side effects.
Pure functions are easier to test, reason about, and debug, as they offer predictable behavior regardless of the program's state, making them more reliable in a concurrent or parallel environment.

What is execution context and lexical environment ?
Execution context and lexical environment are fundamental concepts in JavaScript that play a crucial role in understanding how the language manages scope and variable access during code execution.

Execution Context:

The execution context is a data structure that contains information about the environment in which the current code is being executed. It includes details such as the value of this, variable objects, scope chain, and other contextual information.

Lexical Environment:

The lexical environment is a structure that holds identifier-variable mapping (i.e., variable names to variable values) and is determined statically by where the variables and functions are defined within the code.

In simpler terms, the lexical environment is concerned with the scope resolution of variables, based on their location in the source code, while the execution context deals with the runtime context of code execution, including the scope chain and the value of this.

Explain Eventloop The event loop is a critical component of JavaScript's concurrency model that allows the language to handle multiple asynchronous operations efficiently. It is responsible for managing the execution of code by handling tasks and events in a non-blocking manner, enabling JavaScript to be single-threaded yet capable of handling asynchronous operations.

The event loop continuously checks the call stack and the task queue, ensuring that the call stack is empty before processing any pending tasks in the queue. It follows a specific order of operations to ensure that tasks are executed in a timely and organized manner.

Here's a simplified sequence of the event loop's operations:

Check the Call Stack: The event loop first checks if the call stack is empty.
Process Tasks in the Task Queue: If the call stack is empty, the event loop looks for any pending tasks in the task queue. These tasks may include asynchronous callbacks, timers, or other events.
Execute Tasks: If there are tasks in the queue, the event loop processes them and adds corresponding functions or callbacks to the call stack for execution.
Continue Checking: The event loop continues to monitor the call stack and the task queue, ensuring that tasks are processed in the correct order and that the JavaScript runtime remains responsive to new events and user interactions.

Note: apart from the Task Queue , there is also a micro task queue where all the promise related callbacks will be queued. So Event loop gives priority of micro task queue over to the task queue. So if there is a setTimeout and a promise call, then the promise will execute before the setTimeout.

console.log('start') // logs first
setTimeout(()=>console.log('0 sec timer'), 0); //logs last
Promise.resolve('Resolved promise 1').then(res=> console.log(res)) // logs 3rd

promise.resolve('Resolve promise 2').then(res=>{
    for(let i=0; i<1000000; i++){}
    console.log(res)
}) // This takes a wile but logs 4th

console.log('end') // logs seconed

//output:
//start
//end
//promise 1
//promise 2
//0 sec timer

By managing the execution of asynchronous tasks in a non-blocking manner, the event loop enables JavaScript to handle complex operations efficiently, ensuring that the program remains responsive and can handle multiple concurrent tasks without getting blocked or slowing down.

Call by Reference v/s Call by value "Call by reference" and "call by value" are two different ways in which function arguments can be passed to a function, and they refer to how values are transferred to the parameters of a function. Let's explore each concept:

Call by Value:

In call by value, the actual value of the argument is passed to the function. This means that a copy of the argument's value is made, and any changes made to the parameter within the function do not affect the original value outside the function. It is like handing over a copy of a book rather than the original book.

Example (in JavaScript):

function increment(x) {
  x = x + 1;
  console.log('Inside function:', x);
}

let num = 5;
increment(num);
console.log('Outside function:', num);

Output:

Inside function: 6
Outside function: 5

In the example, the value of num remains unchanged outside the function, even though it was modified inside the function.

Call by Reference:

In call by reference, instead of passing the actual value, a reference (memory address) to the variable is passed to the function. This means that changes made to the parameter within the function affect the original value outside the function.

Example (in JavaScript):

function modifyArray(arr) {
  arr.push(4);
  console.log('Inside function:', arr);
}

let myArray = [1, 2, 3];
modifyArray(myArray);
console.log('Outside function:', myArray);

Output:

Inside function: [1, 2, 3, 4]
Outside function: [1, 2, 3, 4]

In this example, the array myArray is modified inside the function, and the changes persist outside the function as well.

Note:

Most primitive types, like numbers and strings, are typically passed by value.
Complex types, like arrays and objects, are often passed by reference or by sharing the reference.

It's important to understand the distinction between call by value and call by reference, as it impacts how functions can modify the values of their parameters and the behavior of the program. In some languages, the terms "call by sharing" or "call by object sharing" are also used to describe the behavior observed in certain cases.

This Post is the compiled via knowledge from several Youtube videos, MDN documents and Udemy lectures. JavaScript can be overwhelming sometimes, the trick is that you keep the basic concepts clear and train your mind to think how the JavaScript could have thought.

For me programming is just like a strategy game. The game is defined by some set of rules and you can only achieve your goals if you know how to play by those rules. But then there comes the fun part. The rules can be bent for creativity. So, If you haven't tried it yet, try being creative with the basic JavaScript for 15-20 mins a day. In just one month you can do something that might feel like magic to other programmers.
For reference here is a simple task for you to play :

try breaking the maths with JavaScript - 2/0 , 0%2 or "0"/2 or "0"+2 see what would happen ?
try running asynchronous tasks like, run a simple console log then make a settimeout with 0 sec delay, make another with 2 sec delay and make a resolved promise, First try to figure out the output by yourself and then check if it matches your expectations?
try playing with for of loop, and then play with var and let. see what happens
try making a private variable inside a closure and think about accessing them. Can you break some rules ? is it possible ?
try to make some IIFE and think about if the javascript modules itself are IFFE ? if so then does this means that everything we do in javaScript is actually a closure ?

I am trying to be random here, but feel free to explore. When it comes to JavaScript there are no dumb questions.

Redux Toolkit Simplified

Tanmay Agrawal — Tue, 19 Dec 2023 08:01:23 +0000

Create a new React app with vite

npm create vite@latest my-app

Now installing the redux toolkit with this command

npm i @reduxjs/toolkit react-redux

so now the redux and redux-toolkit is installed , we now progress to create the store in the app

Install a plugin for the browser called Redux dev tools, this helps in development
https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?pli=1

Create a store file in the src folder, we call it store.js store.js

import { configureStore } from "@reduxjs/toolkit";

//craete a store with configure store function of toolkit
const store = configureStore({
//create as many reducer you want
  reducer: {},

});
//export the store from the redux
export default store;

2.Once the store is created, we now need to add provider to our app, this provider we usually provide in the app.js with Provider and we mention the store value there
app.js

import { Provider } from "react-redux";
import store from "./redux/store";

function App() {
  return (
    <Provider store={store}>
      <h1 className="font-bold text-5xl">Practicing Redux with toolkit</h1>
    </Provider>
  );
}

export default App;

3.Now we need to create another file, let us say it as reducerSlice.js as by convention here we will define out initial state and then a name function which uses the createSlice method that takes an object with the values of name, initialState and reducer
- In the reducer, we will be defining actually the action functions which will take two arguments, first is the state and second will be the action.
- using the state we can apply the relevant action and by action we can hold the payload from the dispatch

This reducer function is then exported as default from here and will be then imported in the store to be mention with the reducer reducerSlice.js

import { createSlice } from "@reduxjs/toolkit";
const initialState = {

  //state variables

};

export const reducerSlice = createSlice({
    name : "Reducer Name",
    initialState,
    reducer : {
        typeOfAction : (state,action)=>{
            //action type defination
        }
    }
})

// these actions are used in the files where actions will be dispatched
export const {typeOfAction} = reducerSlice.actions;

//this default export will be imported in the store.
export default reducerSlice.reducer;

store.js

import { configureStore } from "@reduxjs/toolkit";
import reducerSliceReducer from "./reducers" //note it comes from default exp.
//craete a store with configure store function of toolkit
const store = configureStore({
//create as many reducer you want
  reducer: reducerSliceReducer //imported from the reducers.js

});
//export the store from the redux
export default store;

Now this was the part of Redux Toolkit, Now we need to use React hooks to combine this toolkit functionality

UseDispatch() and useSelector()

import {useDispatch, useSelector} from "react-redux"
import {typeOfAction} from "../redux/reducerSlice"

export default function App(){
    const dispatch = useDispatch() //calling the useDispatch
    const variable = useSelector(state => state.value) //useSelector grabs the state variable value to be used in the app
    const handleAction = ()=>{
        dispatch(typeOfAction()) //here dispatch is passed the action function declared in the reducerSlice we had exported earlier
    }
    return(

    )
}

Simple example of using Redux toolkit

I have use theReact+vite+tailwind for this .

app.jsx

import { Provider } from "react-redux";
import store from "./redux/store";
import Number from "./components/Number";


function App() {
  return (
    <Provider store={store}>

        <h1 className="font-bold text-5xl container m-auto text-center">
          Practicing Redux with toolkit
        </h1>
        <Number />
    </Provider>
  );
}

export default App;

store.js

import { configureStore } from "@reduxjs/toolkit";
import numWorkReducer from "./numWorkSlice";

const store = configureStore({
  reducer: numWorkReducer,
});

export default store;

numWorkSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  c: 0,
};



export const numWorkSlice = createSlice({
  name: "Counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.c += 1;
    },

    incrementByValue: (state, action) => {
      state.c += action.payload;
    },

    decrement: (state) => {
      state.c -= 1;
    },

  },
});


export const { increment, incrementByValue, decrement } = numWorkSlice.actions;
export default numWorkSlice.reducer;

Number.jsx

import { useDispatch, useSelector } from "react-redux";
import { decrement, increment, incrementByValue } from "../redux/numWorkSlice";
import { useState } from "react";



function Number() {

  const [value, setValue] = useState(null);
  const dispatch = useDispatch();
  
  const handleClick = () => {
    dispatch(increment());
  };

  const num = useSelector((state) => state.c);

  return (

    <div className=" p-5 w-fit text-center container m-auto bg-slate-100 shadow-md mt-5">
      <h1 className="font-bold text-3xl mt-10 ">Counter</h1>

      <p className="text-3xl">{num}</p>

      <div className="flex space-x-5">
        <button
          onClick={handleClick}
          className="outline-1 outline-sky-500 outline p-2 mt-5 bg-sky-300 rounded-md"
        >
          Increment
        </button>

        <button
          onClick={() => dispatch(decrement())}
          className="outline-1 outline-sky-500 outline p-2 mt-5 bg-sky-300 rounded-md"
        >
          decrement
        </button>

      </div>

      <div className=" flex space-x-5 items-center mt-5">

        <input
          className="outline outline-1"
          onChange={(e) => setValue(e.target.value)}
          value={value}
        />

        <button
          onClick={() => dispatch(incrementByValue(+value))}
          className="outline-1 outline-sky-500 outline p-2  bg-sky-300 rounded-md"
        >

          Add Value

        </button>

      </div>

    </div>

  );

}



export default Number;

I Recommend, to Start a new app yourself, if you are new to this, And start with copy paste the code as I have mentioned here, Try to run it by yourself and play around with this to understand it better.

A good exercise will be to create another reducer, let us say, it does not counts but multiply the number with any given value input by the user, for this make a input form and a button to execute the dispatch function and render the output on the screen.

At this point you probably will get confuse in store.js

there is a simple solution in the store.js file, try to add the reducer object with the names of the reducer slice you import

const store = configureStore({
  reducer: {
    counter: numWorkReducer,
    multiply: multiplyWorkReducer,
  },

Then in the hook useSelector(state=> state.counter.c) will fix the code for the counter and this is also needed for the other reducer that you create for the multiplication

Challenge!!

Try to create the fetch api using Axios, and use the url https://jsonplaceholder.typicode.com/
for sample url to fetch data for users, posts and comments
make three buttons to fetch the data on click and render on the screen.

Let me know! if you find this helpful, it helps me to make more posts in the future, let me know what can be improved and what can make such short refresher tutorials better in experience for readers!

Happy Coding!!! 😋

Middleware's in NodeJS

Tanmay Agrawal — Thu, 14 Dec 2023 05:51:29 +0000

What are Middleware ?

Middleware refers to a function that has access to the request object (req), the response object (res), and the next middleware function in the application's request-response cycle. Middleware functions can perform various tasks, such as modifying request and response objects, ending the request-response cycle, calling the next middleware function in the stack, or handling the HTTP request.

Middleware functions are central to the Express framework as they provide a way to execute code, make changes to the request and response objects, and enable the server to handle requests in a modular and flexible manner. They can be used for various purposes, such as logging, authentication, authorization, error handling, and more.

Middleware functions in Express are typically added using the app.use() or router.use() methods. These methods allow you to incorporate middleware at the application level or at the router level.

Three types :

Built-In
Custom
Third Party

In the context of web development, middleware refers to software components that enable communication and data management between different software applications. In the context of Express.js, a popular web application framework for Node.js, middleware functions are essential for handling various aspects of the HTTP request-response cycle.

Built-In Middleware: Note: Build-in middleware does not require the next() Express provides a set of built-in middleware that facilitates common tasks. Some examples include:

express.json(): This middleware parses incoming requests with JSON payloads and is typically used for handling JSON data.
express.urlencoded(): This middleware parses incoming requests with URL-encoded payloads and is commonly used with HTML form data.
express.static(): This middleware serves static files such as images, CSS, and JavaScript files.
express.Router: This middleware enables you to create modular, mountable route handlers.

2.Custom Middleware:
Custom middleware refers to functions or code written by the developer to handle specific tasks during the request-response cycle. Developers can create custom middleware functions to perform tasks such as authentication, logging, error handling, data validation, and more. Custom middleware is tailored to the specific requirements of the application being developed.

Here is an example of custom middleware in Express:

   const customMiddleware = (req, res, next) => {
     // Perform custom tasks
     console.log('Custom middleware is executing');
     next(); // Call the next middleware function
   };

   app.use(customMiddleware);

3.Third-Party Middleware:
Third-party middleware are middleware components developed by external parties that can be integrated into the Express application to extend its functionality. These middleware can be used for various purposes, such as request logging, compression, authentication, session management, and more. Popular third-party middleware include:

body-parser: A middleware for parsing incoming request bodies.
cors: A middleware for enabling Cross-Origin Resource Sharing (CORS) in Express applications.
helmet: A middleware for setting various HTTP headers to improve the security of the application.

Third-party middleware can be easily incorporated into an Express application using the npm package manager. For example:

   npm install body-parser

   const bodyParser = require('body-parser');
   app.use(bodyParser.json());

By leveraging the built-in, custom, and third-party middleware, developers can enhance the functionality, security, and performance of their Express applications, making it easier to handle various aspects of the request-response cycle efficiently and effectively.

Complete Example of the Code with Middle-ware concept

const path = require("path");
const express = require("express");
const logEvents = require("./middleware/logEvents");
const cors = require("cors");
const PORT = process.env.PORT || 3500;
const app = express();


//------Concept of MiddleWare------

// Custom Middleware

app.use((req, res, next) => {
  logEvents(`${req.method}\t${req.headers.origin}\t${req.url}`, "reqLog.txt");
  next(); //to move to the next middleware function
});


//Third-Party Middleware CORS Cross Origin Resource Sharing

app.use(cors());


// Built-in Middleware

//urlendoded : this middleware parses incoming requests with URL-encoded payloads
app.use(express.urlencoded({ extended: false }));
//To accept the json data we use express.json() middleware
app.use(express.json());


//To serve the static files, we attach the folder name in static middleware (CSS/images etc are added)

//Note here by default it is app.use('/', express.static(pathname))
//and here the first argument is the route not the file location.
app.use(express.static(path.join(__dirname, "/public")));



//------Concept of routing--------

//1. Getting the index.html - With Regex ^(starts with) $(ends at) |(or) (html)?(This is optional contion making html optional)

app.get("^/$|/index(.html)?", (req, res) => {
  res.sendFile(path.join(__dirname, "views", "index.html"));
});

//2. let us serve another page to another route

app.get("/new-page(.html)?", (req, res) => {
  res.sendFile(path.join(__dirname, "views", "new-page.html"));
});

//3. Let us see how redirecting works ?

app.get("/old-page(.html)?", (req, res) => {
  res.redirect(301, "/new-page"); //301 is we are manually setting to 301 redirect i.e, permanent redirect
  //because by default it sets to 302 redirect code.
});

//4. Setting up a default route, i.e, /all or /*

app.get("/*", (req, res) => {
  res.status(404).sendFile(path.join(__dirname, "views", "404.html"));
});


app.listen(PORT, () => console.log(`Server is running on PORT: ${PORT}`));

Now In this example let us create a White-list which allows CORS for only the domains we want, So how to make that?
Consider the following code before we add the CORS middleware

const whiteList = [
  "https://www.yoursite.com",
  "https://127.0.0.1:500",
  "https://localhost:3500",
];

const corsOptions = {
  origin: (origin, callback) => {
    if (whiteList.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error("Not Allowed by CORS"));
    }
  },
  optionsSuccessStatus: 200,
};

app.use(cors(corsOptions));

This will allows the CORS only on the sites which are mention in the White-list

Difference between `app.use()` and `app.all()`

In the context of the Express.js framework for Node.js, app.use and app.all are both middleware functions used to handle incoming HTTP requests, but they serve different purposes.

1.app.use:

The app.use method is used to mount middleware functions in the application's request-response cycle. It is often used for handling common tasks or processing logic that applies to all routes in the application.
It can be used to define middleware functions for specific routes or to apply middleware globally for all routes.
The middleware defined with app.use is executed for every incoming request, regardless of the request method (GET, POST, etc.) or the request URL.

Example:

   app.use((req, res, next) => {
     console.log('This middleware will be executed for every request');
     next();
   });

2.app.all:

The app.all method is used to handle all HTTP methods (GET, POST, PUT, DELETE, etc.) for a specific route in the application.
It is typically used to define a route that applies to all HTTP methods at a particular endpoint. This means that the provided middleware will be executed regardless of the HTTP method used for the request.
It is useful for implementing a specific logic or handling a common task for all methods at a particular route.

Example:

   app.all('/example', (req, res, next) => {
     console.log('This middleware will be executed for all HTTP methods at /example route');
     next();
   });

can also be used for rendering 404 page of any other url routes example :

app.get("/*", (req, res) => {

  res.status(404);

  if (req.accepts("html")) {
    res.sendFile(path.join(__dirname, "views", "404.html"));
  } else if (req.accepts("json")) {
    res.json({ error: "404 not found" });
  } else {
    res.type("text").send("404 not found");
  }
});

In simpler words, app.use is used for mounting middleware globally or for specific routes, and it executes for every request, while app.all is used to handle all HTTP methods for a specific route and is particularly useful when you want to apply the same logic to all methods at a specific endpoint.

Express JS - Learn what Matters.

Tanmay Agrawal — Wed, 29 Nov 2023 05:14:38 +0000

documentation available at Express website

npm i express --save

Once the Express is installed, let us see a simple Hello World! code with Express

const path = require("path");
//Importing express
const express = require("express");

//we dfine a port so that we not only have development address but also on which port is it on
const PORT = process.env.PORT || 3500;


const app = express();
app.get("/", (req, res) => {
  res.send("Hello World");
});


app.listen(PORT, () => console.log(`Server is running on PORT: ${PORT}`));

*This should now show hello world when visiting to http://localhost:3500/

Let us see how to serve an Index.html file using express

const path = require("path");
//Importing express
const express = require("express");
//we dfine a port so that we not only have development address but also on which port is it on
const PORT = process.env.PORT || 3500;
const app = express();


//1. Getting the index.html - With Regex ^(starts with) $(ends at) |(or) (html)?(This is optional contion making html optional)
app.get("^/$|/index(.html)?", (req, res) => {
  //This is first way, here we explicitly provide root with directory name in which it looks for views folder and index.html
  // res.sendFile('./views/index.html', {root: __dirname})
  
  // Another easier way is
  res.sendFile(path.join(__dirname, "views", "index.html"));

});

//2. let us serve another page to another route
app.get("/new-page(.html)?", (req, res) => {
//we have a folder name views in our directory, so we join views with new-page.html
  res.sendFile(path.join(__dirname, "views", "new-page.html"));
});

//3. Let us see how redirecting works ?
app.get("/old-page(.html)?", (req, res) => {
  res.redirect(301, "/new-page"); //301 is we are manually setting to 301 redirect i.e, permanent redirect
  //because by default it sets to 302 redirect code.
});

//4. Setting up a default route, i.e, /all or /*
app.get("/*", (req, res) => {
  res.status(404).sendFile(path.join(__dirname, "views", "404.html"));
});


app.listen(PORT, () => console.log(`Server is running on PORT: ${PORT}`));

Notice that the Express sets the status code automatically, if the page was found the status code is 200 automatically. Also notice that the Express can handle the regex expression, There we have mention that all routes that starts and ends with / and then we could easily keep .html as optional. This makes things easier
Note that Express follows like waterfall technique, i.e, it first looks for / or /index or /index.html then it moves down and found /new-page or /new-page.html . Means it doesn't just stop at / it goes beyond it.
The redirecting is also easier with res.redirect() but to note here by default the status code is 302 by Express which means temporary moved to different location. We might have to redirect to a page that has been permanently relocated, in that case we can set the status code manually by passing it as the first parameter and then the redirected parameter.
We can add a 404 page not found manually by making a default route or /* means all routes to load a manual 404 error page. But in this case the status code will be 200 by default since the Express has essentially found the page that we are looking for. So we have to manually adjust that by doing res.status(404).sendFile() this will then simply fix the issues.

Route Handlers

Now there is a concept of route handlers and chaining of the route handlers. Let us see them in short. Note these develop a basic understanding of a concept middleware's in Express
example code

app.get("/chain(.html)?",(req, res, next) => {
    console.log("Attempt to render the chain");
    next();
  },
  (req, res) => {
    res.send("Chain Rendered");
  }
);

So as in this code, there is a keyword next and then at the end of the code block of app.get we are calling next() this allows to run the next function that chained with this one. so in this case the output is, at first in the terminal it prints Attempt to render the chain and then it sends the small text chain Rendered in the browser on visiting the link http://localhost:3500/chain

There is one another method, i.e. we can make several functions like this and then chain them by passing them in the array, here is an example

const one = (req, res, next) => {
  console.log("One executed");
  next();
};

const two = (req, res, next) => {
  console.log("Two executed");
  next();
};

const three = (req, res, next) => {
  console.log("Three executed");
  next();
};

const finish = (req, res) => {
  res.send("Render Finished");
};

app.get("/chain(.html)?", [one, two, three, finish]);

Output will be shown as

Server is running on PORT: 3500
One executed
Two executed
Three executed

and on visiting the link http://localhost:3500/chain it renders the page with the text Render Finished

So this is how the chaining works in Express.
Now this will brings up something call the [[Middleware's]]

Steps to write the Express server

NPM install the dependencies -
nodemon
cors
express
configure the package.json in the script add the dev : 'nodemon server' this is for starting the server file after npm run dev and every time server.js is saved the server will restart
create the file folder structure [[Node Folder Structure.canvas|Node Folder Structure]]
Import all modules in server.js (express, path, cors, )
create a port and create the app from express
listen to the port and log the console
add middleware's using app.use
- app.use(cors())
- Remember to use cors it is better to make the whitelist, then create an object lets say corsOptions this object has two keys, origin : and OptionsSucessStatus , in the origin it is a function with a callback and origin arguments, and check if the origin is in the index of the whitelist. if the index of origin returns -1 then it is not in the whitelist therefore it returns the callback(new Error("message"))otherwise it returns callback(null,true)

const whiteList = [
  "http://www.site.com",
  "http://127.0.0.1:3500",
  "http://localhost:3000",
];


const corsOptions = {
  origin: (origin, callback) => {
    if (whiteList.indexOf(origin) !== -1 || !origin) { // ||!origin is only for dev
      callback(null, true);
    } else {
      callback(new Error("Not Allowed by CORS!!"));
    }
  },
  OptionsSuceessStatus: 200,
};

module.exports = corsOptions;

app.use(express.urlencoded({extended : false}))
app.use(express.json())
app.use(express.static(path.join(__dirname, '/public')) this is for root files in views
app.use('/subdir', express.static(path.join(__dirname,'/public')) this is for the sub routes in this example it is subdir.
Add routes using app.use('/', require("./routes/root)"
Add sub-routes if there are any
Add app.all('*', (req,res)){} in this case add the status of 404 and also add the conditions of req.accepts('html') or req.accpets('json') to send the relevant 404 error page by res.sendFile(path.join(__dirname, "views",'404.html')) or the JSON as res.json({err : '404 not found'}) else send the text by res.type('text').send('404 not found!)'
Inside the routes, import the express and path module, then make the router from express.Router() and then use the router.get('/index.(html)?', patth) and at last do module.exports = router

const express = require("express");
const path = require("path");
const router = express.Router();
router.get("^/$|/index(.html)?", (req, res) => {
  res.sendFile(path.join(__dirname, "..", "views", "index.html"));
});

router.get("^/about(.html)?", (req, res) => {
  res.sendFile(path.join(__dirname, "..", "views", "about.html"));
});

module.exports = router;

Steps to write the API

Basic Steps :
- Create a separate folder api inside the folder routes and make the JavaScript file
- Inside it import the express and path, then create the router from express.Router().
- use router.route('/').get('path', (req,res){}).put().delete().post()
- export the router using module.exports = router
More Advance Steps :
- First create the controllers folder, inside the controllers folder we keep all the functional logic of CRUD operations and exports them in form of modules.exports
- Now inside the routes, make the specific api routes for authentication or register and inside them use the router = express() and use router.route("/").get(function from controller)
- Export the router and then edit the server.js file to add the api route on call.

I hope this would help you refresh your knowledge in using the Express framework in NodeJS.

The above information is compiled from :
References of all the source of information from my learning notes from YT creator and his 7 hour series of learning NodeJS
Author : Dave Gray

Event Emitter in NodeJS

Tanmay Agrawal — Tue, 28 Nov 2023 03:52:19 +0000

In Node.js, the EventEmitter class is a core module that facilitates communication between objects in a publisher-subscriber pattern. It allows for the implementation of event-driven architectures, where certain parts of the code can emit events, and other parts can listen for and respond to those events. The EventEmitter enables decoupling of different parts of an application, making it easier to build scalable and modular systems.

Here's a brief overview of how the EventEmitter works:

1.Event Subscription: You can create an instance of EventEmitter and use the on method to subscribe to events.

const EventEmitter = require('events'); 
const myEmitter = new EventEmitter();  
myEmitter.on('event', () => {    
    console.log('an event occurred!'); 
});

2.Event Emission: You can use the emit method to trigger an event.

`myEmitter.emit('event');`

3.Passing Data with Events: You can pass data along with events to provide context or additional information.

myEmitter.on('dataEvent', (data) => {console.log('Received data:', data); });  myEmitter.emit('dataEvent', { key: 'value' });

4.Error Events: The EventEmitter also has special support for error events, allowing you to handle errors more effectively in asynchronous code.

myEmitter.on('error', (err) => {     console.error('Error occurred:', err); });  myEmitter.emit('error', new Error('Something went wrong'));

The EventEmitter is the foundation for many of the asynchronous operations in Node.js, such as handling HTTP requests, file I/O, and other events. It enables developers to create robust and scalable applications by facilitating the communication and coordination of various components and modules within a Node.js application.

Example of combined concepts of File System, Modules and `EventEmitters`

code in the self created module logEvent.js

const { format } = require("date-fns");
const { v4: uuid } = require("uuid");
const fs = require("fs");
const fsPromises = require("fs").promises;
const path = require("path");

const logEvents = async (message) => {
  const dateTime = `${format(new Date(), "ddMMyyyy \t HH:mm:ss")}`;
  const logItem = `${dateTime}\t${uuid()}\t${message}\n`;

  try {
    //This will create a file eventLog.txt  inside a folder name logs and write the logItem
    //first check if this directory exist or not
    if (!fs.existsSync(path.join(__dirname, "logs"))) {
      //if not exist then make the dir
      await fsPromises.mkdir(path.join(__dirname, "logs"));
    }

    await fsPromises.appendFile(
      path.join(__dirname, "logs", "eventLog.txt"),
      logItem
    );

  } catch (err) {
    console.log(err);
  }
};


module.exports = logEvents;

code in the index.js

const logEvents = require("./logEvents");
//working with Events common-core module
const EventEmitter = require("events");
//This is strange syntax but it is from docs.
class MyEvent extends EventEmitter {}

//initialize the object
const myEvent = new MyEvent();
// so .on listens for the event, here it is listening for log even
myEvent.on("log", (msg) => logEvents(msg));
//simulating a 2 sec delay on event emitter here

setTimeout(() => {
  //emit the event log so we use .emit
  myEvent.emit("log", "Message : log event emitted");
}, 2000);

In this case the ouput will be a new folder created logs and in this folder there will be a file with name eventlog.txt and in that file there will be the message in each log as follows :
20102023 15:46:12 4acb4dd9-020a-488c-9e3a-6df12630dad3 Message : log event emitted

References to the above source of information are from the YT videos of Dave Gray

Basics of Node.js

Tanmay Agrawal — Thu, 09 Nov 2023 05:52:14 +0000

I have started learning Node.js from YT. And so I am making notes from my learning, here comes my first set of documentation from the YT tutorials, I try to make my notes as much readable as possible for the general readers as well.
Please, do write in comments if these notes are helpful and what else you would suggest that will make these notes more readable and useful for you.

documentation source : https://nodejs.org/en/docs

How NodeJS differs from vanilla JS ?

Node runs on a server - Not in browser (so it is backend not frontend)
The console is the terminal window;
It has global object, can me checked by making simple console.log(global) whereas in vanilla JS it is the window object.
NodeJS use's commonJS modules instead of the ES6 modules (commonJS uses require statement where as ES6 modules uses import statement)

//common JS import example
const os = require("os");
const path = require("path");

console.log(os.type()); // windows_NT
console.log(os.version()); // windows 10 Home Single Language
console.log(os.homedir()); // c:\\Users\Tanmay
console.log(__dirname); //prints out the folder location in which server.js is kept
console.log(__filename); //prints out the path location of the server.js
console.log(path.dirname(__filename)); // prints out the directory path of the file server.js
console.log(path.extname(__filename)); //gives the extension of the file here it is .js
console.log(path.basename(__filename)); //only basename, here it is server.js
console.log(path.parse(__filename)); //gets and object with value of root, dir, base, ext, and name

Importing the modules

Let us see how we can export and import modules in NodeJS, for this let us assume we have two files, one file is the calculator.js and other is the math.js, for simplicity we make simple calculator functions add, subtract, multiply and divide in the file math.js and then export these functions using
module.exports = {} which will export all the functions inside the object block.

let us see this example
math.js

//Math.js
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;

//another method to do is
exports.mod = (a, b) => a % b;

module.exports = { add, sub, mul, div };

inside calculator.js now:

calculator.js

// const math = require("./math");
// console.log(math); this will give out the complete object of all functions,

//Another way is destructuring

const { add, sub, mul, div } = require("./math");

Event Emitter in Node.js

Here's a brief overview of how the EventEmitter works:

Event Subscription: You can create an instance of EventEmitter and use the on method to subscribe to events.

const EventEmitter = require('events'); 
const myEmitter = new EventEmitter();  
myEmitter.on('event', () => {    
    console.log('an event occurred!'); 
});

Event Emission: You can use the emit method to trigger an event.

myEmitter.emit('event');
Passing Data with Events: You can pass data along with events to provide context or additional information.

myEmitter.on('dataEvent', (data) => {console.log('Received data:', data); });  myEmitter.emit('dataEvent', { key: 'value' });

Error Events: The EventEmitter also has special support for error events, allowing you to handle errors more effectively in asynchronous code.

myEmitter.on('error', (err) => {     console.error('Error occurred:', err); });  myEmitter.emit('error', new Error('Something went wrong'));

File System Module

Documentation of file-system modules:
https://nodejs.org/docs/latest-v20.x/api/fs.html

The major modules that are used in the file systems are :

read
write
append
unlink (delete)

here are some of the easy examples to understand :

Read files

This is the simplest example, here i had some file with the name starter.txt before I did this

const fs = require("fs");

fs.readFile("./starter.txt", "utf-8", (err, data) => {
  if (err) throw err.message;
  console.log(data); //this will return a buffer <Buffer 48 69 20 6d 79 20 6e 61 6d 65 20 69 73 20 54 61 6e 6d 61 79> if we dont use 'utf-8', however we can change this buffer by doing data.toString() in the readable format
});


//According to the documentation if we have any uncaught excemption then we need to exit, for this will use the process.on
process.on("uncaughtException", (err) => {
  console.log(`uncaught Exception Error : ${err} `);
  process.exit(1);
});

Note: here the readFile is basically the async function, so it will read the file while it is reading it will go ahead and execute the other code that are non blocking execution context

Notice in above we are hard-coding the path i.e, fs.readFile("./starter.txt",...
this is not such a good practice, we can do it in a better way for example like this:
fs.readFile(path.join(__dirname, "starter.txt") here we have imported the path module from path and the __dirname gives out the path of the folder, and we are joining it with our file starter.txt
incase we had another folder lets say files then we would have done this as
fs.readFile(path.join(__dirname, "files", "starter.txt") i.e, first we joint it by folder name and then the file name
[[Basics of NodeJS]]

Write ,Append, Delete and Rename files

const fs = require("fs");
const path = require("path");

fs.readFile(path.join(__dirname, "starter.txt"), "utf-8", (err, data) => {
  if (err) throw err.message;
  console.log(data); //this will return a buffer <Buffer 48 69 20 6d 79 20 6e 61 6d 65 20 69 73 20 54 61 6e 6d 61 79>
});

fs.writeFile(
  path.join(__dirname, "newFile.txt"),
  "Something is written in here",
  (err) => {
    if (err) throw err;
    console.log("Writing complete");
  }
);
//According to the documentation if we have any uncaught excemption then we need to exit, for this will use the process.on 
process.on("uncaughtException", (err) => {
  console.log(`uncaught Exception Error : ${err} `);
  process.exit(1);
});

//Output
//data of the readfile...
//Writing complete

Now as we know that the behavior of the JS here is asynchronous , so now reading, writing and appending to the file could not be predicted, in order to control this we have to then nest one operation inside the other operations callback function.
For example if I have to say, that read the file then write something to the file and append only if that file exist and something had written to it, and then rename the file to newname. Then the code will look like something as follows:

Avoid this type of nesting since it looks like we will be making callback hell

const fs = require("fs");
const path = require("path");

fs.readFile(path.join(__dirname, "starter.txt"), "utf-8", (err, data) => {
  if (err) throw err.message;
  console.log(data); //this will return a buffer <Buffer 48 69 20 6d 79 20 6e 61 6d 65 20 69 73 20 54 61 6e 6d 61 79>
});

//Writing into a new file here

fs.writeFile(
  path.join(__dirname, "newFile.txt"),
  "Something is written in here",
  (err) => {
    if (err) throw err;
    console.log("Writing complete");
    fs.appendFile(
      path.join(__dirname, "newFile.txt"),
      "\n\n Something is appended in here",
      (err) => {
        if (err) throw err;
        console.log("Append complete");
        fs.rename(
          path.join(__dirname, "newFile.txt"),
          path.join(__dirname, "renamedFile.txt"),
          (err) => {
            if (err) throw err;
            console.log("Renaming complete");
          }
        );
      }
    );
  }
);
//According to the documentation if we have any uncaught excemption then we need to exit, for this will use the process.on

process.on("uncaughtException", (err) => {
  console.log(`uncaught Exception Error : ${err} `);
  process.exit(1);
});

//Output
//data of the readfile...
//Writing complete
//Append complete
//Rename complete

This is good now, we can control the behavior of this asynchronous functions, but wait, doesn't it looks like something? Yes, it is the callback hell, and therefore it is necessary to avoid this. In order to do this we have to take advantage of async await method of JS and promises.

const fsPromises = require("fs").promises;
const path = require("path");

const fileOp = async () => {
  try {
    //1. Reading the file
    let data = await fsPromises.readFile(
      path.join(__dirname, "starter.txt"),"utf-8");
    //Loging in console that reading
    console.log(data);
    //Writing the data in another File
    await fsPromises
      .writeFile(path.join(__dirname, "lorem.txt"), "Writing from Promise")
      .then(() => console.log("Writing"));
    //Appending the data that was read from the fist file
    await fsPromises
      .appendFile(path.join(__dirname, "lorem.txt"), ` \n\n ${data}`)
      .then(() => console.log("appending"));
  } catch (err) {
    console.log(err);
  }
};  

fileOp();

process.on("uncaughtException", (err) => {
  console.log(`Uncaught Exception : ${err}`);
  process.exit(1);
});

Read/Write file Stream examples for large chunk of data

const fs = require("fs");
const path = require("path");

const rs = fs.createReadStream("./lorem.txt", "utf-8");
rs.on("data", (chunkData) => console.log(chunkData));

//suppose if we have to write to another file;

const ws = fs.createWriteStream("./newText.txt");

rs.pipe(ws); // it is an efficient method to write on the file from the read data of read stream
//alternatively we could have done it as
// rs.on('data', dataChunk=>{
//     ws.write(dataChunk);
// })

Creating and Deleting File Directory

const fs = require("fs");
const path = require("path");

//1. Creating a directory
//Checking if dir already exists ?
if (!fs.existsSync("./new")) {
  //using mkdir if exists
  fs.mkdir("./new", (err) => {
    if (err) throw err;
    console.log("Directory created");
  });
} else console.log("directory already exists");

//2. Removing the directory
//Checking if dir already exists ?
if (fs.existsSync("./new")) {
  //remove dir if exists
  fs.rmdir("./new", (err) => {
    if (err) throw err;
    console.log("Directory Removed");
  });
} else console.log("directory does not exists");
process.on("uncaughtException", (err) => {
  console.log(`Uncaught Exception : ${err}`);
  process.exit(1);
});

That's it for today, This post will be continued in the next post, I hope these notes can be useful in refreshing the concepts of Node.js once again for all my fellow devs

Understanding parts of URL

Tanmay Agrawal — Wed, 08 Nov 2023 05:31:52 +0000

Understanding parts of an URL

In the context of web development, the URL path refers to the part of the URL that comes after the domain name and includes various parameters and components. These parameters are used to provide additional information to the server or to specify certain resources or actions. Here are some common parameters that can be present in the URL path:

Protocol:
- The protocol specifies the communication protocol being used. Common examples include HTTP, HTTPS, FTP, and more.
- Example: https://www.example.com
Domain Name:
- The domain name identifies the specific web domain being accessed. It represents the unique address of the website or web application.
- Example: https://www.example.com
Port:
- The port number is used to identify a specific process or application on a server. It is often included in the URL to specify the destination port for the communication.
- Example: https://www.example.com:8080
Path:
- The path specifies the specific resource or location within the web server. It follows the domain name and may include one or more path segments separated by slashes.
- Example: https://www.example.com/products/electronics
Query Parameters:
- Query parameters provide additional data to the server and are appended to the URL after a question mark. They consist of key-value pairs separated by ampersands.
- Example: https://www.example.com/search?q=keyword&page=1
Anchor or Fragment Identifier:
- The anchor or fragment identifier is used to identify a specific location within a web page. It is indicated by a hash symbol followed by the anchor name.
- Example: https://www.example.com/about#section2

Understanding these different parameters in the URL path is essential for handling various types of requests, parsing the incoming data, and directing the user to the appropriate resources or actions on the server-side application.

Node Package Manager🦆🦆🦆🦆

Tanmay Agrawal — Tue, 07 Nov 2023 06:04:17 +0000

The documentation for the node module is given in the following documentation link
NPM stands for Node Package Manager
https://www.npmjs.com/

Example of installing the NPM module `nodemon` globally

npm i nodemon -g

nodemon basically automatically restarts the server when we save the file on making changes. by default it watch index.js . But it can be change in package.jsonconfiguration

Example of installing the package locally

In order to do that, we have to firs initialize the npm,

npm init

This will create the folder package.json
This file is important, because it is what npm read what dependencies is important to install for the project.

npm i date-fns

now this date-fns will be installed as a dependencies to the package.json . This can be seen in the package.jsonfile in the key dependencies added.

Now at this point it can be seen that another folder is created node_modules now this folder has additional dependencies on the package module that we have just installed, this folder is the huge chunk of data, we usually want to avoid it to publish when we are making a repo.
so it is best to add .gitignore file and then mention the name of the node_modules folder name in it so it gets ignored while we make the repository and push into the branch.

Installing a package as a dev dependencies

The nodemon as we have installed above was a global dependencies, but we can also deploy it as an dev dependencies.

npm i nodemon -D

How to configure Scripts in `package.json`

{
  "name": "file-system-module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon server",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

In the above example, the snippet shown is from the package.json notice the scripts there,
"dev" : "nodemon server" is added, The nodemon is added as the dev dependencies.
*What this line does is when we do npm run dev it will basically do nodemon server *

Semantic Versioning

How to install a specific version ?

npm i uuid@9.3.1

to update

npm update uuid

to uninstall

npm uninstall uuid

npm rm uuid

to uninstall from dev dependencies

npm rm nodemon -D

Notice to remove the dev dependencies from the package.json file as well, it is a good practice to always check.

So this is most of it, I am just sharing what I am learning everyday, So making notes and making them in such a way that the notes get well documented, helps me to make some useful posts on this platform. I hope my notes will also helps the new learners who have just started their journey in web dev like me.

Also, I would like to announce that I have just finished courses on JavaScript and I am willing to collaborate on projects, If you are also a beginner or intermediate, just comment, and we can create a discord server and discuss small project ideas together.

JavaScript Objects Recap

Tanmay Agrawal — Sat, 04 Nov 2023 04:57:38 +0000

Before understanding objects let us now discuss about the primitive and non primitive values:

The primitive values are those which are immutable.
A primitive value is a value that has no properties or methods.

3.14 is a primitive value
what does this means?
if x = 3.14, you can change the value of x, but you cannot change the value of 3.14.

A primitive data type is data that has a primitive value.

JavaScript defines 7 types of primitive data types:

string
number
boolean
null
undefined
symbol
bigint

example:

let str = 'Hello';
str += ' World'; // Create a new string, 'Hello World', and assign it to str

What are JS Objects then?

A JavaScript object is a collection of named values
Actually they are also variables, but it can hold many pairs of keys and values:

The objects are mutable, means once assigned the values can be changed.

let us set and example of how to declare an object

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

and these are some of the ways in which we can access the properties of the objects

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

console.log(person.age) //30
console.log(person["firstName"]) //John

This mutability is one of the key characteristics of objects in JavaScript. Let's explore how objects are mutable and what that means in practice:

Changing Object Properties:

You can modify the properties of an object by assigning new values to them. This includes adding new properties, updating existing ones, or deleting properties.

// Creating an object
const person = {
  firstName: 'John',
  lastName: 'Doe'
};

// Modifying properties
person.firstName = 'Jane'; // Update existing property
person.age = 30; // Add a new property
delete person.lastName; // Delete a property

Reference-Based Behavior:

Objects in JavaScript are reference-based data structures. When you assign an object to a variable or pass it as an argument to a function, you are actually working with a reference to the object, not a copy of it. This means that if you modify the object through one reference, those changes will be visible through all references to that object.

const obj1 = { prop: 'value' };
const obj2 = obj1; // Both obj1 and obj2 reference the same object

obj2.prop = 'new value'; // Modifying the object through obj2
console.log(obj1.prop); // Outputs 'new value' because obj1 and obj2 reference the same object

Passing by Reference:

When you pass an object as an argument to a function, you are passing a reference to that object. Any changes made to the object inside the function will affect the original object.

function updateObject(obj) {
  obj.prop = 'updated value';
}

const myObject = { prop: 'original value' };
updateObject(myObject);
console.log(myObject.prop); // Outputs 'updated value' because the object was modified inside the function

Let us consider another example

const person = {
  fname : 'John',
  lname : 'Doe',
  age:30,
  fullName : function(){
    console.log(this.fname + ' ' + this.lname)
  },
  address : {
  street : '123 street',
  city : 'New York',
  state : 'NY'
  }
}

const human = {...person} // the spread operator creates the shallow copy, what does this means ?
human.address.city = 'Los Angeles'
human.age = 31
console.log(person.address.city) //Los Angeles
console.log(person.age) // 30
//so here we can see that the nested object has the same reference to its original one, so
//as the value changes in the copied object it is reflected in the original one as well.

//Also if we assign this person object to another variable, the complete object is copied
//with the reference value

const man = person
console.log(man.fname) //john
man.age = 32
console.log(person.age) // 32 ---notice here it is changed
console.log(human.age) // 31 ---but her id doesnt changed! isnt this is intresting?

If you need a deep copy (i.e., a copy where nested objects and arrays are also cloned), you would need to use a recursive function or a library like lodash to perform a deep copy manually. The spread operator is convenient for shallow copies and quickly creating new objects or arrays with similar structures, but it doesn't handle deep copies.

You can also check the prototype property as follows, more on Prototypes

console.log(Object.getPrototypeOf(person))

Deep copy using the lodash library

This is a simplest way to create the deep copy of the nested objects :

const _ = require('lodash');

const originalObj = {
  a: 1,
  b: {
    c: 2,
    d: [3, 4],
  },
};

const deepCopiedObj = _.cloneDeep(originalObj);

// Modify the copied object without affecting the original:
deepCopiedObj.b.c = 5;

console.log(originalObj.b.c); // Outputs 2 (original is unaffected)
console.log(deepCopiedObj.b.c); // Outputs 5 (modified in the copy)

Defining methods inside objects

In JavaScript, there are several ways to define functions as methods within an object. Methods are functions that are attached to objects and can be called in the context of those objects. Here are some common ways to define functions as object methods:

Method Using Function Expression:

const myObject = {
  myMethod: function () {
    // Method logic
  }
};

Method Using Method Shorthand (ES6):

const myObject = {
  myMethod() {
    // Method logic
  }
};

Method as Arrow Function (ES6):

const myObject = {
  myMethod: () => {
    // Method logic
  }
};

Be aware that arrow functions do not have their own this context; they capture the this value from the surrounding lexical context. See, This Keyword

Method Assignment:

const myObject = {
  myMethod: someFunction
};

function someFunction() {
  // Method logic
}

Computed Property Method Names (ES6):

const methodName = 'myMethod';
const myObject = {
  [methodName]() {
    // Method logic
  }
};

What is `Object.assign` ?

Object.assign() is a method in JavaScript that is used to copy the values of all enumerable own properties from one or more source objects to a target object. It is often employed for object cloning or to merge objects. It does not create a new object but instead modifies an existing one.

Here's an example of how Object.assign() works:

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const result = Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: 5 }
console.log(result); // { a: 1, b: 4, c: 5 }

In this example, the Object.assign() method merges the properties of the source object into the target object. If the target object already has a property that is also present in the source object, the value from the source object overwrites the value in the target object.

The main difference between using Object.assign() and the usual object declaration is that Object.assign() allows you to merge multiple source objects into a single target object, thereby combining their properties. The usual object declaration, on the other hand, simply creates a new object with the specified properties.

For instance, in the case of the usual object declaration:

const obj = { a: 1, b: 2 };

the obj object is created with the specified properties a and b. However, you cannot directly merge properties from another object into it without manually copying each property. Object.assign() simplifies this process by allowing you to merge properties from multiple source objects into a target object in a single step.

Creating Objects with constructor v/s usual Object creation

In JavaScript, you can create objects using either the object constructor syntax or the normal object creation syntax. While both methods achieve the same result of creating objects, they differ in terms of syntax and behavior.

1.Object Constructor Syntax:

   const obj = new Object();
   obj.property = "value";

2.Normal Object Creation:

   const obj = { property: "value" };

The key differences between using the object constructor syntax and normal object creation are as follows:

Syntax Clarity and Conciseness: The normal object creation syntax is more concise and easier to read, write, and understand. It allows you to create objects in a straightforward and simple manner.
Performance: Normal object creation is generally more performant than using the object constructor syntax, especially when creating multiple objects, as it does not involve the overhead of calling the constructor function.
Prototype Chain: When using the object constructor syntax, the created object inherits properties and methods from the Object prototype, while with normal object creation, the prototype chain is not involved.
Extensibility: Both approaches allow you to add properties and methods to the object dynamically. However, the normal object creation syntax is more commonly used in modern JavaScript development for its simplicity and readability.

In practice, the normal object creation syntax is widely preferred due to its simplicity, conciseness, and performance benefits. It has become the standard way to create objects in modern JavaScript applications.

Error Handling in JavaScript

Tanmay Agrawal — Fri, 03 Nov 2023 05:54:54 +0000

consider the following code

const url = 'https://jsonplaceholder.typicode.com/posts'
fetch(url).then(res=>res.json()).then(data=>console.log(data))

Although the above code is so lean, what happens if there is a little mistake in the url ? what if we change from posts to post here. The error will not be catch in that case, So in order to handle it there is a better method to use the .catch and throw new Error('custom error message here!')

and to explain this consider the following code:

const getJson = function(url, errmsg){
  return fetch(url).then(res=>{
    if(!res.ok) throw new Error(errmsg)
    return res.json()
  })
}

getJson('https://jsonplaceholder.typicode.com/posts', 'something went wrong').then(data=>console.log(data)).catch(err=>console.log(err.message))

Now this is the most simplified version, but here we have added the custom error message as 'something went wrong!' but as per out code we can add accurate messages here that will be catch at the end by the .catch block

We can also check the response text, if we see the res object in the above code there is a property called status, that contains 200 for OK and 404 for bad network, so we can also log the res.status with the custom message so that the error response is clear.

Example in below code, lets make a mistake in url and change posts to post

const getJson = function(url, errmsg){
  return fetch(url).then(res=>{
    if(!res.ok) throw new Error(`${res.status} : ${errmsg}`)
    return res.json()
  })
}

getJson('https://jsonplaceholder.typicode.com/post', 'something went wrong').then(data=>console.log(data)).catch(err=>console.log(err.message))

//Output:
//404: Something went wrong

`try{}catch{}` Block

try{
//do something
}catch(err){
alert(err.message)
}

This is a try catch block helpful to handle error, let us see a simple example

const posts = async function(){
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  if(!res.ok) throw new Error('Something went wrong')
  const data = await res.json()
  return(data)

  //incase promise is rejected

};

(async function(){
  try{
    const post = await posts();
    console.log(post)
  }catch(err){
    console.log(err.message)
  }
})();

In this example if the promise is rejected the error message is thrown, i,e, the condition when the response.ok is not true

Now consider the following code example

function divide(x, y) {
  try {
    if (y === 0) {
      throw new Error("Division by zero error");
    }
    return x / y;
  } catch (error) {
    console.log("Error caught:", error.message);
    // Handle the error
    return 0;
  } finally {
    console.log("Finally block always executed");
    // Perform cleanup tasks or resource deallocation
  }
}

console.log(divide(6, 2)); // Output: 3
console.log(divide(6, 0)); // Output: Error caught: Division by zero error, Finally block always executed, 0

try: The try block is used to enclose the code that might throw an exception. If an exception occurs within the try block, the control is passed to the corresponding catch block.

catch: The catch block is used to handle the exception that was thrown within the try block. It allows you to define the actions to be taken when a specific type of error occurs.

finally: The finally block is always executed, regardless of whether an exception is thrown. It is commonly used for cleanup tasks, ensuring that certain actions are performed irrespective of the occurrence of an error.

Why error handling is important ?

Error handling is crucial in programming, including in JavaScript, because it ensures that applications can gracefully manage unexpected issues, maintain stability, and provide a better user experience. Here are several reasons why error handling is important:

Preventing Application Crashes: Effective error handling prevents the application from crashing when unexpected issues or exceptions occur during runtime.
Enhancing User Experience: Proper error handling helps create a better user experience by providing informative error messages or feedback, guiding users on how to proceed when errors occur.
Identifying and Resolving Issues: Error handling facilitates the identification and debugging of issues by providing valuable information about the nature and location of errors, making it easier for developers to resolve them.
Ensuring Application Stability: Handling errors in a controlled manner helps maintain the stability and reliability of the application, ensuring that it continues to function as intended even when unexpected situations arise.
Protecting Data Integrity: Proper error handling protects the integrity of data by preventing data loss or corruption that may occur due to unhandled exceptions or errors.
Maintaining Security: Effective error handling contributes to maintaining the security of the application by preventing potential vulnerabilities that could be exploited by malicious actors.
Facilitating Maintenance and Upgrades: Implementing robust error handling practices makes the codebase more maintainable and enables easier future upgrades or modifications to the application.

By implementing comprehensive error handling practices, developers can build more robust, stable, and user-friendly applications, leading to improved user satisfaction and overall application reliability.

DEV Community: Tanmay Agrawal

Asymptotic analysis

What is an Algorithm ? Lets discuss whats all the fuss is about!

Asymptotic analysis

Here is a short list of Time and Space complexity

Sorting Techniques:

Searching Techniques:

Inserting and Deleting Techniques:

#Microservices in Nodejs

Lets demystify the MicroServices

Node.js: A Microservices Powerhouse

JavaScript Advance Concepts

Call by Value:

Call by Reference:

Note:

Redux Toolkit Simplified

Simple example of using Redux toolkit

Middleware's in NodeJS

Complete Example of the Code with Middle-ware concept

Difference between app.use() and app.all()

Express JS - Learn what Matters.

Let us see how to serve an Index.html file using express

Route Handlers

Steps to write the Express server

Steps to write the API

Event Emitter in NodeJS

Example of combined concepts of File System, Modules and EventEmitters

Basics of Node.js

Importing the modules

Event Emitter in Node.js

File System Module

Read files

Write ,Append, Delete and Rename files

Read/Write file Stream examples for large chunk of data

Creating and Deleting File Directory

Understanding parts of URL

Understanding parts of an URL

Node Package Manager🦆🦆🦆🦆

Example of installing the NPM module nodemon globally

Example of installing the package locally

Installing a package as a dev dependencies

How to configure Scripts in package.json

Semantic Versioning

How to install a specific version ?

JavaScript Objects Recap

Changing Object Properties:

Reference-Based Behavior:

Passing by Reference:

Deep copy using the lodash library

Defining methods inside objects

What is Object.assign ?

Creating Objects with constructor v/s usual Object creation

Error Handling in JavaScript

try{}catch{} Block

Why error handling is important ?

Difference between `app.use()` and `app.all()`

Example of combined concepts of File System, Modules and `EventEmitters`

Example of installing the NPM module `nodemon` globally

How to configure Scripts in `package.json`

What is `Object.assign` ?

`try{}catch{}` Block