DEV Community: Feroj Alam

Explanation on mongodb CRUD operations

Feroj Alam — Thu, 30 Dec 2021 12:24:17 +0000

Mongodb is used to store data that is a NoSQL database. Mongodb is a document-oriented database. In database we make CRUD operations to store and use data. C means Create, R means Read, U means update, and D means delete data. Now we know about these in detail.

Create: Create operations are used to insert documents into a collection.We can use it two ways. They are-

db.collection.insertOne()
db.collection.insertMany()

Using insertOne() we can create single document in a collection and using insertMany() we can create more than one document in a collection.
Example: Use of insertOne()

db.cars.insertOne(
//inserting Bugatti Veyron Mansory Vivere-2005 into cars collection
    {
       name: "Bugatti Veyron Mansory Vivere"
       model: "2005"
    }
)

Here one car data is inserted into car collection using insertOne() method.
Use of insertMany()

db.cars.insertMany([{
//inserting three cars along with their models into cars collection
       name: "Bugatti Veyron Mansory Vivere"
       model: "2005"
},{
      name: "Aston Martin AM-RB 001"
       model: "2018"
},{
       name: "Ferrari Pininfarina Sergio"
       model: "2013"
}])

Here three car data is inserted into car collection using insertMany() method.
Read: Read operation is used to get data from a collection. We can use two method to get data. They are-

db.collection.find()
db.collection.find(query)

Using find() method we can get all document from a collection because this method returns all document if we do not give any parameter. If we give any parameter to filter or specify document then it returns the filtered documents.
Example:

 db.cars.find() // no parameters
Output:
{ "_id" : ObjectId("1"), "name" : "Bugatti Veyron Mansory Vivere", "model" : "2005" }
{ "_id" : ObjectId("2"), "name" : "Aston Martin AM-RB 001", "model" : "2018" }
{ "_id" : ObjectId("3"), "name" : "Ferrari Pininfarina Sergio", "2013" : "2005" }

db.cars.find({"model": "2005"}) // with one paramter
output:
{ "_id" : ObjectId("1"), "name" : "Bugatti Veyron Mansory Vivere", "model" : "2005" }
Update: Update operation is used to modify document into a collection. We can use three methods to modify the existing document. They are- 
db.collection.updateOne()
db.collection.updateMany()
db.collection.replaceOne()

When we use updateOne() method it modify the given filtered document. It does not remove the field rather than it will add a new field to the document.
When we use updateMany() method it will modify all the documents which are given for filter.
When we use replaceOne() method it replace the entire document. It will replace the old fields and values with new data.
Example:

{
   "_id" : ObjectId("1"),
   "model" : 2005
}

We make update operations in these document.

updateOne({"_id" : ObjectId("1")}, {$set: { "new_model" : 2020}})
Output:
{
   "_id" : ObjectId("1"),
   "model" : 2005,
   "new_model" : 2020
}

updateMany({"_id" : ObjectId("1")}, {$set: { "name" : "NewName"}, $set: { "new_model" : 2020}})
Output:
{
   "_id" : ObjectId("1"),
   "model" : 2005,
   "new_model" : 2020
   "name" : "newName"
}

replaceOne({"_id" : ObjectId("1")}, { "new_model" : 2020})
Output:
{
   "_id" : ObjectId("1"),
   "new_model" : 2020
}

**Delete: **Delete operation is used to remove documents from a collection. We can use two methods to delete documents. They are-

db.collection.deleteOne()
db.collection.deleteMany()

When we use deleteOne() method it removes only the first document which is matched by query filter.
When we use deleteMany() method it will remove multiple documents at a time.
Example:

 db.cars.deleteOne(
//deletes one car having model "2013"
    { "model": "2013" }
)

It will delete only one car object of 2013 model.

db.cars.deleteMany(
//delete all cars having model "2013"
    { "model": "2013" }
)

It will delete all car objects of the 2013 model.

Explanation about react hooks

Feroj Alam — Thu, 30 Dec 2021 10:46:07 +0000

Hooks are an important thing in react functional component. For accessing state and other react features hooks are used. Today I am discussing react common hooks.

