DEV Community: Kirty Meena

Prototypal Inheritance

Kirty Meena — Tue, 06 Jun 2023 11:08:41 +0000

What is Prototypal Inheritance:

Prototypal Inheritance is an object getting access to the properties and methods that is part of another object using prototype chaining.

Every function in Javascript has this hidden property called [[prototype]] and __proto__ property which is inside the [[prototype]] helps in creating the chain to inherit the properties and methods from parent function.

let's see an example to understand better:

prototypal Inheritance in an array.

We can use map method on the arr but where does this map method comes from.

const arr = []
arr.map()

If you check the [[prototype]] property of the arr, you will find different array methods and map is also in there.

All the arrays that we create comes from the base Array[] object and this base array has all the array methods like map, filter, reduce etc. So whenever we create an array it inherits these array methods from the Array[] using prototypal inheritance.

As we already know __proto__ helps in creating the chain between the arr and base Array[]. So if we write arr.__proto__ we will get that base array since __proto__ is referencing to it.

We can use hasOwnProperty() method to check if map is the property of arr or base array.

The base Array comes from the base Object. we can get that object using arr.__proto__.__proto__ and the proto of the base object points to null.

How prototypal chaining is made

prototypal inheritance helps in reusing the property if it's needed by another object.

Prototypal Inheritance in a function

let's see how prototypal inheritance works in case of functions with an example.

Every functions in javascript has the [[prototype]] property which contains __proto__

We have a function add

function add(){}

If we write add.__proto__ then we will get the base function, from which this add() function comes from and inherits the call, apply, bind methods.

We can check if bind, call, apply are the properties of add() or are being inherited from the base function using hasOwnProperty

name is a special property of function is will give us the name of the function.

The base function comes from the base Object so add.__proto__.__proto__ will give us an object and __proto__ of that object points to the null.

below image shows the prototype chaining

prototypal Inheritance using objects.

we have two objects animal and bird.

const animal = {
  eat:true,
  fly(){
    return "I can fly"
  }
}

const bird = {
  color:"blue",
}

We want bird object to inherit the fly() methode from animal. We can do so using __proto__.

brid.__proto__ = animal

console.log(bird.fly())
console.log(bird.color)

When bird.fly() was called then javascript checked it in the bird object, when this method was not found there then it checked its [[prototype]] and found it in animal object.

We can set the [[prototype]] property using Object.setPrototypeOf() as well.

const person ={
  greet(){
    return "Hellooo!"
  },
  talk:true
}

const student = {
  study:"true"
}

//student inherits the properties of person
Object.setPrototypeOf(student,person)

console.log(student.greet())

REACT HOOKS - useMemo()

Kirty Meena — Tue, 23 Aug 2022 12:37:00 +0000

What is useMemo hook

useMemo() hooks is used to prevent expensive calculation on every render by using memoization.

useMemo() returns a memoized value only when its dependencies changes.

What is Memoization

Memoization is an optimization technique. It is used to speed up the computer program/component performance by storing the result of expensive operation and using the stored value if there is no change in the result.

If there is no change in the result of expensive function then it will not be recalculated but the stored value(cached value) will be used.

Optimizing the component using useMemo() hook

let's see an example of how to use useMemo hook and when to use it.

First we need to create a react app. We can do so by using the below command

npx create-react-app myApp

Next I have create a function named ExpensiveCalculation in a js file of same name.

function ExpensiveCalculation(num) {
    console.log("calculating...");
    for (let i = 0; i < 1000000000; i++) {
      num += 1;
    }
    return num;
}

export default ExpensiveCalculation;

the above function is the expensive function which decreases the performance of the component. The above function will add 1 to the num which is passed as a parameter in ExpensiveCalculation.

The for loop checks if the value of i is less than 1000000000, if this is true, 1 will be added to the previous value of num and then function will return the updated num value.

Then I have created a component named AddItems.js in src folder. Let's see how is the performance of the component without useMemo.

import { useState} from "react";

