Forem: Suresh Pal Pranta

TypeScript Basics

Suresh Pal Pranta — Fri, 15 Apr 2022 10:38:41 +0000

TypeScript vs JavaScript

TypeScript is a superset of JavaScript. That means TypeScript has some extra features to JavaScript. In JavaScript, we don't need to define the type but in TypeScript, we have strictly followed the type. As a result, the chance of bugs will be lower.

Basic Types

Some common types are - number, string, boolean, undefined, null, unknown, any.

Number
In TypeScript, a variable that will store a decimal number the type of the variable should be defined as type number. While big integer gets the type bigint

const total: number = 1000;
const discount: number = 1000*0.1;
const max: bigint = 10n ** 9n;

String
In TypeScript a variable that will store textual data, the type of the variable should be defined as type string

const name: string = "Pranta";
const position: string = "Frontend Developer";

Boolean
This is one of the basic types which contains boolean value true or false

const loading: boolean = true|false;

Array
We can define a type of array in three ways. The First two ways have explicitly defined the types. The third way simplifies the task by using an interface or type

First way -
const numbers: number[] = [1, 2, 3]
const products: string[] = ["bag", "laptop", "mobile"]

Second way -
const numbers: Array<number> = [1, 2, 3]
const products: Array<string> = ["bag", "laptop", "mobile"]

If we have an array of objects then we can use the type keyword or define an interface specifying the type of all properties in an object. Best way to use interface.

const IProducts {
   name: string;
   price: number;
}
const products: IProducts[] =[{ name: "Mobile", price: 10000}, { name: "Mobile", price: 10000 }];

Any
The any type is rarely used. It helps to work with the existing JavaScript code. When all the data types are not known then we can assume it as any type.

const looselyTypedVariable: any = {};
console.log(looselyTypedVariable.name); //don't give any error

But, there are some drawbacks to using any type. With any type TypeScript will not give any error whether we are accessing a property that doesn't exist in that object.

const strictlyTypedVariable: {name: string} = {name:"Pranta"};
console.log(strictlyTypedVariable.age); //show error

Without using any we can use unknown type as well which is more meaningful. We should try to avoid using any when not necessary as it doesn't ensure the type safety.

MongoDB with Node.js, CRUD Operation

Suresh Pal Pranta — Fri, 21 Jan 2022 11:04:37 +0000

MongoDB

MongoDB is a no-SQL database. It represents data as JSON documents. It maintains some collections where data are stored as documents. It is much more flexible than an SQL database since we can store documents of different formats in the same collection. One more advantage is that we can use JavaScript as our query language.

Node.js

Node.js is a non-blocking JavaScript runtime environment. Client-side JavaScript codes are executed in the browser. Node.js is used to run JavaScript code outside the browser.

Node.js vs JavaScript

JavaScript is a programming language that is used for front-end development while Node.js is used for server-side development. JavaScript codes are executed in the browser normally. With the help of Node.js, we can run JS code outside the browser.

Connecting MongoDB with node.js server

Go to MongoDB atlas and create an account.
Create a cluster.
Go to database access and create a user.
Allow network access.
Click on connect and then connect your application.

Replace the username and password carefully in the connection string of your cluster with valid username and password.

const { MongoClient } = require('mongodb');
const uri = "mongodb+srv://<username>:<password>@cluster0.yxq3j.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";

const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });
client.connect(err => {
  const productsCollection = client.db("testDB").collection("products");
  console.log(“Database connected successfully!”);  
  // client.close();
});

Create or Insert Operation

We can insert a single document or multiple documents into a collection. To insert a single document we need to use the insertOne() method.

const product = {
      category: "Shirt",
      price: 200
}
const result = productsCollection.insertOne(product);

If we want to insert many documents then we need to use the insertMany() method.

const docs = [
      { name: "apple", price: 30 },
      { name: "orange", price: 50 }
];
const result = foods.insertMany(docs);

Read or Find Operation

To find a document from the database we need to use findOne() method and we can pass query and options as parameter of this method to find our desired document.