In react, 16.8 version hooks are introduced. Hooks are functions that “hook into” react state and lifecycle features from react functional components. If you need to add a state in your react application previously you have to add this by converting it into class. But after the introduction of react hooks, you can add state by using hooks into functional components. So class components are no longer needed.

Hooks are similar to javascript functions. You have to maintain 3 rules to use react hooks. These are-
hooks call only at the top level of a component.
hook call only inside the react functional components
hooks can not be conditional

useState hook: react useState hook used to track the application state. State means any data or property that can be changed.
If we want to use useState hook.First we have to import it from react.

Import {useState} from ‘react’;

After that we have to initialize it.

const FavoriteColor = () => {
    const [color, setColor] = useState(“”);
}
export default FavoriteColor;

useState takes the initial state and returns two values. One is the current state that is here color and another is a function to make changes in the state that is setColor.

useEffect hook: react useEffect hook is used to handle side effects such as data fetching from API, updating DOM etc.

Import {useEffect} from ‘react’;
const FavoriteColor = () => {
    useEffect( ()=> {
    //fetch API
}, [ ])
}
export default FavoriteColor;

useEffect takes two arguments one is a function we fetch data into this function another is a dependency which is optional. It is used for re-rendering. If there is an update that depends on something then we have to give it to the dependency.Then if there is any change in dependency the page will re-render.

useContext hook: useContext hook give us the power to manage application state globally. If there are so many nested components in our application.If we need to pass data to the last components in the application, because of uni-directional data flow we have to pass the data through every component before it goes to the required component that called props drilling. UseContext hook brought the solution to this. We can store the data in context and wrap all components by this context. After that, any component that needs to access or update this data can easily be done it by useContext hook.

