When to Use Static Generation v.s. Server-side Rendering

Two Forms of Pre-rendering


## What is git? {#What-is-git}

Git is a version control system which is maintained on your local system. Git gives us a record for ongoing programming versions. It can be used completely exclusive of any cloud-hosting service i.e. we don’t even need internet to access git.

## Version Control System {#Version-Control-System}

![What is VCS](/BL-1001/vcs.png)

It is a program to keep track of the changes in projects, by tracking or logging the files changes over time. A version control system allows us to review, restore earlier versions and even branching and merging or code.

## What Is GitHub? {#What-Is-GitHub}

GitHub is a cloud-based hosting service that lets us manage Git repositories. It’s an online database that allows you to keep track of and share your Git version control projects outside of your local computer.
Other Git repository hosting services also exist: Eg:- GitLab, BitBucket, and SourceForge

GitHub just takes things a little bit further than Git, offering more functionality and resources, as well as a place online to store and collaborate on projects. And because GitHub is cloud-based, an individual’s Git repositories can be remotely accessed by any authorized person, from any computer, anywhere in the world.

Through GitHub, one can share code with others, giving them the power to make revisions or edits on your various Git branches. This makes it possible for entire teams to coordinate together on single projects in real-time. As changes are introduced, new branches are created, allowing the team to continue to revise the code without overwriting each other's work.

## Conclusion {#Conclusion}

![Diffrence between git and github](/BL-1001/gitVsGithub.webp)

## Why Use a Version Control System? {#Why-Use-a-Version-Control-System}

- Collaboration
- Storing Versions
- Restoring Previous Versions


Understanding the  difference between Git and Github with examples and their main use cases.

Understanding Git and Github


## Client Side Rendering {#Client-Side-Rendering}

![Client Side Rendering](/BL-1002/csr.png)

When we talk about client-side rendering,it’s about rendering content in the browser using JavaScript.

So instead of getting all the content from the HTML document itself, a simple HTML document with a JavaScript file in initial loading itself is received, which renders the rest of the site using the browser.

With client-side rendering, the initial page load is naturally a bit slow. However, after that, every subsequent page load is very fast. In this approach, communication with server happens only for getting the run-time data. Moreover, there is no need to reload the entire UI after every call to the server. The client-side framework manages to update UI with changed data by re-rendering only that particular DOM element.

## Server Side Rendering {#Server-Side-Rendering}

![Server Side Rendering](/BL-1002/ssr.png)

In server-side rendering when a user makes a request to a webpage, the server prepares an HTML page by fetching user-specific data and sends it to the user’s machine over the internet. Webpages are generated on your server for every request. This entire process of fetching data from the database, creating an HTML page and serve it to user is known as SSR.

## Static Site Generation {#Static-Site-Generation}

At build time, your app will fetch all the data required and compile it down to static webpages. After a production build is created, every request is going to reuse that statically generated HTML file. This provides the best performance and can easily be cached on a CDN.

## Problems with React.js {#Problems-with-React.js}

React uses Client Side Rendering. With React, nothing gets displayed until all of your JavaScript loads. Your HTML is nearly empty and React injects your content in your HTML with JavaScript.
This leads multiple problems:-

- When the browser is loading the JavaScript, the screen is blank because `<div id="root"></div>` does not show anything. Depending on the size of your JavaScript bundle, this could lead to your visitors staring at a white screen for a couple of seconds.

- Most SEO crawlers do not have JavaScript enabled. DuckDuckGo, Google, Bing and any other search engine would not actually know what is on your website since it requires JavaScript to display the content. You will not be ranked at all on Search Engines.

## Methods for Prerendering using Next.js {#Methods-for-Prerendering-using-Next.js}

Next.js offers `(Server Side Rendering)SSR` and `(Static Site Generation)SSG` using `getStaticProps` and `getServerSideProps`.

### getStaticProps {#getStaticProps}

getStaticProps is a server-side function that will only be called at build time. The build will then use the response from getStaticProps to generate a static webpage.

Since stale data is a problem with static generated pages, there is an option you can set to revalidate your static page and rebuild it if data changes. revalidate: 60 will check your data every 60 seconds and rebuild the page if needed.

Example Use:

```
// This function gets called at build time on server-side.
export async function getStaticProps() {
const res = await fetch('https://.../data');
const data = await res.json();

// By returning { props: data }, the Dashboard component
// will receive `data` as a prop at build time
return {
props: {
data
},
// Check if data changes every 60 seconds.
// Rebuild page if different
revalidate: 60
};
}

// data will be populated at build time by getStaticProps()
export default function Dashboard({ data }) {
return <div>{data}</div>;
}
```

### getServerSideProps {#getServerSideProps}

getServerSideProps is similar to getStaticProps but is called every time the page loads instead of at build time. This ensures that all of your initial data is up to date on every load.

Since this is called on every load, you do not need to revalidate like getStaticProps. This also leads to a slower load time since you are no longer serving a static file, but have to rebuild on every load.

Example Use:

```
// This function gets called at build time on server-side.
export async function getServerSideProps() {
const res = await fetch('https://.../data');
const data = await res.json();

// By returning { props: data }, the Dashboard component
// will receive `data` as a prop at build time
return {
props: {
data
}
};
}

// data will be populated at build time by getServerSideProps()
export default function Dashboard({ data }) {
return <div>{data}</div>;
}
```

## Benefits of using Next.js {#Benefits-of-using-Next.js}

- Search engines can crawl the site for better SEO.
- The initial page load is faster.
  ![nextjs pros and cons](/BL-1002/nextjs-pros-and-cons.png)

**References:**

- <a href="https://nextjs.org/docs/getting-started" target="_blank">Next.js</a>


Difference between different types of rendering techniques and advantage of Next.js over React.js.

Client Vs Server Side Rendering