// Query for a mobile that has the title 'Redmi Note 4'
const query = { title: "Redmi Note 4" };
const mobile = movies.findOne(query);

To find multiple documents from a collections we need to use find() method. This method will return a cursor and we can apply cursor methods next(), toArray(), forEach().

const cursor = products.find({});
const products = cursor.toArray();

Update Operation

To update a single document we need to use updateOne() method. In this method we can pass three parameters filter, updateDoc and options which is optional.

// create a filter for a product to update
const filter = { name: "Redmi Note 4" };
// create a new document if no documents match the filter
const options = { upsert: true };
// updating a document that sets the price of the mobile
const updateDoc = {
      $set: {
        price: 20000
      },
};
const result = movies.updateOne(filter, updateDoc, options);

To update multiple documents we need to use updateMany() method.

Delete Operation

We can delete a single document or multiple documents if we want. To delete a single document we need to use deleteOne() method and passing a query parameter to this method we will specify which documents we want to delete.

const query = { title: "Redmi9" };
const result = mobileCollection.deleteOne(query);

To delete multiple documents we need to use deleteMany() method.

React.js Core Concepts

Suresh Pal Pranta — Thu, 20 Jan 2022 19:16:28 +0000

React.js and its pros & cons

React is a declarative, component-based JavaScript library for building user interfaces.
Pros:

Use virtual DOM to effectively render user interfaces.
Supports component-based design which is reusable and easy to manage.
Single page application means rendering different components on the same page efficiently without any reload. Which makes a better user experience.
The HTML-like syntax is easy to learn and use.

Cons:

Continuously updated features which is a bit challenging for developers to cope up with new documentation.
Still contains class-based components example in documentation instead of functional components.

JSX

JSX means JavaScript XML which allows HTML-like syntax with JavaScript in react. Using JSX we can create dynamic content in our react application easily. Without JSX the code is a bit lengthy and complex while using JSX the code is simple and easy to understand. Babel is used by React to convert the JSX to React elements.

import React from "react";
const Blogs = () => {
    return (
        <div>
            <img
                src="https://i.ibb.co/2SfqRWr/maxresdefault.jpg"
                alt=""
                width="100%"
            />
        </div>
    );
};

export default Blogs;

In the above code snippet inside the return statement it looks like html syntax actually it is JSX notation which makes us easier to understand what our code structure will looks like.

Virtual DOM

It is a virtual representation or copy of the real DOM object. Whenever anything changes in our document react will create a new virtual DOM and compare it with the previous DOM, find out the change between these two DOMs using diff algorithm and finally update the specific changes into the real DOM without updating the entire dom. This makes DOM-manipulation more effective without updating the entire DOM whenever a small part of the DOM is changed.

Props and State

Props are mainly used for passing dynamic data from parent component to child components while the state is a variable that is used to store information about a specific component and that can be changed dynamically. Props are read-only and immutable which means we can not change props. When the state changes re-render will happen dynamically.

import React from "react";
const Blogs = () => {
    const blogs = ["blog1","blog2","blog3","blog4","blog5",]
    return (
        blogs.map(blogTitle => <Blog title={blogTitle}></Blog>)
    );
};
export default Blogs;

import React from "react";
const Blog = (props) => {
    const {title} = props;
    return (
        <h1>{title}</h1>
    );
};
export default Blog;

Lifting State Up

We cannot pass states from child to parent component. React follows a top-down approach for passing state between many level components. When a parent component needs the state we need to lift the state up to the parent component and pass this as a prop to the child components. This is called lifting state up.

Props Drilling and Context API

When data are passed from component to component by props on a deeper level this is called props drilling.
The best way to pass data 4-5 layers down is using context API. Context API is used to pass multiple data all over the document which is simple and easy to use. Whenever we need to share multiple data between many level components we can use context API to provide those data to the whole document.
First, we have to create a context then we have to wrap our document between context Providers where we should specify the value we want to pass. We can get the value we provide from anywhere with the help of useContext hook.