function AddItems() {
    const [items, setItems] = useState([]);
    const [count, setCount] = useState(1);

    // without memoization --> expensive calculation
    const calculation = ExpensiveCalculation(count)

    const addItems = () => {
        setItems((prev) => [...prev, `New item`]);
    };

    const incrementCount = () => {
        setCount((c) => c + 1);
    };

    return (
        <div>
            {items.map((item) => (
                <li>{item}</li>
            ))}
            <button onClick={addItems}>Add items</button>
            <div style={{ display: "flex" }}>
                <h2>Expensive Calculation</h2>
                <button onClick={incrementCount}>calculate</button>
                {calculation}
            </div>
        </div>
    );
}

export default AddItems;

ExpensiveCalculation is assigned to const calculation. No memoization is used here.

There is a button Add Item which add new items and it will be displayed in the browser.

There is another button calculate which will increment the count

Now whenever we click on button calculate the count will increment and count is passed as argument in ExpensiveCalculation.

const calculation = ExpensiveCalculation(count)

In the file ExpensiveCalculation for loop will run and will check if i is less than 1000000000. This will take sometime because 1000000000 is a big value so AddItem will take time to re-render the updated value.

Now when we click on Add Item button, ExpensiveCalcution will run as well and AddItem component will take longer to re-render even though we just wanted to add new item and display it.

Because of ExpensiveCalculation, There is a delay in execution and AddItem component is taking longer to re-render. To fix this performance issue we will use useMemo hook.

To use memoization in react we have to import useMemo hook from react

const calculation = useMemo(()=>ExpensiveCalculation(count),[count])

useMemo hook accepts a second parameter to declare dependencies. in the above code ExpensiveCalculation function will be called only when there is change in count.

We can see that when count value is not changed then function returns the cached value and there is no lag when we click on add item button.

Below is the complete code after using useMemo hook.

import { useState, useMemo } from "react";
import ExpensiveCalculation from "./ExpensiveCalculation";

function AddItems() {
    const [items, setItems] = useState([]);
    const [count, setCount] = useState(1);

    //with useMemo hook
    const calculation = useMemo(() => ExpensiveCalculation(count), [count])

    const addItems = () => {
        setItems((prev) => [...prev, `New item`]);
    };

    const incrementCount = () => {
        setCount((c) => c + 1);
    };

    return (
        <div style={{ display: "flex", displayDirection: "row", gap: "5rem" }}>
            <div>
                {items.map((item, idx) => (
                    <li key={idx}>{item}</li>
                ))}
                <button onClick={addItems}>Add items</button>
            </div>
            <div>
                <h2>Expensive Calculation</h2>
                <button onClick={incrementCount}>calculate</button>
                {calculation}
            </div>
        </div>
    );
}

export default AddItems;

React forget some previously memoized values and recalculate them on next render to free memory. Write your code so that it still works without useMemo — and then add it to optimize performance.

Javascript Scopes

Kirty Meena — Sun, 26 Jun 2022 11:25:47 +0000

What is scope?

Scope determines the accessibility of a variable. Scope limits the accessibility of a variable. Lets understand with an example.

function greeting() {
  var greet = "Hello there";
}

greeting();
console.log(greet);

the above code will cause an error saying greet is not defined. This has happened because greet have a local scope, it can only be accessed inside the function.

Types of scope

There are 3 types of scopes in javascript.

Block scope
Functional scope
Global scope

Before ES6 javascript had only functional and global scope. ES6 introduced let and const keywords which have block scope.

Block Scope

To create block scope all we need is {...}. variable inside {...} will have a block scope. Let and const have block scope.

let a = 2;

if (a > 1) {
  let b = a * 3;
  console.log(b); //6

  for (let i = a; i <= b; i++) {
    let j = i + 10;
    console.log(j); // 12 13 14 15 16
  }
  let c = a + b;
  console.log(c);  //8
}

In the above snippet which variable exist only in the if statement and which exists only in the for loop?

Answer: if statement contains b and c blocked scoped variable. for loop contains i and j block scoped variable.

