What Is Object-Oriented Programming?

Object-Oriented Programming(OOP) is a programming paradigm based on the concept of objects. And paradigm simply means the style of the code,
how we write and organize code.

We use objects to model (describe) aspects of the real world, like a user or a to-do list item, or even more abstract features like an HTML component or some kind of data structure.

Objects may contain data (properties) and also code (methods). By using objects, we pack all the data and the corresponding behavior into one big block.

In OOP objects are self-contained pieces/blocks of code like small applications on their own…

The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, gives us the illusion of multi-threading. The asynchronous behavior is not part of the JavaScript language itself, rather it is built on top of the core JavaScript language in the browser (or the programming environment) and accessed through the browser APIs.

Browser JavaScript execution flow, as well as in Node.js, is based on an event loop. The event loop concept is very simple. …

Data types in JavaScript can be divided into two main categories— primitive data types and reference data types.

Primitive data types: The value assigned to the variable of primitive data type is tightly coupled. That means, whenever you create a copy of a variable of primitive data type, the value is copied to a new memory location to which the new variable is pointing to. When you make a copy, it will be a real copy.

Reference data types: Whereas, for reference data type it stores the address of the memory location where the object is stored. …

A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

function x() {
    var a = 5;
    function y(){
        console.log(a);
    }
    y();
}x(); //5

Here, y() is bundled together with its lexical environment of x(). First, y() will check its local scope; if it does not find “a”, it will go to the lexical parent. So inside…

What is System Design?

System Design is the process of designing the elements of a system such as the architecture, modules and components, the different interfaces of those components and the data that goes through that system.

The purpose of the System Design process is to provide sufficient detailed data and information about the system and its system elements to enable the implementation consistent with architectural entities as defined in models and views of the system architecture.

Elements of a System

• Architecture — This is the conceptual model that defines the structure, behaviour, and more views of a system. …

What are React lifecycle methods?

You can think of React lifecycle methods as the series of events that happen from the birth of a React component to its death.

Every component in React goes through a lifecycle of events. I like to think of them as going through a cycle of birth, growth, and death.

• Mounting — Birth of your component. This is the stage where the Component is inserted into the DOM.
• Update — Growth of your component. This is the stage in which the Component’s state and props can change, leading to the process of re-rendering the Component with the updated state/props
• Unmount…

Real DOM

First things first, DOM stands for “Document Object Model”. The DOM in simple words represents the UI of your application. Every time there is a change in the state of your application UI, the DOM gets updated to represent that change. Now the catch is frequently manipulating the DOM affects performance, making it slow.

What makes DOM manipulation slow?

The DOM is represented as a tree data structure. Because of that, the changes and updates to the DOM are fast. But after the change, the updated element and its children have to be re-rendered to update the application UI. The re-rendering or re-painting of the…

We’ll talk about the call, apply, and bind methods of the function prototype chain. They are some of the most important and often-used concepts in JavaScript and are very closely related to the this keyword.

Call method

The call() method calls a function with a given this value and arguments provided individually.

func.call([thisArg[, arg1, arg2, ...argN]])

Parameters:
thisArg — This is optional. It’s the value to use as this when calling func.
arg1, arg2, ...argN— Optional arguments for the function.

Return value: The result of calling the function with the specified this value and arguments.

Description

• Using a call method we can do…