## Why use react.js {#Why-use-react.js}

**_1.Reusable Components:_**

React provides a component based structure.Each tiny elements like button, checkbox, dropdown etc can be a component and the we create wrapper components composed of those smaller components.Each component decides how it should be rendered. Each component has its own internal logic.

**_2.Fast render with Virtual DOM_**

React uses virtual DOM to render the view.virtual DOM is a virtual representation of the real DOM. Each time the data changes in a react app, a new virtual DOM gets created. Creating a virtual DOM is much faster than rendering the UI inside the browser. Therefore, with the use of virtual DOM, the efficiency of the app improves.

**_3.SEO friendly_**

React allows developers to develop user interfaces that can be easily navigated in various search engines. It also allows server-side rendering, which boosts the SEO of an app.

## What is JSX? {#What-is-JSX}

JSX stands for JavaScript XML.
It allows us to write HTML inside JavaScript and place them in the DOM without using functions like `appendChild( )` or `createElement( )`.

- Without using JSX, we would have to create an element by the following process:

```
const text = React.createElement('p', {}, 'This is a text');
const container = React.createElement('div','{}',text );
ReactDOM.render(container,document.getElementById('app'));
```

- Using JSX, the above code can be simplified:

````
const container = (

 <div>
   <p>This is a text</p>
 </div>
);
ReactDOM.render(container,document.getElementById('app'));```
````

As one can see in the code above, we are directly using HTML inside JavaScript\*

## What is the virtual DOM? How does react use the virtual DOM to render the UI? {#What-is-the-virtual-DOM-How-does-react-use-the-virtual-DOM-to-render-the-UI}

_DOM stands for 'Document Object Model'. In simple terms, it is a structured representation of the HTML elements that are present in a webpage or web-app. DOM represents the entire UI of your application_

Virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the real DOM by a library such as ReactDOM.

![Virtual Dom](/BL-1003/vdom.png)

**Why was virtual DOM introduced?**

DOM manipulation is an integral part of any web application, but DOM manipulation is quite slow when compared to other operations in JavaScript.

The efficiency of the application gets affected when several DOM manipulations are being done. Most JavaScript frameworks update the entire DOM even when a small part of the DOM changes.

For example, consider a list that is being rendered inside the DOM. If one of the items in the list changes, the entire list gets rendered again instead of just rendering the item that was changed/updated. This is called inefficient updating.
To address the problem of inefficient updating, the react team introduced the concept of virtual DOM.

**How does it work?**

![Virtual Dom](/BL-1003/real-virtual.png)

For every DOM object, there is a corresponding virtual DOM object(copy), which has the same properties.

The main difference between the real DOM object and the virtual DOM object is that any changes in the virtual DOM object will not reflect on the screen directly. Consider a virtual DOM object as a blueprint of the real DOM object.
Whenever a JSX element gets rendered, every virtual DOM object gets updated.

React uses two virtual DOMs to render the user interface. One of them is used to store the current state of the objects and the other to store the previous state of the objects.

Whenever the virtual DOM gets updated, react compares the two virtual DOMs and gets to know about which virtual DOM objects were updated.

After knowing which objects were updated, react renders only those objects inside the real DOM instead of rendering the complete real DOM.This way, with the use of virtual DOM, react solves the problem of inefficient updating

## Explain React state and props? {#Explain-React-state-and-props}

A React component can access dynamic information in two ways: props and state.

### React State {#React-State}

Every component in react has a built-in state object, which contains all the property values that belong to that component.

In other words, the state object controls the behaviour of a component. Any change in the property values of the state object leads to re-rendering of the component.

_Note- State object is not available in functional components but, we can use React Hooks to add state to a functional component._

How to declare a state object?

```
Example:
class Car extends React.Component{
 constructor(props){
   super(props);
   this.state = {
     brand: "BMW",
     color: "black"
   }
 }
}
```

How to use and update the state object?

```
class Car extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     brand: "BMW",
     color: "Black"
   };
 }

 changeColor() {
   this.setState(prevState => {
     return { color: "Red" };
   });
 }

 render() {
   return (
     <div>
       <button onClick={() => this.changeColor()}>Change Color</button>
       <p>{this.state.color}</p>
     </div>
   );
 }
}

```

As one can see in the code above, we can use the state by calling this.state.propertyName and we can change the state object property using setState method.

### React Props {#React-Props}

Every react component, accepts a single object argument called props (which stands for “properties”).

These props can be passed to a component using HTML attributes.

Using props, we can pass data from one component to another.

- While rendering a component, we can pass the props as a HTML attribute:

```
<Car brand="Mercedes"/>
```

The component receives the props:

- In Class component:

```
class Car extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     brand: this.props.brand,
     color: "Black"
   };
 }
}
```

- In Functional component:

```
function Car(props) {
  render() {
      return <h1>Name is {props.name}!</h1>;
   }
}
```

**Note- Props are read-only. They cannot be manipulated or changed inside a component**

## Explain React Hooks? {#Explain-React-Hooks}

Hooks are functions that let us “hook into” React state and lifecycle features from a `functional component.`
React Hooks cannot be used in class components.

Why were Hooks introduced in React?
React hooks were introduced in the 16.8 version of React.
Previously, functional components were called stateless components. Only class components were used for state management and lifecycle methods.

The need to change a functional component to a class component, whenever state management or lifecycle methods were to be used, led to the development of Hooks.

**Example of a hook:**

`useState hook:`
In functional components, useState hook lets us define state for a component:

```
function Person(props) {
 // We are declaring a state variable called name.
 // setName is a function to update/change the value of name
 let [name, setName] = useState('');
}
```

## What are the different lifecycle methods in React? {#What-are-the-different-lifecycle-methods-in-React}

Each component in react goes through three phases: `Mounting`, `Updating`, and `Unmounting`.

- **Mounting** :- Birth of your component
- **Update** :- Growth of your component
- **Unmount** :- Death of your component

![React Life Cycle Methods](/BL-1003/ReactLifeCycle.png)

### Common React Lifecycle Methods {#Common-React-Lifecycle-Methods}

- **constructor()**

This is used only if you have a class-based Component and it serves the purpose of initializing the state of a Component. In case of functional Components, the useState() hook is used to do the same.

- **render()**

This is the method that is `responsible for inserting a Component into the DOM`.

The render() method is the most used lifecycle method. This is because render() is the only required method within a class component in React.

It happens during the `mounting` and `updating` of your component.

```
Below is an example of a simple render() in React.