Functional Scope
Variables declared inside a function have functional scope and can be accessed inside that function.

function getName() {
  var name = "Adam";
  let age = 24;
  console.log(name, age); // Adam 24
}

getName();
console.log(name); // name is not defined

In the above snippet name and age have functional scope, they are local to the function and can be accessed only inside function getName().If we try to access it outside the function it will give us ReferenceError.

Global Scope

Variables declared outside a function have global scope and can be accessed anywhere in the program.

const globalVariable = "accessible from anywhere";

function getName() {
  var name = "Adam";
  let age = 24;
  console.log(globalVariable);  
}

console.log(globalVariable)

let and Var behaviour

If you try to access let variable too early then it will give a reference error.

console.log(a); //ReferenceError: cannot access 'a' before initialization
console.log(b); //undefined

let a;
var b;

This is called TDZ(Temporal Dead Zone) means you're accessing a variable which is decalared but not initialized.

Why Did this happen only with let and not with var.

This is because of variable hoisting. the interpreter moves the declaration of var b at the top of the code. Since we haven't initialized var b it will have undefined as its value.

let a is TDZ until code execution reaches the line where the variable is declared.

If we try to access let or const in TDZ then they will be unreachable. they are in the scope but not declared .

{
  // temporal dead zone
  // temporal dead zone
  // temporal dead zone
  // temporal dead zone
  // temporal dead zone

  let name = "Anna"; // no more TDZ , let name is declared and initialized.
  console.log(name); //Anna
}

Declaring a variable means to reserve the name in the memory.
Initializing means setting a value to the variable.

Javascript DOM

Kirty Meena — Mon, 02 Aug 2021 12:31:19 +0000

This Post will cover the basics of selecting elements and manipulating elements in the DOM.

What is DOM

DOM stands for Document Object Model. It is an object oriented representation of a web page.

DOM represents the HTML or XML documents as tree of nodes .

Let's understand the above image.

Document is the root node.

Root node has one child which is the HTML element.

Each document can have only one document element.

HTML node have two child node elements HEAD and BODY

Similarly HEAD and BODY have their child nodes TITLE ,Script and h1 respectively

At bottom we have text node which is just a text

let's see how we can select and manipulate these nodes.

1. Selecting elements

We'll dicuss 4 ways to select an HTML element

getElementById
getElementByName
getElementByClass
QuerySelector

getElementById

Div is a HTML element. It has an id attribute, id is used to uniquely identify an element in the DOM.

To select an element by its id we use document.getElementById() method.

getElementById() returns an element object if an id exists. If there is no element with that id then it will return null.

Once the element is selected we can manipulate it ,add styles to it.

getElementByName

Some elements in HTML have name attribute. Unlike id, name doesn't have to be unique.

Multiple elements can have same name value.

to access element by name we use getElementByName().This will return a NodeList.

getElementByClass

HTML elements can have class attribute.To access the element by class we use getElementByClass().This will return HTML collection

querySelector
It can be used to select elements with id or class.
To select an element by id we use '#' and for class we use '.'

2. Manipulating elements

Now that we know how to select an element from the DOM in manupulating elements we will see how to add or remove an element from the DOM.

Adding new element to the DOM
To add a new element in the DOM we have to follow 3 steps .

step 1. creating the new element.
step 2. creating the text node.
step 3. adding element into the DOM.

let's see how to write javascript for above 3 steps.

To create an element we use document.createElement(HTMLtag)

To add a text in it we can use innerHTML="some text" or textContent="some text" (difference between textContent and innerHTML will be discussed later).

To add element into the DOM we use document.body.append() or we can also use document.body.appendChild(). The only difference between append and appendChild is append can add text as well as html tag as a node in the DOM but appendChild will only append html tags.

In DOM and style inspector you'll be able to see the div element has been added in the body and inside div element text is added.

Removing elements from the DOM
To remove an element we first have to select it by its id,class or name.

In the below image you can see that there is a span with id bye.

to select and then remove the span below is tha javascript code.

To remove we use remove().This will remove the element from the DOM.

✌️