import { useState, createContext } from "react";
const UserContext = createContext()
function App() {

  return (
    <UserContext.Provider value={user}>
      <Component5 />    
    </UserContext.Provider>
  );
}
function Component5() {
  const user = useContext(UserContext);
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

Explanation of JavaScript "this" keyword

Feroj Alam — Tue, 28 Dec 2021 20:26:44 +0000

this keyword is mostly used in object-oriented programming. Most of the beginners are confused with this keyword. Today I am trying to tell about this keyword easily so that everyone can understand.

Generally, this keyword refers to the object by which it is bounded.
this keyword has different values depending on the place of use.

In a method, this refers to the owner object.
Alone, this refers to the global object.
In a function, this refers to the global object.
In a function, in strict mode, this is undefined.
In an event, this refers to the element that received the event.
In the call() and apply() method this can refer to any object.

In a method:

const person = {
  firstName: "John",
  lastName : "Doe",
  id    : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
console.log(person.fullName()); //output John Doe

In this object fullName is a method. Here this in fullName method refers to owner object that means person object.

this Alone:

console.log(this); //output window

When we use this alone the owner is the global object so this refers to the window object.

“use strict”
console.log(this); //output window

If we use this alone in strict mode, it also refers to the global window object.

In a function:

function myFunction() {
  return this;
}
console.log(myFunction()); //output window

When we use this in a function this refers to the global window object.

If we use this in a function in strict mode then this is undefined.

“use strict”
function myFunction() {
  return this;
}
console.log(myFunction()); //output undefined

In an event:
If we use this in an event or javascript event handlers this refers to the element which is used to trigger the event. For example

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>

Here this refers to the button element because here button is the event trigger.

In call() and apply() method:
call() and apply() methods both are javascript built-in methods.Both of them are used to call an object method with another object as the argument.

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person2 = {
  firstName:"John",
  lastName: "Doe",
}
const person3 = {
  firstName:"Feroj",
  lastName: "Alam",
}
console.log(person1.fullName.call(person2)); //output John Doe
console.log(person1.fullName.apply(person3)); //output Feroj Alam

Here person1 object has no first name and last name. We use the call() method to use first name and last name from another object which is person2. We can also use apply() method to use the first and last name from another object that is person3. So that this refers to the person2 object and person3 object.

JavaScript string methods

Feroj Alam — Tue, 28 Dec 2021 13:27:34 +0000

Today I am telling you about the most important JavaScript string methods with explanations and examples.

charAt(): This method is used for extracting string characters. This method returns the character at a specific index in a string.

let text = "FEROJ ALAM";
let char = text.charAt(0); //output F

concat(): This method is used to join two or more strings together.

let text1 = "Feroj";
let text2 = "Alam";
let text3 = text1.concat(" ", text2); //output Hello World

concat() can be used instead of plus operator.

text = "Feroj" + " " + "Alam";  //output Feroj Alam
text = "Hello".concat(" ", "World!");  //output Hello World

These two line are same

includes(): This method is used to check that string we are searching for exists in that string. If string exists then it will return true, if not exist return false.

let text = "Feroj Alam, web developer.";
let result = text.includes("web"); // true

includes() method is case sensitive.

endsWith(): This method is used to check that string ends with the string that we are searching for. If exists it will return true otherwise return false. This method is case-sensitive.

let text = "Programming Hero";
let result = text.endsWith("Hero");//output true
let text = "Programming Hero";
let result = text.endsWith("hero");//output false

indexOf(): This method is used to find the position of a string. This method returns the first found string that we are looking for. If not found it returns -1. This method is also case-sensitive.

let text = "Hello world, welcome to the universe.";
let result = text.indexOf("welcome"); // output 13
let text = "Hello world, welcome to the universe.";
let result = text.indexOf("Welcome"); // output -1

lastIndexOf(): This method is used to find the last positioned string position. It starts to find the string from the last. It gives the index from starting 0. It returns -1 if the value is not found. This method is case-sensitive.

let text = "Hello planet earth, you are a great planet.";
let result = text.lastIndexOf("planet"); //output 36
let text = "Hello planet earth, you are a great planet.";
let result = text.lastIndexOf("Planet"); //output -1

replace(): This method is used to replace string for a given value or a regular expression. It returns a new string with replaced value. It does not change the original string.

let text = "Visit Microsoft!";
let result = text.replace("Microsoft", "Google"); //output Visit Google
let text = "Mr Blue has a blue house and a blue car";
let result = text.replace(/blue/g, "red"); //output Mr Blue has a red house and a red car

slice(): This method is used to extract specific strings. It returns the extracted string in a new string but does not change the original string. We have to give start and end index to slice or cut like (0, 5) and if we give a negative value it will extract from the last of string.

let text = "Hello world!";
let result = text.slice(0, 5);//output Hello
let result = text.slice(3);//output lo world!

split(): This method is used to split or separate words to make an array. It will return a new array. It does not change the original string.

let text = "How are you doing today?";
const myArray = text.split(" "); //output How,are,you,doing,today?
const myArray = text.split(""); //output H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

If we use (“ “) this as separator, string will split into words

startsWith(): This method is used to check that the string starts with the string that we are searching for. If found it returns true otherwise returns false. This method is case-sensitive.

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello"); //output true

substr(): It is used to extract or cut a part of a string.it receives the start and end position of extraction.it does not change the original string.

let text = "Hello world!";
let result = text.substr(1, 4); //output ello
let result = text.substr(2); //output llo world!

toLowerCase(): This method is used convert lowercase the characters of a string. It does not change the original string.

let text = "Hello World!";
let result = text.toLowerCase(); //output hello world!

toUpperCase(): It is used to convert the characters of a string to upper case. It also does not change the original string.

let text = "Hello World!";
let result = text.toUpperCase(); //HELLO WORLD!

trim(): This method is used to remove extra spaces from both sides of a string. It does not change the original string.

let text = "    Hello World!        ";
let result = text.trim();//output Hello World!

trimStart(): This method is used to remove white space from the beginning of a string. If there is no white space it will return a new string without throwing an error.

let text = "        Hello World!";
let result = text.trimStart();//output Hello World!

trimEnd(): It is used to remove white space from the ending of a string.If there is no white space it will return a new string without throwing an error.

let text = "Hello World!          ";
let result = text.trimEnd();//output Hello World!