class Hello extends Component{
   render(){
      return <div>Hello {this.props.name}</div>
   }
}

```

**A render() can also return a null if there is nothing to render for that component.**

- **componentDidMount()**

This is invoked `after a Component is inserted into the DOM for the first time`.

When component has been mounted and ready, that’s when the next React lifecycle method componentDidMount() comes in play.

componentDidMount() is called as soon as the component is mounted and ready. This is a good place to initiate API calls, if you need to load data from a remote endpoint.

`componentDidMount() allows the use of setState()`.

- **componentDidUpdate()**

This is the method invoked after `re-rendering an updated Component`. This method can give you the information about a Component’s previous state and previous props. This lifecycle method is invoked as soon as the updating happens. The most common use case for the componentDidUpdate() method is updating the DOM in response to prop or state changes.

You can call setState() in this lifecycle, but keep in mind that you will need to wrap it in a condition to check for state or prop changes from previous state. Incorrect usage of setState() can lead to an infinite loop.

```
Take a look at the example below that shows a typical usage example of this lifecycle method.

componentDidUpdate(prevProps) {
//Typical usage, don't forget to compare the props
if (this.props.userName !== prevProps.userName) {
this.fetchData(this.props.userName);
}
}

```

Notice in the above example that we are comparing the current props to the previous props. This is to check if there has been a change in props from what it currently is. In this case, there won’t be a need to make the API call if the props did not change.

- **componentWillUnmount()**

As the name suggests this lifecycle method is called just `before the component is unmounted and destroyed`.

You cannot modify the component state in componentWillUnmount lifecycle.

This is where you can perform any cleanups that need to be done such as invalidating timers, canceling network requests, removing event listeners, and so on.

```
componentWillUnmount() {
window.removeEventListener('resize', this.resizeListener)
}
```

## What are keys in React? {#What-are-keys-in-React}

A key is a special string attribute that needs to be included when using lists of elements.

Example of a list using key:

```
const ids = [1,2,3,4,5];
const listElements = ids.map((id)=>{
return(
 <li key={id.toString()}>
   {id}
 </li>
 )
})
```

**Importance of keys:-**

- Keys help react identify which elements were added, changed or removed.
- Keys should be given to array elements for providing a unique identity for each element.
- Without keys, React does not understand the order or uniqueness of each element.
- With keys, React has an idea of which particular element was deleted,edited, and added.

## React pure component {#React-pure-component}

A React component is considered pure if it renders the same output for the same state and props. For class components like this, React provides the PureComponent base class. Class components that extend the `React.PureComponent` class are treated as `pure components`.

Pure components have some performance improvements and render optimizations since React implements the shouldComponentUpdate() method for them with a shallow comparison for props and state.

**Features of React Pure Components**

- Prevents re-rendering of Component if props or state is the same
- Takes care of “shouldComponentUpdate” implicitly
- State and Props are Shallow Compared
- Pure Components are more performant in certain cases

**React Components re-renders in the following scenarios:**

- “setState” is called in Component
- “props” values are updated
- this.forceUpdate() is called

`In the case of Pure Components, the React components do not re-render blindly without considering the updated values of React “props” and “state”. If updated values are the same as previous values, render is not triggered.`


Learning some of the fundamental concepts of React.js and top questions asked in react interview.

Core Concept You Need to Know About React


## Global vs Local Scope {#Global-vs-Local-Scope}

## Async Defer

## Event bubbling capturing

## Event Throtting and debouncing


Learning some of the fundamental concepts of Javascript and top questions asked in javascript interview.

Rough


## What is a Promise in JavaScript {#What-is-a-Promise-in-JavaScript}

A Promise is a special JavaScript object. It produces a value after an asynchronous operation completes successfully, or an error if it does not complete successfully due to time out, network error, and so on.

## Creating a JavaScript Promise {#Creating-a-JavaScript-Promise}

When the task completes, you either fulfill your promise or fail to do so.
Promise is a constructor function, so you need to use the `new keyword` to create one. It takes a function, as its argument, with two parameters - `resolve and reject`. These are methods used to determine the outcome of the promise.

```
Creating a Promise

const myPromise = new Promise((resolve, reject) => {
});
```

## Promise States {#Promise-States}

A promise has three states: `pending, fulfilled, and rejected.` The resolve and reject parameters given to the promise argument are used to do this. resolve is used when you want your promise to succeed, and reject is used when you want it to fail. These are methods that take an argument, as seen below.

- **Pending: Initially when the executor function starts the execution.**
- **Fulfilled: When the promise is resolved.**
- **Rejected: When the promise is rejected.**

![Promise States](/BL-1005/states.png)

```
const myPromise = new Promise((resolve, reject) => {
 if(condition here) {
   resolve("Promise was fulfilled");
 } else {
   reject("Promise was rejected");
 }
});
```

## Handling a Promise {#Handling-a-Promise}

![Promise Handling](/BL-1005/handling.png)

### Handling Promises With Then Method {#Handling-Promises-With-Then-Method}

Promises are most useful when you have a process that takes an unknown amount of time in your code (i.e. something asynchronous), often a server request. When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. This can be achieved by using the then method. The then method is executed immediately after your promise is fulfilled with resolve.

```
myPromise.then(result => {

});
```

### Handling a Rejected Promise with Catch Method {#Handling-a-Rejected-Promise-with-Catch-Method}

Catch is the method used when your promise has been rejected. It is executed immediately after a promise's reject method is called.

```
myPromise.catch(error => {

});
```

## Async Await {#Async-Await}

Async/await are special syntax to work with promises in a more comfortable fashion.

- **async makes a function return a Promise**
- **await makes a function wait for a Promise**

### Async {#Async}

```
Example
async function myFunction() {
  return "Hello";
}