Custom hook

Hooks are mainly a JavaScript function that can perform some task and returns the results we need. Building our own custom hook will help us to simplify our code which is easy to understand. For creating a custom hook we have to create a JavaScript function and export it so that it can be imported from any component we want and use it.

import { useState } from "react";

const useProducts = () => {
    const [products, setProducts] = useState([]);
    fetch(url)
    .then(res => res.json())
    .then(data => setProducts(data));
    return { products };
};

export default useProducts;

const products = useProducts();

Performance Optimization

To optimize a react.js app we should try to divide different parts of our application into smaller chunks, use react fragments to avoid unnecessary elements for wrapping, try to avoid using an index as a key for the map, using useMemo, pure component, use of spread operator, passing object as props, etc. which will prevent unnecessary component re-render in React.js.

JavaScript Concepts

Suresh Pal Pranta — Thu, 20 Jan 2022 15:21:01 +0000

How does JavaScript work

JavaScript is a synchronous and single-threaded language. JavaScript maintains a concurrency model which is consists of a call stack, a heap, a callback queue, and an event loop. When any asynchronous function comes in call stack it will move this piece of code to the web Api’s and continue to the next line. When the asynchronous function completed its task it will be forwarded to the call back queue. Finally when the call stack is empty event loop works in FIFO style and takes one by one from the queue. That is how the overall process works.

Truthy and Falsy values in JavaScript

In JavaScript, truthy values are true, any number except zero, non-empty string, array, objects, etc.
Falsy values are false, 0, empty string, undefined, null, and NaN.

We can say that anything that is not falsy will be truthy in JavaScript.

Implicit Type Coercion

JavaScript attempts to coerce or convert an unexpected value type to the expected type; it is called implicit type coercion. When two operands of different data types need to compare or perform any operation then JavaScript tries to convert two different types of value to the same type and then compares or performs the operation.
For example, if we perform addition between a string and a number eg. “Pranta” + 123 then the output in the console we see “Pranta123”. This is because without indicating any error JS compiler change the data types of the number 123 to string like “123” and then perform the addition “Pranta” + “123” = “Pranta123”

console.log("Pranta"+123);
Output: "Pranta123"

Double equal `==` vs Triple equal `===`

== is called a loose equality operator because it compares only values of two operands. while === is called a strict equality operator because it compares both values and types of the variable. Most interesting part is == trigger implicit coercion but === does not.
For example,

“12” == 12 ? “Yes” : “No”; 
Output: Yes. Since it only checks values, not types.
“12” === 12 ? “Yes” : “No”; 
Output: No. Since both values and types are not the same.

Scope in JavaScript

Scope means the accessibility of variables and functions in different parts of our source code. There are 3 different types of scope in JavaScript. Global scope, local or function scope, and block scope.
Global scope means that we can access it from anywhere in our code. Local or function scope is when we declare any variable inside a function they are in functional scope or local scope. We cannot access those variables outside of the function. Block scope means that variables declared within curly braces are block-scoped we cannot access them outside of the block.

var price=100;
function total(){
   var total=price + (price/100)*10;
   console.log(total);
}

In the above code price is a global variable and it is globally scoped we can access it from anywhere. But total is a local variable and it is locally scoped so that we can not access it from outside of the function total().

API

API or application programming interface is a method of communicating between two applications. API takes a request from the client-side and tells the system what we want to do. After the task is completed it will give a response back.

GET vs POST

GET and POST are the two most common HTTP methods. Using the GET method we want to get data from the server specifying the resource path. POST method is used when we want to send any data to the server to insert it into the database. Data is sent inside the body of the request. Then server finds the data and performs the specified task. GET requests can be cached, bookmarked, and remain in browser history while POST requests are not.

//GET method
fetch(url)
.then(res => res.json())
.then(data => console.log(data));

//POST method
fetch(url,{
   method: "POST",
   headers:{
     "content-type": "application/json",
   }
   body: JSON.stringify(data);
})
.then(res => res.json())
.then(result => console.log(result));