Is the same as:
async function myFunction() {
  return Promise.resolve("Hello");
}
```

### Await {#Await}

The keyword await makes JavaScript wait until that promise settles and returns its result.
The `await keyword` can only be used inside an `async` function.

```
async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait until the promise resolves (*)

  alert(result); // "done!"
}
```

The function execution "pauses" at the line (\*) and resumes when the promise settles, with result becoming its result.

## Implement Promise {#Implement-Promise}

```
const pr1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("hello");
  }, 4000);
});

const pr2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("world");
  }, 0);
});

const fun = async () => {
  try {
    const res = await Promise.all([pr1, pr2]);
    console.log(res);
  } catch (err) {
    console.log(err);
  }
};

fun();
```

**References:**

- <a href="https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/" target="_blank">JavaScript Promise Tutorial</a>
- <a href="https://www.w3schools.com/js/js_async.asp" target="_blank">Async/Await</a>


Understanding Promises in Javasript


## New Features in ES6 {#New-Features-in-ES6}

Some of the new features of javascript introductes in ES6 are:

- The Let keyword
- The Const keyword
- Arrow Functions
- Promises
- Map Object

```
// Create a new Map
const fruits = new Map();

// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
```

- Set Object

```
// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
```

- Classes

```
class ClassName {
  constructor() { ... }
}

// Example
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}
```

## Difference between Let and Var and Const {#Difference-between-Let-and-Var-and-Const}

### Comparision of Declarations {#Comparision-of-Declarations}

One of the biggest problems with declaring variables with the var keyword is that you can easily overwrite variable declarations:

```
var camper = "James";
var camper = "David";
console.log(camper);
```

In the code above, the camper variable is originally declared as James, and is then overridden to be David. The console then displays the string David.

If you replace var with let in the code above, it results in an error:

```
let camper = "James";
let camper = "David";
The error can be seen in your browser console.(Uncaught SyntaxError: Identifier 'camper' has already been declared)
```

`So unlike var, when you use let, a variable with the same name can only be declared once.`

### Comparision of scopes of the var and let Keywords {#Comparision-of-scopes-of-the-var-and-let-Keywords}

When you declare a variable with the var keyword, it is declared globally.
The let keyword behaves similarly, but with some extra features. When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.

```
var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
console.log(i);
Here the console will display the values [0, 1, 2] and 3.
```

With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable.

This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the i variable. This is because the stored function will always refer to the value of the updated global i variable.

```
var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
Here the console will display the value 3.
```

As you can see, printNumTwo() prints 3 and not 2. This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop.

The let keyword does not follow this behavior:

```
let printNumTwo;
for (let i = 0; i < 3; i++) {
    if (i === 2) {
        printNumTwo = function() {
            return i;
        };
    }
}
console.log(printNumTwo());
console.log(i);
```

Here the console will display the value 2, and an error that i is not defined. i is not defined because it was not declared in the global scope. It is only declared within the for loop statement. printNumTwo() returned the correct value because three different i variables with unique values (0, 1, and 2) were created by the let keyword within the loop statement.

### Const {#Const}

While var and let can be declared without being initialized, const must be initialized during declaration.
`Const cannot be initialized after declaritions`

However, it is important to understand that objects (including arrays and functions) assigned to a variable using const are still mutable. Using the `const declaration only prevents reassignment of the variable identifier.`

```
const s = [5, 6, 7];
s = [1, 2, 3];
s[2] = 45;
console.log(s);
The console.log will display the value [5, 6, 45].

s = [1, 2, 3] will result in an error.
```

As you can see, you can mutate the object [5, 6, 7] itself and the variable s will still point to the altered array [5, 6, 45]. Like all arrays, the array elements in s are mutable, but because const was used, you cannot use the variable identifier s to point to a different array using the assignment operator.

## Variable shadowing {#Variable-shadowing}

```
let number = 10;

function displayDouble() {
  //new variable is defined with the same name as variable on line 1 - outer scope
  let number = 3;

  number *= 2;
  console.log(number); //=> 6
}

displayDouble();
console.log(number); //=> 10
```

In this case, both variables on line 1 and 5 are defined with the same name — number.This has a significant result: the variable defined in the outer scope is ‘shadowed’ by the variable defined in the inner scope.

## String in Javascript {#String-in-Javascript}

In JavaScript, String values are immutable, which means that they cannot be altered once created.

For example, the following code:

let myStr = "Bob";
myStr[0] = "J";
cannot change the value of myStr to Job, because the contents of myStr cannot be altered.

## Escape Sequences in Strings {#Escape-Sequences-in-Strings}

```
Code   Output
\' single quote
\" double quote
\\ backslash
\n newline
\r carriage return
\t tab
\b word boundary
\f form feed
```

## Difference between '==' and '===' in javascript {#Difference-between-==-and-===-in-javascript}

Strict equality (===) is the counterpart to the equality operator (==). However, unlike the equality operator, which attempts to convert both values being compared to a common type, the strict equality operator does not perform a type conversion.

If the values being compared have different types, they are considered unequal, and the strict equality operator will return false.

```
Examples 1:

3 === 3 //true
3 === '3' // false
1 == [1] //true
1 === [1] //false
null == undefined //true
```

```
Example 2:‌
const number = 1234
const stringNumber = '1234'

console.log(number == stringNumber) //true
console.log(number === stringNumber)  //false
```

The value of number and stringNumber looks similar here. However, the type of number is Number and type of stringNumber is string. Even though the values are same, the type is not the same. Hence a == check returns true, but when checked for value and type, the value is false.

```
Example 3:
console.log(0 == false) //true
console.log(0 === false) //false
Reason: same value, different type. Type coercion
```

This is an interesting case. The value of 0 when checked with false is same. It is so because 0 and false have the same value for JavaScript, but when checked for type and value, the value is false because 0 is a number and false is boolean.

```
Example 4:
const str = ""

console.log(str == false) //true
console.log(str === false) //false
```

The value of empty string and false is same in JavaScript. Hence, == returns true. However, the type is different and hence === returns false.

```
Example 5:
let obj1 = { a: 1, b: 2 };
let obj2 = { a: 1, b: 2 };
console.log(obj1 == obj2); //false
console.log(obj1 === obj2); //false
```

The important thing to understand here is that the variables, obj1 and obj2 (which could be an Object, Array or Function) each contain only a reference to a location in memory. Not the value of the object.

## Explain how this works in JavaScript {#Explain-how-this-works-in-JavaScript}

To access a property of an object from within a method of the same object, you need to use the this keyword.

```
const person = {
    name: 'John',
    age: 30,

    // accessing name property by using this.name
    greet: function() { console.log('The name is' + ' ' + this.name); }
};

person.greet();
```

In the above example, a person object is created. It contains properties (name and age) and a method greet.
In the method greet, while accessing a property of an object, this keyword is used.
In order to access the properties of an object, this keyword is used following by . and key.

This keyword refers to the `object where it is called.`

### 1 this Inside Global Scope {#1-this-Inside-Global-Scope}

When this is used alone, this refers to the global object (window object in browsers). For example,

```
let a = this;
console.log(a);  // Window {}

this.name = 'Sarah';
console.log(window.name); // Sarah
```

### 2 this Inside Function {#2-this-Inside-Function}

When this is used in a function, this refers to the global object (window object in browsers). For example,

```
function greet() {
    // this inside function
    // this refers to the global object
    console.log(this);
}
greet(); // Window {}
```

### 3 this Inside Constructor Function {#3-this-Inside-Constructor-Function}

In JavaScript, constructor functions are used to create objects. When a function is used as a constructor function, this refers to the object inside which it is used. For example,

```
function Person() {
    this.name = 'Jack';
    console.log(this);
}

let person1 = new Person();
console.log(person1.name);
```

Here, this refers to the person1 object. That's why, person1.name gives us Jack.
When this is used with ES6 classes, it refers to the object inside which it is used.

For example,

```
// creating a class
class Person {
  constructor(name) {
    this.name = name;
  }
}
The class keyword is used to create a class. The properties are assigned in a constructor function.

// creating a class
class Person {
  constructor(name) {
    this.name = name;
  }
}

// creating an object
const person1 = new Person('John');
const person2 = new Person('Jack');

console.log(person1.name); // John
console.log(person2.name); // Jack
```

### 4 this Inside Object Method {#4-this-Inside-Object-Method}

When this is used inside an object's method, this refers to the object it lies within. For example,

```
const person = {
name : 'Jack',
age: 25,
    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);
        console.log(this.name);
    }

}

person.greet();
Output
{name: "Jack", age: 25, greet: ƒ}
Jack
```

### 5 this Inside Inner Function {#5-this-Inside-Inner-Function}

When you access this inside an inner function (inside a method), this refers to the global object. For example,

```
const person = {
name : 'Jack',
age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);        // {name: "Jack", age ...}
        console.log(this.age);  // 25

        // inner function
        function innerFunc() {
            // this refers to the global object
            console.log(this);       // Window { ... }
            console.log(this.age);    // undefined
        }
        innerFunc();
    }
}
person.greet();
```

### 6 this Inside Arrow Function {#6-this-Inside-Arrow-Function}

Inside the arrow function, this refers to the parent scope. For example,

```
const greet = () => {
    console.log(this);
}
greet(); // Window {...}
```

`Arrow functions do not have their own this`. When you use this inside an arrow function, this refers to its parent scope object.
For example,

```
const greet = {
    name: 'Jack',

    // method
    sayHi () {
        let hi = () => console.log(this.name);
        hi();
    }
}
greet.sayHi(); // Jack
```

```
const person = {
    name : 'Jack',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);
        console.log(this.age);

        // inner function
        let innerFunc = () => {

            // this refers to the global object
            console.log(this);
            console.log(this.age);
        }
        innerFunc();
    }
}

person.greet();

Output:
{name: "Jack", age: 25, greet: ƒ}
25
{name: "Jack", age: 25, greet: ƒ}
25
Here, innerFunc() is defined using the arrow function. It takes this from its parent scope. Hence, this.age gives 25.
```

### 7 this Inside Function with Strict Mode {#7-this-Inside-Function-with-Strict-Mode}

When this is used in a function with strict mode, this is undefined. For example,

```
'use strict';
this.name = 'Jack';
function greet() {

    // this refers to undefined
    console.log(this);
}
greet(); // undefined
```

## How is arrow functions different from normal functions in javascript {#How-is-arrow-functions-different-from-normal-functions-in-javascript}

### this Keyword {#this-Keyword}

Inside a `regular function, this keyword refers to the function` where it is called.

However, `this is not associated with arrow functions`. `Arrow function does not have its own this`. So whenever you call this, it refers to its parent scope.

**Inside a regular function**

```
function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {

        // this is accessible
        console.log(this.age);

        function innerFunc() {
            // this refers to the global object
            console.log(this.age);
            console.log(this);
        }
        innerFunc();
    }
}

let x = new Person();
x.sayName();

Output:
25
undefined
Window {}
```

Here, this.age inside this.sayName() is accessible because this.sayName() is the method of an object.

However, innerFunc() is a normal function and this.age is not accessible because this refers to the global object (Window object in the browser). Hence, this.age inside the innerFunc() function gives undefined.

**Inside an arrow function**

```
function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {

        console.log(this.age);
        let innerFunc = () => {
            console.log(this.age);
        }
        innerFunc();
    }
}

const x = new Person();
x.sayName();

Output
25
25
```

Here, the innerFunc() function is defined using the arrow function. And inside the arrow function, this refers to the parent's scope. Hence, this.age gives 25.

### Arguments Binding {#Arguments-Binding}

`Regular functions have arguments binding`. That's why when you pass arguments to a regular function, you can access them using the arguments keyword.

```
let x = function () {
    console.log(arguments);
}
x(4,6,7); // Arguments [4, 6, 7]
```

`Arrow functions do not have arguments binding`.
When you try to access an argument using the arrow function, it will give an error. For example,

```
let x = () => {
    console.log(arguments);
}
x(4,6,7);
// ReferenceError: Can't find variable: arguments
```

To solve this issue, you can use the spread syntax.

```
let x = (...n) => {
  console.log(n);
}
x(4,6,7); // [4, 6, 7]
```


Learning some of the fundamental concepts of Javascript and questions asked in javascript interview.

Javascript Concepts - Part1


## Explain "hoisting" {#Explain-hoisting}

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope.
Note that the declaration is not actually moved - the JavaScript engine parses the declarations during compilation and becomes aware of declarations and their scopes.

```
console.log(foo); // undefined
var foo = 1;
console.log(foo); // 1
```

Function declarations have the body hoisted while the function expressions only has the variable declaration hoisted.

```
// Function Declaration
console.log(foo); // [Function: foo]
foo(); // 'FOOOOO'
function foo() {
  console.log('FOOOOO');
}
console.log(foo); // [Function: foo]

// Function Expression
console.log(bar); // undefined
bar(); // Uncaught TypeError: bar is not a function
var bar = function () {
  console.log('BARRRR');
};
console.log(bar); // [Function: bar]
```

Variables defined with let and const are hoisted to the top of the block, but not initialized.Meaning that the block of code is aware of the variable, but it cannot be used until it has been declared.

## What is a closure {#What-is-a-closure}

JavaScript implements a scoping mechanism named lexical scoping (or static scoping). Lexical scoping means that the accessibility of variables is determined by the position of the variables inside the nested scopes.

Simpler, the lexical scoping means that inside the inner scope you can access variables of outer scopes.

**Closures are functions that have access to the outer (enclosing) function's variables scope even after the outer function has returned.**

```
function outerFunc() {
  let outerVar = 'I am outside!';
  function innerFunc() {
    console.log(outerVar); // => logs "I am outside!"
  }
  return innerFunc;
}
function exec() {
  const myInnerFunc = outerFunc();
  myInnerFunc();
}
exec();
```

Now innerFunc() is executed outside of its lexical scope, but exactly in the scope of exec() function. And what's important:
innerFunc() still has access to outerVar from its lexical scope, even being executed outside of its lexical scope.

## JavaScript Rest vs Spread Operator {#JavaScript-Rest-vs-Spread-Operator}

### Rest Operator {#Rest-Operator}

**The rest operator (...) is used to put the rest of some specific user-supplied values into a JavaScript array.**

For instance, consider this code that uses rest to enclose some values into an array:

```
// Use rest to enclose the rest of specific user-supplied values into an array:
function myBio(firstName, lastName, ...otherInfo) {
  return otherInfo;
}

// Invoke myBio function while passing five arguments to its parameters:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male");

// The invocation above will return:
["CodeSweetly", "Web Developer", "Male"]
```

### Spread Operator {#Spread-Operator}

**The spread operator (...) helps you expand iterables into individual elements.**
A spread operator is effective only when used within array literals, function calls, or initialized properties objects.

### Example 1: How Spread Works in an Array Literal {#Example-1-How-Spread-Works-in-an-Array-Literal}

```
const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
[ "Oluwatobi", "Sofela", "is", "my", "name." ]
```

Suppose we did not use the spread syntax to duplicate myName’s content. For instance, if we had written const aboutMe = ["Oluwatobi", myName, "name."]. In such a case, the computer would have assigned a reference back to myName

### Example 2: How to Use Spread to Convert a String into Individual Array Items {#Example-2-How-to-Use-Spread-to-Convert-a-String-into-Individual-Array-Items}

```
const myName = "Oluwatobi Sofela";

console.log([...myName]);

// The invocation above will return:
[ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]
```

### Example 3: How the Spread Operator Works in a Function Call {#Example-3-How-the-Spread-Operator-Works-in-a-Function-Call}

```
const numbers = [1, 3, 5, 7];

function addNumbers(a, b, c, d) {
  return a + b + c + d;
}

console.log(addNumbers(...numbers));

// The invocation above will return:
16
```

Suppose the numbers array had more than four items. In such a case, the computer will only use the first four items as addNumbers() argument and ignore the rest.

```
const numbers = [1, 3, 5, 7, 10, 200, 90, 59];

function addNumbers(a, b, c, d) {
  return a + b + c + d;
}

console.log(addNumbers(...numbers));

// The invocation above will return:
16
```

### Example 4: How Spread Works in an Object Literal {#Example-4-How-Spread-Works-in-an-Object-Literal}

```
const myNames = ["Oluwatobi", "Sofela"];
const bio = { ...myNames, runs: "codesweetly.com" };

console.log(bio);

// The invocation above will return:

{ 0: "Oluwatobi", 1: "Sofela", runs: "codesweetly.com" }
```

- Spread operators can’t expand object literal’s values
- Since a properties object is not an iterable object, you cannot use the spread operator to expand its values.
- However, you can use the spread operator to clone properties from one object into another.

```
const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName, website: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };
```

## Pure vs Impure Functions in JavaScript {#Pure-vs-Impure-Functions-in-JavaScript}

1. Pure Functions:

- They must be predictable
- They must have no side effects

Identical inputs will always return identical outputs, no matter how many times a pure function is called.

2.  Impure Function:

- Unpredictable
- Has side-effects

Side Effects can be:-

- **Modifying a global variable**
- **Modifying an argument**
- **External dependency (APIs, outer variables)**
- **DOM manipulation**
- **Reading/writing files**

```
//IMPURE FUNCTION
const impureAddToArray = (arr1, num) => {
  //altering arr1 in-place by pushing
  arr1.push(num);
  return arr1;
};

// PURE FUNCTION
// Adding a value to an array via a pure function instead can be achieved using the spread operator, which makes a copy of the original array without mutating it.

const pureAddToArray = (arr1, num) => {
  return [...arr1, num];
};
```

```
// IMPURE FUNCTION
const impureAddToObj = (obj, key, val) => {
  obj[key] = val;
  return obj;
};

Because we're modifying the object in-place, the above approach is considered impure. Below is its pure counterpart, utilising the spread operator again.

// PURE FUNCTION
const  pureAddToObj = (obj, key, val) => {
  return { ...obj, [key]: val };
}
```

## Higher Order Functions {#Higher-Order-Functions}

A higher order function is a function that takes a function as an argument, or returns a function.

- Some examples of higher order functions are .map() , .filter() and .reduce(). Both of them take a function as an argument.

### Map Method {#Map-Method}

Using map method in javaScript creates an array by calling a specific function on each element present in the parent array.It returns a new array and elements of arrays are result of callback function.

```
Syntax:
arr.map(function(element, index, array){  }, this);
The this argument will be used inside the callback function. By default, its value is undefined .
```

```
Example:
let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);
```

### Filter Method {#Filter-Method}

The filter() method takes in a callback function and calls that function for every item it iterates over inside the target array. It entails filtering out one or more items (a subset) from a larger collection of items (a superset) based on some condition/preference.

```
Syntax:
arr.filter(function(element, index, array){  }, this);
The this argument will be used inside the callback function. By default, its value is undefined .
```

- Example: Filter items out of an array

```
let people = [
    {name: "aaron",age: 65},
    {name: "beth",age: 2},
    {name: "cara",age: 13},
    {name: "daniel",age: 3},
    {name: "ella",age: 25},
    {name: "fin",age: 1},
    {name: "george",age: 43},
]

let toddlers = people.filter(person => person.age <= 3)

console.log(toddlers)

/*
[{
  age: 2,
  name: "beth"
}, {
  age: 3,
  name: "daniel"
}, {
  age: 1,
  name: "fin"
}]
*/
```

- Example: How to access the context object with this

```
let people = [
    {name: "aaron", age: 65},
    {name: "beth", age: 15},
    {name: "cara", age: 13},
    {name: "daniel", age: 3},
    {name: "ella", age: 25},
    {name: "fin", age: 16},
    {name: "george", age: 18},
]

let range = {
  lower: 13,
  upper: 16
}


let teenagers = people.filter(function(person) {
	return person.age >= this.lower && person.age <= this.upper;
}, range)

console.log(teenagers)

/*
[{
  age: 15,
  name: "beth"
}, {
  age: 13,
  name: "cara"
}, {
  age: 16,
  name: "fin"
}]
*/
```

### Reduce Method {#Reduce-Method}

```
Syntax
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
```

Array.reduce takes two parameters.

- The reducer
- An initial value (optional)

- The reducer is the function doing all the work. As reduce loops over your list, it feeds two parameters to your reducer.

- An accumulator

Accumulator is the eventual return value
When you're looping through the users, how are you keeping track of their total age? You need some counter variable to hold it. That's the accumulator

- The current value

The current value is just like when you use array[i] in a regular loop.

- Example:

```
var euros = [29.76, 41.85, 46.5];

var sum = euros.reduce( function(total, amount){
  return total + amount
}, 0);

sum // 118.11
```

## Using call(), apply() and bind() {#Using-call-apply-and-bind}

We can have objects that have their own properties and methods.
But object1 cannot use the methods of object2 and vice versa.

![CAB](/BL-1007/cab.png)

We can use call(), apply(), and bind() methods to tie a function into an object and call the function as if it belonged to that object.

### Call() Method in JavaScript {#Call-Method-in-JavaScript}

The call() method invokes a function with a specified context.

```
var obj = { firstName: "a", lastName:"b" };

function fullName(){
  return this.firstName + this.lastName;
}
```

use the call() method to tie the function add() to the object obj:

```
add.call(obj, 3);
```

**Use Call() with Multiple Arguments**

```
function fullName(a, b){
  return this.firstName + this.lastName + a + b;
}

console.log(add.call(obj, "x", "y"));
```

### Apply() Method in JavaScript {#Apply-Method-in-JavaScript}

The apply() method does the exact same as call(). The difference is that call() accepts an argument list, but apply() accepts an array of arguments.

```
var obj = { firstName: "a", lastName:"b" };

function fullName(){
  return this.firstName + this.lastName;
}

console.log(add.apply(obj, ["x", "y"]));
```

### Bind() Method in JavaScript {#Bind-Method-in-JavaScript}

call() and apply() methods are executed immediately when called (and returned a value).
But instead of executing a function immediately, bind() returns a copy of a function that can be executed later on.

```
var obj = { num: 2 };

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

const func = add.bind(obj, 3, 5);
func(); // Returns 10
```

## Async and Defer {#Async-and-Defer}

- Without using async and defer
  The parsing is paused until the script is fetched, and executed. Once this is done, parsing resumes.

![Async-Defer](/BL-1007/without-defer-async-head.png)

- Page loading a script with async
  The script is fetched asynchronously, and when it’s ready the HTML parsing is paused to execute the script, then it’s resumed.

![Async](/BL-1007/with-async.png)

- Page loading With defer
  The script is fetched asynchronously, and it’s executed only after the HTML parsing is done.

![Defer](/BL-1007/with-defer.png)

## Event Throtting and debouncing {#Event-Throtting-and-debouncing}

Debouncing and Throttling techniques enhance the performance of your website, also prevent unnecessary API calls and load on the server.

Debouncing and throttling techniques are used to limit the number of times a function can execute.

### Throttling {#Throttling}

Throttling is a technique in which, no matter how many times the user fires the event, the attached function will be executed only once in a given time interval.

**Example**

```
let timer;

const handleInput = (val, delay) => {
  if (timer) {
    return;
  }

  timer = setTimeout(() => {
    console.log(val);
    timer = undefined;
  }, delay);
};

document.getElementById("search-box").addEventListener("keypress", (e) => {
  handleInput(e.target.value, 1000);
});
```

### Debouncing {#Debouncing}

In the debouncing technique, no matter how many times the user fires the event, the attached function will be executed only after the specified time once the user stops firing the event.

**Example**

```
let timer;

const handleInput = (val, delay) => {
  clearTimeout(timer);

  timer = setTimeout(() => {
    console.log(val);
  }, delay);
};

document.getElementById("search-box").addEventListener("keypress", (e) => {
  handleInput(e.target.value, 1000);
});
```

## Event Bubbling and Capturing {#Event-Bubbling-and-Capturing}

![eventflow](/BL-1007/eventflow.svg)

### Event Bubbling {#Event-Bubbling}

**When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.**

```
Let’s say we have 3 nested elements FORM > DIV > P with a handler on each of them

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

A click on the inner <p> first runs onclick:

On that <p>.
Then on the outer <div>.
Then on the outer <form>.
And so on upwards till the document object.
```

![event-order-bubbling](/BL-1007/event-order-bubbling.svg)

### Event Capturing {#Event-Capturing}

**In event capturing, an event propagates from the outermost element to the target element.**

![event-order-capture](/BL-1007/capture.svg)

```
Clicking on the p element calls the click event handlers of all parent elements, starting from the outer and propagating inside to the target element p:
html → body → article → div → p.
```

### Stopping bubbling {#Stopping-bubbling}

```
event.stopPropagation()
```

event.stopPropagation() stops the move upwards, but on the current element all other handlers will run.


Javascript Concepts - Part2


## Prototype {#Prototype}

![Prototype](/BL-1009/object-prototype-empty.svg)

**The prototype is an object that is associated with every functions and objects by default in JavaScript.**

Whenever we create a function , object or array javacript by default attaches a prototype object to it which contains some additional methods inside it.

![Prototype](/BL-1009/proto.png)
All JavaScript objects inherit properties and methods from a prototype:

- Date objects inherit from Date.prototype.
- Array objects inherit from Array.prototype.
- Player objects inherit from Player.prototype.

- The Object.prototype is on top of the prototype inheritance chain. Date objects, Array objects, and Player objects all inherit from Object.prototype.

## The Prototype Chain {#The-Prototype-Chain}

Prototypal inheritance uses the concept of prototype chaining.

Every object created contains [[Prototype]], which points either to another object or null.

Example:-
An object C with a [[Prototype]] property that points to object B. Object B’s [[Prototype]] property points to prototype object A. This continues onward, forming a kind of chain called the prototype chain.

## Prototypal Inheritance {#Prototypal-Inheritance}

```
let animal = {
  eats: true
   walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true
  __proto__ = animal;
};


// we can find both properties in rabbit now:
console.log(rabbit.eats ); // true

rabbit.walk(); // Animal walk

```

![Prototype](/BL-1009/rabbit-animal-object.svg)

```
const obj = {
  firstName: "sds",
  lastName: "bh",
  getFullName: function () {
    return this.firstName + " " + this.lastName;
  }
};

const obj2 = {
  firstName: "ab",
  __proto__: obj
};

console.log(obj2.getFullName()); //ab bh
```

## Creating own prototype {#Creating-own-prototype}

Creating Ployfill for bind method

```
const obj = {
  firstName: "sds",
  lastName: "bh"
};

function getFullName(state) {
  return this.firstName + " " + this.lastName + " " + state;
}

const fName = getFullName.bind(obj, "rnc");
console.log(fName()); //sds bh rnc

Function.prototype.myBind = function (...args) {
  const func = this;
  const params = args.slice(1);
  return function () {
    return func.apply(args[0], params);
  };
};

const fName2 = getFullName.myBind(obj, "bsh");
console.log(fName2()); //sds bh bsh
```

## Creating Ployfill for Call, Apply and Bind method {#Creating-Ployfill-for-Call-Apply-and-Bind-method}

```
const obj = {
  firstName: "sds",
  lastName: "bh"
};

function getFullName(state) {
  return this.firstName + " " + this.lastName + " " + state;
}

Function.prototype.myBind = function (obj, ...args) {
  obj.func = this;
  return () => {
    return obj.func(...args);
  };
};

Function.prototype.myCall = function (obj, ...args) {
  obj.func = this;
  return obj.func(...args);
};

Function.prototype.myApply = function (obj, args) {
  obj.func = this;
  return obj.func(...args);
};

const fName2 = getFullName.myBind(obj, "bsh");
console.log(fName2()); //sds bh bsh

console.log(getFullName.myCall(obj, "kkr"));  //sds bh kkr

console.log(getFullName.myApply(obj, ["kkr"]));  //sds bh kkr
```


Understanding And Using Prototype and Prototypical Inheritance in JavaScript