
## 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 or how they are helpful for the developers.

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


JavaScript is a high-level, interpreted programming language that runs in a web browser. A JavaScript engine is a program that executes JavaScript code, translating it from its human-readable form to machine-executable instructions.

## Overview {#Overview}

Almost everyone has already heard of the V8 Engine as a concept, and most people know that JavaScript is single-threaded or that it is using a callback queue.

In this post, we’ll go through all these concepts in detail and explain how JavaScript actually runs. By knowing these details, you’ll be able to write better, non-blocking apps that are properly leveraging the provided APIs.

If you’re relatively new to JavaScript, this blog post will help you understand why JavaScript is so "weird" compared to other languages. And if you’re an experienced JavaScript developer, hopefully, it will give you some fresh insights on how the JavaScript Runtime you’re using every day actually works.

In this article, we will discuss the internal working of JavaScript in the run-time environment and the browser. This will be an overview walk-through of all the core components that are involved in the execution of JavaScript code. We will discuss the following components:

- JavaScript Engine
- JavaScript Runtime Environment
- The Callstack
- Concurrency and Event Loop

## Javascript Engine {#Javascript-Engine}

As you may heard before, JavaScript is an interpreted programming language. It means that source code isn’t compiled into binary code prior to execution.

How computer can understand what to do with a plain text script?

That’s the job for a JavaScript engine. JavaScript engine is simply a computer program that execute JavaScript code. JavaScript engines are inbuilt in all the modern browsers today. When the JavaScript file is loaded in the browser, JavaScript engine will execute each line of the file from top to bottom (to simplify the explanation we are avoiding hoisting in JS). JavaScript engine will parse the code line by line, convert it into machine code and then execute it.

The JavaScript engine consists of several components, including:

- Parser: The parser reads the JavaScript code and creates an abstract syntax tree (AST), which is a data structure that represents the code.

- Interpreter: The interpreter reads the AST and executes the code.

- Compiler: The compiler optimizes the code by analyzing the code and generating machine code.

- Garbage collector: The garbage collector is responsible for freeing up memory that is no longer needed.

![Js Engine](/BL-1003/jsengine.png)

The most popular JavaScript engine is the V8 engine developed by Google, which is used in Google Chrome and Node.js. Other popular JavaScript engines include SpiderMonkey (used in Firefox), JavaScriptCore (used in Safari), and Chakra (used in Microsoft Edge).

JavaScript engines are constantly being improved to provide better performance and support for new language features. For example, the introduction of just-in-time (JIT) compilers has significantly improved the performance of JavaScript execution. Additionally, new features like async/await and arrow functions have been added to the language to make it more powerful and expressive.



## JavaScript Runtime Environment {#JavaScript-Runtime-Environment}

JavaScript Runtime Environment is a term used to refer to the environment or context in which JavaScript code is executed. It includes the JavaScript engine, as well as other components such as the event loop, the call stack, and the heap.

The event loop is responsible for handling asynchronous operations, such as timers and network requests, while the call stack is used to keep track of the function calls in the current execution context. The heap is where objects and variables are stored in memory.

In addition to these core components, the JavaScript runtime environment may also include various APIs and libraries that provide additional functionality, such as the Document Object Model (DOM) for manipulating HTML documents in the browser, or the Node.js runtime for running JavaScript on the server-side.

Understanding the JavaScript runtime environment is important for developing efficient and reliable JavaScript code, as it provides insight into how the code is executed and how resources are managed.

![Js Runtime Environment](/BL-1003/jsruntime.png)

## The Callstack {#The-Callstack}

The JavaScript Call Stack is a mechanism used by the JavaScript engine to keep track of the function calls in a program. It is a data structure that stores the execution context of each function call in a stack-like fashion.

When a function is called, its execution context, which includes the function's local variables and arguments, is pushed onto the top of the call stack. As the function executes, any nested function calls are also added to the top of the stack. When a function completes execution, its execution context is popped off the stack, and control returns to the calling function.

The call stack is important for understanding how JavaScript executes code and for debugging errors in code. For example, if a function calls itself recursively too many times, it can cause the call stack to exceed its maximum size and result in a stack overflow error.

JavaScript engines implement the call stack as part of their runtime environment, and developers can use tools like the browser's developer console or Node.js's built-in debugger to inspect and manipulate the call stack during program execution.

Let’s see an example. Take a look at the following code:

```
function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

function calculate(a, b) {
  const sum = add(a, b);
  const product = multiply(a, b);
  return sum + product;
}

console.log(calculate(2, 3));

```

In this example, we have three functions: `add`, `multiply`, and `calculate`. When we call `calculate(2, 3)`, the following happens:

1. The calculate function is added to the call stack.
2. `const sum = add(a, b)` is called, and the add function is added to the top of the call stack.
3. `add` returns the sum of a and b, and is popped off the call stack.
4. `const product = multiply(a, b)` is called, and the multiply function is added to the top of the call stack.
5. multiply returns the product of `a` and `b`, and is popped off the call stack.
6. The calculate function returns the sum of sum and product, and is popped off the call stack.
7. The final result, `11`, is logged to the console.

As each function is called and returns, it is added and removed from the call stack in a last-in, first-out (LIFO) order. This allows the JavaScript engine to keep track of the execution context of each function call.
## Concurrency and Event Loop {#Concurrency-and-Event-Loop}

JavaScript is a single-threaded language, it can only perform one task at a time. However, it does have mechanisms for dealing with concurrency, such as the event loop. The event loop is responsible for handling events, callbacks, and I/O operations in a non-blocking way, allowing JavaScript to perform tasks in the background while still responding to user input.

Let's take a look at an example to better understand how the event loop works in JavaScript:

```
console.log("start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("Promise");
});

console.log("end");

```

This code logs four messages to the console:

```
start
end
Promise
setTimeout
```

When this code is run, the following happens:

1. The first `console.log()` statement is executed, and the message `"start"` is logged to the console.

2. The `setTimeout()` function is called with a callback function and a timeout of 0 milliseconds. This means that the callback function will be executed as soon as possible, but not necessarily immediately.

3. The `Promise.resolve()` function creates a new resolved Promise, which means that its then() callback will be executed asynchronously in the next tick of the event loop.

4. The second `console.log()` statement is executed, and the message "end" is logged to the console.

5. The current task (i.e. the script) has completed, so the event loop moves on to the next tick.

6. In the next tick, the `then()` callback for the resolved Promise is executed, and the message `"Promise"` is logged to the console.

7. Finally, in the same tick, the `setTimeout()` callback function is executed, and the message `"setTimeout"` is logged to the console.

So even though the `setTimeout()` function was called before the `Promise.resolve()` function, its callback function is executed after the Promise's then() callback because the Promise's callback is scheduled in the next tick of the event loop.


This article is meant to be aimed at digging deeper into JavaScript and how it really works.

Understanding JavaScript Engine


**Question 1: What is `typeof []`**  
**Answer**: Object. Actually Array is derived from Object. If you want to check array use Array.isArray(arr)

---

**Question 2: What is `typeof` arguments**  
**Answer**: Object. arguments are array like but not array. it has length, can access by index but can't push pop, etc.

---

**Question 3: What is `2+true`**  
**Answer**: 3. The plus operator between a number and a boolean or two boolean will convert boolean to number. Hence, true converts to 1 and you get result of 2+1

---

**Question 4: What is `'6'+9`**  
**Answer**: 69. If one of the operands of the plus (+) operator is string it will convert other number or boolean to string and perform a concatenation. For the same reason, "2"+true will return "2true"

---

**Question 5: What is the value of `4+3+2+"1"`**  
**Answer**: 91 . The addition starts from the left, 4+3 results 7 and 7+2 is 9. So far, the plus operator is performing addition as both the operands are number. After that 9 + "1" where one of the operands is string and plus operator will perform concatenation.

---

**Question 6: What is the value of `"1"+2+4`**  
**Answer**: "124". For this one "1" + 2 will produce "12" and "12"+4 will generates "124".

---

**Question 7: What is the value of -'34'+10**  
**Answer**: -24. minus(-) in front of a string is an unary operator that will convert the string to a number and will make it negative. Hence, -'34' becomes, -34 and then plus (+) will perform simple addition as both the operands are number.

---

**Question 8: What is the value of `+'dude'`**  
**Answer**: NaN. The plus (+) operator in front of a string is an unary operator that will try to convert the string to number. Here, JavaScript will fail to convert the "dude" to a number and will produce NaN.

---

**Question 9: If you have `var y = 1, x = y = typeof x;` What is the value of x?**  
**Answer**: "undefined"

---

**Question 10: for `var a = (2, 3, 5)`; what is the value of a?**  
**Answer**: 5. The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand. ref: [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator)

---

**Question 11: for `var a = (1, 5 - 1) \* 2` what is the value of a?**  
**Answer**: 8

---

**Question 12: What is the value of `!'bang'`**  
**Answer**: false. ! is NOT. If you put ! in front of truthy values, it will return false. Using !! (double bang) is a tricky way to check anything truthy or falsy by avoiding implicit type conversion of == comparison.

---

**Question 13: What is the value of `parseFloat('12.3.4')`**  
**Answer**: 12.3

---

**Question 14: What is value of `3 instanceof Number`**  
**Answer**: false

---

**Question 15:null == undefined**  
**Answer**: true

---

**Question 16:What is the value of !!function(){};**  
**Answer:** true

---

**Question 17: What is the value of `typeof bar`**  
**Answer:** "undefined"

---

**Question 18: Palindrome Problem**  
**Answer:**: A palindrome is a word, sentence, or other types of character sequence that reads the same backward as forward. For example, “racecar” and “madam” are palindromes. “Table” and “John” aren’t palindromes, because they don’t read the same from left to right and from right to left.

Example 1: Check Palindrome Using for Loop
```
function checkPalindrome(string) {

    // find the length of a string
    const len = string.length;

    // loop through half of the string
    for (let i = 0; i < len / 2; i++) {

        // check if first and last string are same
        if (string[i] !== string[len - 1 - i]) {
            return 'It is not a palindrome';
        }
    }
    return 'It is a palindrome';
}

// take input
const string = prompt('Enter a string: ');

// call the function
const value = checkPalindrome(string);

console.log(value);
```

Output:
```
Enter a string: racecar
It is a palindrome
```

Example 2: Check Palindrome using built-in Functions

```
function checkPalindrome(string) {

    // convert string to an array
    const arrayValues = string.split('');

    // reverse the array values
    const reverseArrayValues = arrayValues.reverse();

    // convert array to string
    const reverseString = reverseArrayValues.join('');

    if(string == reverseString) {
        console.log('It is a palindrome');
    }
    else {
        console.log('It is not a palindrome');
    }
}

//take input
const string = prompt('Enter a string: ');

checkPalindrome(string);
```

Output:
```
Enter a string: hello
It is not a palindrome
```

---

**Question 19: What will the following code output?**  

```
for (var i = 0; i < 4; i++) {
  setTimeout(() => console.log(i), 0)
}
```
**Answer:**  
The classic pitfall here is the Zero delays. setTimeout(callback, 0) doesn't mean that the callback will be fire after zero milliseconds.

Here’s what happen on the event loop side:

1. Current Call Stack is set to the first setTimeout().

2. window.setTimeout() is considered as a Web APIs (for better Non-Blocking I/O). So the call stack sends this part of code to correct Web APIs. After 0 milliseconds, the callback (here an anonymous function) would be sent to the Queue (not to the call stack).


3. As the call stack is free, for-loop can continue to the second setTimeout …(repeat after we meet this condition i < 4)…

4. Now the loop is over and i === 4. JS can now execute the callback queue one by one. Each console.log(i) will print the 4.

**Question 20: What's the result of the equality check?**
```
0.1 + 0.2 === 0.3 // => ???
```
**Answer:**  
First, let's look at the value of <em>0.1 + 0.2:</em>

```
0.1 + 0.2; // => 0.30000000000000004
```
The sum of 0.1 and 0.2 numbers is not exactly 0.3, but slightly above 0.3.

Due to how floating point numbers are encoded in binary, operations like addition of floating point numbers are subject to rounding errors.

Simply put, comparing floats directly is not precise.

Thus 0.1 + 0.2 === 0.3 is *false*.

---

**Question 21: What are the different types of Error Name values in JavaScript?**  
**Answer:**  
There are 6 types of Error Name values. Each one of them is briefly explained as follows:

- **Eval Error** – Thrown when coming across an error in eval() (Newer JS releases don’t have it)
- **Range Error** – Generated when a number outside the specified range is used
- **Reference Error** – It comes into play when an undeclared variable is used.
- **Syntax Error** – When the incorrect syntax is used, we get this error
- **Type Error** – This error is thrown when a value outside the range of data types is tried to be used.
- **URI Error** – Generated due to the use of illegal characters

---

**Question 22: What are the escape characters in JavaScript?**  
**Answer:**  
In JavaScript, we use escape characters, typically backslash (\ \) while working with special characters, such as ampersands (&), apostrophes (‘), double quotes (“ “), and single quotes (‘ ‘). Whatever is enclosed within the escape, characters get displayed by JavaScript.

Six additional escape characters are also available in JavaScript:  
- **\b** – Backspace
- **\f** – Form feed
- **\n** – Newline
- **\r** – Carriage return
- **\t** – Horizontal tabulator
- **\v** – Vertical tabulator

---

**Question 23: Please explain the various JavaScript data types.**  
**Answer:**  
There are a total of 7 basic data types supported by JavaScript. Each one of them is briefed up as follows:

- **Boolean** – Represents true and false values.
- **Null** – Represents empty, nothing, and unknown type of values
- **Number** – Represents both integer and floating-point values.
- **Object** – Used for storing collections of data or more complex entities
- **String** – Represents single-character, multi-character, and alphanumeric values.
- **Symbol** – Used for creating unique identifiers for objects
- **Undefined** – Represents value not assigned. If a variable is only declared and not assigned in JS, it represents the undefined data type.

---

**Question 24: What is Object Destructuring?**  
**Answer:**  
Object destructuring is a feature in JavaScript that allows you to extract properties from an object and assign them to variables, using a shorthand syntax. It allows you to extract data from an object and assign it to variables with the same name as the object's properties. For example:

```
const person = { name: "John", age: 25 };
const { name, age } = person;
console.log(name); // "John"
console.log(age); // 25
```
In this example, the properties name and age of the person object are extracted and assigned to variables with the same name, which can then be accessed and used independently.

---

**Question 25: What is the difference between null and undefined in JavaScript?**  
**Answer:**  
In JavaScript, undefined means a variable has been declared but has not been assigned a value. null, on the other hand, is a value that represents no value or no object.

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

25 Tricky JavaScript Interview Questions


## 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


## Apply Method {#Apply-Method}

The apply() method in JavaScript is used to call a function with a given this value and arguments provided as an array (or an an argument list).

For example:

```
function add(a, b) {
  return a + b;
}

var numbers = [5, 10];
console.log(add.apply(null, numbers)); //15
```

In the above example, we have a function add that takes two arguments and returns their sum. We then create an array numbers with two values, 5 and 10. We use the `apply()` method to call the add function, passing in null as the this value (since it's not used in this case) and numbers as the argument list. The call to `apply()` returns the sum of the two numbers, which is 15.

It's important to note that the `apply()` method does the same thing as the `call()` method, the only difference is how you pass the arguments. With `call()` you pass the arguments as separate values, while with `apply()` you pass the arguments as an array.

## Bind Method {#Bind-Method}
The `bind()` method in JavaScript creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Here is an example of using the `bind()` method:

```
let person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

let fullName = person.fullName.bind({firstName: "Jane", lastName: "Doe"});
console.log(fullName()); // Output: "Jane Doe"
```

In this example, we create an object `person` with a `fullName` method that returns a string of the person's first and last name. We then create a new function `fullName` by using the bind() method on person.fullName, and set this to an object with a firstName of "Jane" and a `lastName` of "Doe". When we call the `fullName()` function, it returns "Jane Doe" because this is set to the object we provided to bind().

## Bind Allows Us to Set the this Value on Methods {#Bind-Allows-Us-to-Set-the-this-Value-on-Methods}

the `bind()` method in JavaScript allows you to create a new function that has its this value set to the first argument passed to `bind()`. This can be useful in situations where you want to pass a method as a callback, but you want to ensure that the `this` value inside the method stays the same.
For example, you can use bind to connect the `this` value of an object to a method, so that it remains the same when the method is called as a callback.

```
let obj = {
  x: 10,
  getX: function() {
    return this.x;
  }
};
let getX = obj.getX;
console.log(getX()); // undefined
let boundGetX = getX.bind(obj);
console.log(boundGetX()); // 10
```

It creates a new function with the same body and scope as the original function, but where this is bound to the first argument of bind(), regardless of how the function is being called.

## Call Method {#Call-Method}
The "call" method in JavaScript allows you to invoke a function and set the "this" value inside the function to a specific object. Here's an example:

```
let obj = {name: "John"};

let greet = function(greeting) {
  console.log(greeting + ", " + this.name);
};

greet.call(obj, "Hello"); // Output: "Hello, John"
```

In this example, the "call" method is used to invoke the "greet" function and set the "this" value inside the function to the "obj" object. As a result, the "this.name" inside the function refers to the "name" property of the "obj" object and the output is "Hello, John".

You can also pass multiple arguments to the call method, like this:

```
let add = function(a, b) {
  return a + b;
}

console.log(add.call(this, 1, 2)); // output: 3
```
In this example, `add.call(this, 1, 2)` is equivalent to `add(1, 2)`

## Borrowing Functions with Apply and Call {#Borrowing-Functions-with-Apply-and-Call}
`apply()` and `call()` methods allow you to borrow functions from other objects. These methods both invoke a function and allow you to pass an argument list to the function as an array or as individual arguments.

The difference between the two methods is the way the arguments are passed. `apply()` takes an array of arguments, while `call()` takes individual arguments separated by commas.

Example of using `apply()`:

```
let object1 = {name: "John"};
let object2 = {name: "Mary"};

let sayName = function(greeting) {
  console.log(greeting + " " + this.name);
}

sayName.apply(object1, ["Hello"]); // Output: "Hello John"
sayName.apply(object2, ["Hello"]); // Output: "Hello Mary"
```
Example of using `call()`:

```
let object1 = {name: "John"};
let object2 = {name: "Mary"};

let sayName = function(greeting) {
  console.log(greeting + " " + this.name);
}

sayName.call(object1, "Hello"); // Output: "Hello John"
sayName.call(object2, "Hello"); // Output: "Hello Mary"
```
In both example the `sayName` function is borrowed by object1 and object2 and the `this` keyword inside the function is refering to the object that borrows the function.

## Use Apply () to Execute Variable-Arity Functions {#Use-Apply--to-Execute-Variable-Arity-Functions}

The apply() method in JavaScript allows you to call a function with a given this value and arguments provided as an array (or an an arguments object). This can be useful when working with variable-arity functions, which take a variable number of arguments. For example:

```
function myFunction(arg1, arg2, arg3) {
  console.log(arg1 + arg2 + arg3);
}

const args = [1, 2, 3];
myFunction.apply(null, args); // logs "6"
```

In this example, the `apply()` method is used to call the myFunction function with the args array as its arguments. The first argument passed to `apply()` is the this value for the function call (in this case, null), and the second argument is the array of arguments to pass to the function.

Another way to achieve the same is using the spread operator:

```
myFunction(...args); // logs "6"
```

It's worth noting that `apply()` method has been removed from the ECMAScript standard as of ES6 and it is not recommended to use it.



JavaScript’s Apply Call and Bind Methods are Essential for Professionals

JavaScript’s Apply, Call, and Bind Methods


## 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.


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

Javascript Concepts - Part2


Browser JavaScript execution flow, as well as in Node.js, is based on an event loop. `The event loop concept is very simple. There’s an endless loop, where the JavaScript engine waits for tasks, executes them, and then sleeps, waiting for more tasks.`

`The event loop is the secret behind JavaScript’s asynchronous programming.`

## Event Loop Visualisation/Basic Architecture {#Event-Loop-VisualisationBasic-Architecture}

![Event Loop](/BL-1008/eventloop.png)

### Memory Heap {#Memory-Heap}

This is where all the memory allocation happens for your variables, that you have defined in your program.

### Call Stack {#Call-Stack}

This represents the single thread provided for JavaScript code execution. This is where all your javascript code gets pushed and executed one by one as the interpreter reads your program, and gets popped out once the execution is done. It is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.

### Browser or Web APIs {#Browser-or-Web-APIs}

They are built into your web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it. They are not part of the JavaScript language itself, rather they are built on top of the core JavaScript language, providing you with extra superpowers to use in your JavaScript code.

For example, the Geolocation API provides some simple JavaScript constructs for retrieving location data so you can say, plot your location on a Google Map. In the background, the browser is actually using some complex lower-level code (e.g. C++) to communicate with the device’s GPS hardware (or whatever is available to determine position data), retrieve position data, and return it to the browser environment to use in your code. But again, this complexity is abstracted away from you by the API.

**Common browser APIs**

- APIs for manipulating documents
- APIs that fetch data from the server
- Audio and Video APIs
- Client-side storage APIs

### Event or Callback Queue {#Event-or-Callback-Queue}

This is where your asynchronous code gets pushed to, and waits for the execution.

### Event Loop {#Event-Loop}

It has one simple job `to monitor the call stack and the callback queue.`
It keeps running continuously and checks the Main stack, if it has any frames to execute, if not then it checks Callback queue, if Callback queue has codes to execute then it pops the message from it to the Main Stack for the execution.

### Job Queue or Microtask Queue {#Job-Queue-or-Microtask-Queue}

Apart from Callback Queue, browsers have introduced one more queue which is “Job Queue”, reserved only for new Promise() functionality. So when you use promises in your code, you add .then() method, which is a callback method. These `thenable` methods are added to Job Queue once the promise has returned/resolved, and then gets executed.

## Execution of async function in javascript {#Execution-of-async-function-in-javascript}

Whenever an async function is called, it is sent to a browser API. These are APIs built into the browser.

`An example of this is the setTimeout method. When a setTimeout operation is processed, it is sent to the corresponding API which waits till the specified time to send this operation back in for processing.`

`This operation is then send to the callback queue. Hence, we have a cyclic system for running async operations in JavaScript. The language itself is single-threaded, but the browser APIs act as separate threads.`

The `event loop` facilitates this process. It has one simple job `to monitor the call stack and the callback queue.` If the call stack is empty, the event loop will take the first event from the queue and will push it to the call stack, which effectively runs. If it is not, then the current function call is processed.

```
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

Output:
First
Third
Second
```

![Callback Queue](/BL-1008/callbackqueue.gif)

## Why Job Queue or Microtask Queue {#Why-Job-Queue-or-Microtask-Queue}

Micro-tasks has high priority in executing callbacks, if event loop tick comes to Micro-tasks, it will execute all the jobs in job queue first until it gets empty, then will move to callback queue.

- The primary reason for prioritizing the micro-task queue is to improve the user experience.
- Micro-tasks include mutation observer callbacks as well as promise callbacks.

![micro-task Queue](/BL-1008/microtask.gif)

Example:

```
console.log('Message no. 1: Sync');

setTimeout(function() {
   console.log('Message no. 2: setTimeout');
}, 0);

var promise = new Promise(function(resolve, reject) {
   resolve();
});

promise.then(function(resolve) {
   console.log('Message no. 3: 1st Promise');
})
.then(function(resolve) {
   console.log('Message no. 4: 2nd Promise');
});

console.log('Message no. 5: Sync');

// Message no. 1: Sync
// Message no. 5: Sync
// Message no. 3: 1st Promise
// Message no. 4: 2nd Promise
// Message no. 2: setTimeout
```

All `thenable` callbacks of the promise are called first, then the setTimeout callback is called.

**References:**

- <a href="https://towardsdev.com/event-loop-in-javascript-672c07618dc9" target="_blank">Event Loop</a>


Understanding how javascript works under the hood, how it executes our asynchronous javascript code and event loop

Javascript Event Loop:Explained


## 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

Prototype and Prototypical Inheritance


**Visual overview of topics covered in this tutorial**

![Lifecycle](/BL-1010/Lifecycle.png)

## What is the React component lifecycle? {#What-is-the-React-component-lifecycle}

In React, components go through a lifecycle of events:

- Mounting (adding nodes to the DOM)
- Updating (altering existing nodes in the DOM)
- Unmounting (removing nodes from the DOM)

## Mounting lifecycle methods {#Mounting-lifecycle-methods}

The mounting phase refers to the phase during which a component is created and inserted to the DOM.
The following methods are called in order.

- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()

### constructor() {#constructor}

The constructor() is the very first method that is invoked before the component is mounted to the DOM.

The constructor method is called before the component is mounted to the DOM. In most cases, you would initialize state and bind event handlers methods within the constructor method.

Example of the constructor() React lifecycle method in action:

```
const MyComponent extends React.Component {
  constructor(props) {
   super(props)
    this.state = {
       points: 0
    }
    this.handlePoints = this.handlePoints.bind(this)
    }
}
```

### static getDerivedStateFromProps() {#static-getDerivedStateFromProps}

Its main function is to ensure that the state and props are in sync for when it’s required.

The basic structure of the static getDerivedStateFromProps() looks like this:

```
static getDerivedStateFromProps(props, state) {
  //do stuff here
}
```

```
You can return an object to update the state of the component:

static getDerivedStateFromProps(props, state) {
    return {
       points: 200 // update state with this
    }
}

Or you can return null to make no updates:

static getDerivedStateFromProps(props, state) {
 return null
}
```

```
class App extends Component {
  state = {
    points: 10
  }

  // *******
  //  NB: Not the recommended way to use this method. Just an example. Unconditionally overriding state here is generally considered a bad idea
  // ********

  static getDerivedStateFromProps(props, state) {
    return {
      points: 1000
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            You've scored {this.state.points} points.
          </p>
        </header>
      </div>
    );
  }
}

The 1000 comes from updating state within the static getDerivedStateFromProps method.

```

### render() {#render}

As the name suggests it handles the rendering of your component to the UI

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

The render() method returns JSX that is displayed in the UI. A render() can also return a null if there is nothing to render for that component.

A render() method has to be pure with no side-effects.
React requires that your render() is pure. Pure functions are those that do not have any side-effects and will always return the same output when the same inputs are passed. This means that you can not `setState() within a render()`. `You cannot modify the component state within the render().`

### componentDidMount {#componentDidMount}

After render is called, `the component is mounted to the DOM and the componentDidMount method is invoked.`

This function is invoked immediately after the component is mounted to the DOM.

You would use the componentDidMount lifecycle method to grab a DOM node from the component tree immediately after it’s mounted.

**If you also want to make network requests as soon as the component is mounted to the DOM, this is a perfect place to do so.**

```
componentDidMount() {
  this.fetchListOfTweets() // where fetchListOfTweets initiates a netowrk request to fetch a certain list of tweets.
}
```

**You could also set up subscriptions such as timers**

```
// e.g requestAnimationFrame
componentDidMount() {
    window.requestAnimationFrame(this._updateCountdown);
 }
```

## Updating lifecycle methods {#Updating-lifecycle-methods}

Whenever a change is made to the state or props of a React component, the component is rerendered. In simple terms, the component is updated. This is the updating phase of the React component lifecycle.

- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()

### shouldComponentUpdate() {#shouldComponentUpdate}

In most cases, you’ll want a component to rerender when state or props changes. However, you do have control over this behavior.

Within this lifecycle method, you can return a boolean true or false and control whether the component gets rerendered (e.g., upon a change in state or props).

```
shouldComponentUpdate(nextProps, nextState)
{
 return this.props.title !== nextProps.title ||
  this.state.input !== nextState.input
}
```

### render() {#render}

After the shouldComponentUpdate method is called, render is called immediately afterward, depending on the returned value from shouldComponentUpdate, which defaults to true.

### getSnapshotBeforeUpdate() {#getSnapshotBeforeUpdate}

The getSnapshotBeforeUpdatelifecycle method stores the previous values of the state after the DOM is updated. getSnapshotBeforeUpdate() is called right after the render method.

```
getSnapshotBeforeUpdate(prevProps, prevState) {

}
```

Here’s the important thing: the value queried from the DOM in getSnapshotBeforeUpdate refers to the `value just before the DOM is updated, even though the render method was previously called`.

`The getSnapshotBeforeUpdate React lifecycle method doesn’t work on its own. It is meant to be used in conjunction with the componentDidUpdate lifecycle method`.

### componentDidUpdate() {#componentDidUpdate}

The componentDidUpdate lifecycle method is invoked after the getSnapshotBeforeUpdate. As with the getSnapshotBeforeUpdate method it receives the previous props and state as arguments:

```
componentDidUpdate(prevProps, prevState) {

}
```

However it also takes whatever value is returned from the getSnapshotBeforeUpdate lifecycle method is passed as the third argument to the componentDidUpdate method.

```
componentDidUpdate(prevProps, prevState, snapshot) {

}
```

## Unmounting lifecycle method {#Unmounting-lifecycle-method}

The following method is invoked during the component unmounting phase

- componentWillUnmount()

### componentWillUnmount() {#componentWillUnmount}

The componentWillUnmount lifecycle method is invoked immediately before a component is unmounted and destroyed. This is the ideal place to perform any necessary cleanup such as clearing up timers, cancelling network requests, or cleaning up any subscriptions that were created in componentDidMount().

```
// e.g add event listener
componentDidMount() {
  el.addEventListener()
}
```

```
// e.g remove event listener
componentWillUnmount() {
  el.removeEventListener()
}
```

**References:**

- <a href="https://programmingwithmosh.com/javascript/react-lifecycle-methods" target="_blank">React Lifecycle Methods- A Deep Dive</a>
- <a href="https://blog.logrocket.com/react-lifecycle-methods-tutorial-examples" target="_blank">React lifecycle methods: An approachable tutorial with examples</a>


Lifecycle methods are series of events that happen throughout the birth, growth, and death of a React component.

React Lifecycle Methods



In this article, we’ll look at how to unit test components built with `Angular`. Components are the centerpiece of Angular applications. We’ll explore what a component is, why it is important, and how to test it.

## Benefits of Unit Testing? {#Benefits-of-Unit-Testing}

Unit testing in Angular can provide several benefits, including:

- Improved code quality: Unit tests help to ensure that individual pieces of code (units) are functioning as expected, which can help to catch and prevent bugs before they become an issue in the application.

- Faster development: Unit tests can help to improve the speed at which new features can be added to the application, as developers can test new code changes quickly and easily.

- Easier maintenance: Unit tests can help to make the codebase more maintainable, as they provide a means of testing and verifying the codebase as changes are made over time.

- Better documentation: Unit tests can serve as a form of documentation, providing clear examples of how the code should be used and what it is expected to accomplish.

- Confidence in refactoring: Unit testing allows you to make changes to the code with confidence, knowing that if a unit test fails, you have likely introduced a bug.

## Create a project with jasmine and karma {#Create-a-project-with-jasmine-and-karma}
Install angular-cli and create a new project:

```
npm install -g @angular/cli
ng new angular-unit-testing
```
When you create the project all the dependencies get installed among them everything you are going to need to create the tests.

![Dependencies](/BL-1011/package_version.png)

In the image above you can see all the dependencies installed for testing purposes. Let’s go through the more important ones;

- **jasmine-core.** Jasmine is the framework we are going to use to create our tests. It has a bunch of functionalities to allow us the write different kinds of tests.  
- **Karma.** Karma is a task runner for our tests. It uses a configuration file in order to set the startup file, the reporters, the testing framework, the browser among other things.
- The rest of the dependencies are mainly reporters for our tests, tools to use karma and jasmine and browser launchers.


To run the test you only need to run the command “ng test”. This command is going to execute the tests, open the browser, show a console and a browser report and, not less important, leave the execution of the test in watch mode.

#### Karma Config {#Karma-Config}
Let’s take a look at the karma configuration file created by angular-cli.

![Karma Configuration file](/BL-1011/karmaconfig.png)

You probably can guess what most of these configuration properties are for, but let’s go through some of them.

- **frameworks:** this is where jasmine gets set as a testing framework. If you want to use another framework this is the place to do it.
- **reporters:** this is where you set the reporters. You can change them or add new ones.
- **autoWatch:** if this is set to true, the tests run in watch mode. If you change any test and save the file the tests are re-build and re-run.
- **browsers:** this is where you set the browser where the test should run. By default it is chrome but you can install and use other browser launchers.

## When can we write the unit tests {#When-can-we-write-the-unit-tests}  
- At the beginning and completion of initial development.
- If we add any feature to the project, we have to write unit tests for it.
- If we change any existing feature, we have to write unit tests for it.

## Why use Jasmine {#Why-use-Jasmine}
Jasmine is a behavior-driven javascript testing framework. Here are some features of Jasmine
- Default integration with karma.
- Provides additional functions such as spy, fakes, and pass-throughs.
- easy integration with reporting.

## Why use Karma {#Why-use-Karma}  
Karma is a test-runner for javascript apps. Here are some features of Karma
- Angular recommends Karma and CLI create it out of the box.
- We can automate tests in different browsers and devices
- We can watch files without manual restart
- We can easily integrate with a continuous integration server

## Jasmine Test Specifications {#Jasmine-Test-Specifications}
![Test Spec](/BL-1011/test_spec.png)

## Testing Tools {#Testing-Tools}  
![Testing tools](/BL-1011/test_tools.png)

## Setup and Clean up {#Setup-and-Clean-up}
![Setup and Clean up](/BL-1011/setup_clean.png)

## Getting started with testing Angular {#Getting-started-with-testing-Angular}

To get started with testing Angular, you will need to have the Angular CLI (Command Line Interface) installed. Once you have the CLI installed, you can generate a new Angular project by running the command "ng new projectName".

You will also need to have a testing framework installed, such as Jasmine or Karma. Angular CLI comes with Karma pre-installed, so you can start writing tests right away.

In order to write tests for your Angular components, you will need to create a new file with a '.spec.ts' extension in the same directory as the component you want to test. You can then import the component and any necessary modules and write your test cases using functions such as "describe", "beforeEach", "it", and "expect".

To run your tests, you can use the command "ng test" in your project's root directory. This command will start a development server and run your tests in a browser using Karma.

It's also possible to use Jest as a test runner, which can be done by adding the jest library to your project and configuring the test runner in your angular.json file.

Here is an example of how a simple test for an Angular component might look like:

```
import { TestBed, async } from '@angular/core/testing';
import { MyComponent } from './my.component';

describe('MyComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        MyComponent
      ],
    }).compileComponents();
  }));

  it('should create the component', () => {
    const fixture = TestBed.createComponent(MyComponent);
    const component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });
});
```
For more information and examples on how to test Angular applications, you can refer to the official documentation at <a href="https://angular.io/guide/testing" target="_blank">https://angular.io/guide/testing</a>


## Key Concepts {#Key-Concepts}
Some key concepts that we need to learn before we begin testing the app

**TestBed**

This is the basic building block of the angular testing module. It actually creates a dynamically constructed test module that emulates an Angular NgModule. The metadata that goes into `TestBed.configureTestingModule()` and `@NgModule` are pretty similar and this is where we actually configure the spec file.

If we look at the below file, `TestBed.configureTestingModule()` takes a similar configuration as @NgModule. So, It actually creates a dynamic testing module and always put this configuration in the `beforeEach()` which runs before every test method.

**compileComponents()**

If we look at the above screenshot, we are using `compileComponents()` method. If we are creating a component with external files such as styleUrls, templateUrl, We need to read these files from the file system before we even create a component and this is asynchronous operation and that is the reason entire configuration is placed inside an async function.

It reads the external files from the file system asynchronously and compiles the corresponding component. If we are running the tests with angular CLI, we don’t need to do this. This is because CLI compiles all the code before testing.

**Why two beforeEach functions**
If we look at the below file, we are using two beforeEach functions. why do we need two? 

Remember `compileComponents()` is asynchronous So, we want to make sure that component is compiled before we even create a fixture to access the component instance. The second `beforeEach()` runs after the first one.

**Why do we use NO_ERRORS_SCHEMA**
Adding this to spec file forces angular to ignore all the unrecognized tags while testing the app.component”

Let’s select an `app.component.ts` component and test it. Added `f` to describe global function to run only this file when we execute tests. These are called `Focused Tests`.

**describe()**  
Covers all the tests of a component, it’s like the marks a suite of all the different test cases we are going to test for a component.

**CompnentFixture**  
This is a test harness for interacting with the created component and its corresponding element.

This is the first test of this test suit we test that confirms that the component is created and exists.

In the second test, we test whether or not the value in the h1 tag is what we have given in the title variable.

**detectChange()**  
In the actual production, data binding is done automatically but in `TestBed.createComponent()` does not do data binding unless we trigger by `detectChange()`.

**nativeElement()**  
`nativeElement()` will be HTML element, and we can access its child and dive into its DOM tree using `querySelectors()`.


## Testing Component Class {#Testing-Component-Class}

In this example, we will look at how we test a class of a component. For this we have a simple method that filters an item based on id mismatch and filtered items are assigned to component level variable itemList.

**app.component.ts**
![Method sample](/BL-1011/method_to_test.png)

**app.component.spec.ts**
![Sample Spec](/BL-1011/sample_test.png)

let’s go through how we tested it.

A very crucial part of testing, in general, we have to think of different possible scenarios to test the app completely. In this example, we have to test whether we are getting the right item count when deleteItem method is called with an item as defined in the above screenshot.

*Scenarios will be "should delete an item with an existing item".*

*Should not delete an item with a new item.*

## Code Coverage {#Code-Coverage}
Code coverage is a measure of how much of the codebase is being executed during tests.  
A coverage report is a visual representation of the code coverage, which highlights which parts of the code have been executed and which have not. The report can be generated using a tool such as Istanbul, which is a JavaScript code coverage tool that can be used with Angular projects. The report can be viewed in a browser and helps developers identify areas of the code that need more testing.

## Best Practices {#Best-Practices}
- Make sure unit test runs in an isolated environment so that they run fast.
- Make sure that we have good percentage of the code coverage
- When it comes to testing services, always use spy from the jasmine framework for the dependencies this makes testing a lot faster.
- When we subscribe to observables while testing, Make sure we provide both success and failure callbacks. This will remove unnecessary errors.
- When testing components with service dependencies, always use mock services instead of real services.
- All the TestBedConfiguration should be placed in beforeEach not to repeat the same code for every test.
while testing components, always access the DOM with debugElement instead of directly calling nativeElement. This is because debugElement provides an abstraction for the underlying runtime environment. This will reduce unnecessary errors.
- Prefer By.css instead of queryselector if you are running the app on the server as well. This is because the queryselector works only in the browser. if we are running the app on the server, this will fail. But, we have to unwrap the result to get the actual value.
- Always use a `fixture.detectChanges()` instead of `ComponentFixtureAutoDetect`. ComponentFixtureAutoDetect doesn’t know the synchronous update to the components.
- Call `compileComponents()` if we are running the tests in the non-CLI environment.
- Don’t overuse `NO_ERRORS_SCHEMA`. This tells angular to ignore the attributes and unrecognized tags, prefer to use component stubs.
- Another advantage of using component stubs instead of `NO_ERRORS_SCHEMA` is that we can interact with these components if necessary. It’s better to use both techniques together
- Never do any setup after calling `compileComponents()`. compileComponents is asynchronous and should be executed in async beforeEach. Maintain the second beforeEach to do the synchronous setup.

**References:**

- <a href="https://karma-runner.github.io/latest/index.html" target="_blank">[Karma - Spectacular Test Runner for Javascript](https://karma-runner.github.io/latest/index.html)</a>
- <a href="https://codecraft.tv/courses/angular/unit-testing/jasmine-and-karma/" target="_blank">Jasmine & Karma Unit testing</a>



Testing Angular based applications with Jasmine and Karma.

Unit Testing with Karma & Jasmine


## OOP {#object-oriented-programming}

Today, many popular programming languages (such as Java, JavaScript, C#, C++, Python, PHP, Ruby and Objective-C) support OOP.
Object-oriented programming **(OOP)** is a programming paradigm that uses abstraction to create models based on the real world. OOP uses several techniques from previously established paradigms, including modularity, polymorphism, and encapsulation.
OOP refers to using self-contained pieces of code to develop applications. 
* We call these self-contained pieces of code objects, better known as Classes in most OOP programming languages and Functions in JavaScript. 
* We use objects as building blocks for our applications. Building applications with objects allows us to adopt some valuable techniques, namely, Inheritance (objects can inherit features from other objects), Polymorphism (objects can share the same interface—how they are accessed and used—while their underlying implementation of the interface may differ) and Encapsulation (each object is responsible for specific tasks).

## Terminology {#Terminology}

**Namespace**  
A container which lets developers bundle all functionality under a unique, application-specific name.  

**Class**  
Defines the object's characteristics. A class is a template definition of an object's properties and methods.  
**Object**  
An instance of a class.  
**Property**  
An object characteristic, such as color.  
**Method**  
An object capability, such as walk. It is a subroutine or function associated with a class.  
**Constructor**  
A method called at the moment an object is instantiated. It usually has the same name as the class containing it.  
**Inheritance**  
A class can inherit characteristics from another class.  
**Encapsulation**  
A method of bundling the data and methods that use the data.  
**Abstraction**  
The conjunction of an object's complex inheritance, methods, and properties must adequately reflect a reality model.  
**Polymorphism**  
Poly means "many" and morphism means "forms". Different classes might define the same method or property.  


## JavaScript OOP {#JavaScript-OOP}

#### Namespace {#Namespace}
A namespace is a container which allows developers to bundle up functionality under a unique, application-specific name. 
In JavaScript a namespace is just another object containing methods, properties, and objects.

The idea behind creating a namespace in JavaScript is simple: create one global object, and all variables, methods, and functions become properties of that object. Use of namespaces also reduces the chance of name conflicts in an application, since each application's objects are properties of an application-defined global object.

Let's create a global object: 

``` 
// global namespace
var SELFLEARNINGS = SELFLEARNINGS || {};
```
In the above code sample, we first checked whether **SELFLEARNINGS** is already defined (either in same file or in another file). If yes, then use the existing SELFLEARNINGS global object, otherwise create an empty object called SELFLEARNINGS which will encapsulate methods, functions, variables, and objects.

We can also create sub-namespaces:

``` 
// sub namespace
SELFLEARNINGS.event = {};

```


#### Custom objects {#Custom-objects}
###### The class {#The-class}

JavaScript contains no class statement, such as is found in C++ or Java. This is sometimes confusing for programmers who use languages with a class statement. Instead, JavaScript uses functions as classes. Defining a class is as easy as defining a function. In the example below we define a new class called SelfLearning.

``` 
var SelfLearnings = function () {};
```

###### The Object (Class Instance) {#The-Object-Class-Instance}

To create a new instance of an object **obj** we use the statement **new obj**, assigning the result (which is of type obj) to a variable to access it later.

In the example below we define a class named SelfLearning and we create two instances (selflearning1 and selflearning2).

``` 
function SelfLearning() { }
var selflearning1 = new SelfLearning();
var selflearning2 = new SelfLearning();
```
**Note:** Please see Object.create() for a new, additional, instantiation method that creates an uninitialized instance.

###### The constructor {#The-constructor}

The constructor is called at the moment of instantiation (the moment when the object instance is created). The constructor is a method of the class. In JavaScript the function serves as the constructor of the object, therefore there is no need to explicitly define a constructor method. Every action declared in the class gets executed at the time of instantiation.

The constructor is used to set the object's properties or to call methods to prepare the object for use. Adding class methods and their definitions occurs using a different syntax described later in this article.

In the example below, the constructor of the class SelfLearning logs a message when a SelfLearning is instantiated.

``` 
function SelfLearning() {
  alert('SelfLearning instantiated');
}

var selflearning1 = new SelfLearning();
var selflearning2 = new SelfLearning();
```

###### The Property (object attribute) {#The-Property-object-attribute}

Properties are variables contained in the class; every instance of the object has those properties. Properties should be set in the prototype property of the class (function) so that inheritance works correctly.

Working with properties from within the class is done by the keyword this, which refers to the current object. Accessing (reading or writing) a property outside of the class is done with the syntax: InstanceName.Property; this is the same syntax used by C++, Java, and a number of other languages. (Inside the class the syntax this.Property is used to get or set the property’s value.)

In the example below we define the gender property for the SelfLearning class and we define it at instantiation.

``` 
function SelfLearning(type) {
  this.type = type;
  alert('SelfLearning instantiated');
}

var selflearning1 = new SelfLearning('Javascript');
var selflearning2 = new SelfLearning('Java');

//display the selflearning1 type
alert('selflearning1 is a ' + selflearning1.type); // selflearning1 is a Javascript
```


###### Encapsulation {#Encapsulation}

It refers to the practice of hiding the implementation details of an object from the outside world, and only exposing a public interface for interacting with that object.

An example of encapsulation in JavaScript is creating a SelfLearning object that has a private name property and a public getName() method:

```
function SelfLearning(type) {
  let privateTypeName = type;

  this.getType = function() {
    return privateTypeName;
  };
}

const selflearning = new SelfLearning("Javascript");
console.log(selflearning.getType()); // "Javascript"
console.log(selflearning.privateTypeName); // undefined (private property)
```

In this example, the type property is defined as a private variable within the SelfLearning function, and can only be accessed through the public getType() method. Attempting to directly access the privateTypeName property will return undefined.


###### Inheritance {#Inheritance}
Inheritance allows objects to inherit properties and methods from a parent object. This can be achieved through the use of the prototype property.

For example, let's say we have a SelfLearning object and we want to create a Category object that inherits from the SelfLearning object. We can do this by setting the Category object's prototype to an instance of the SelfLearning object:

```
function SelfLearning(type, book) {
  this.type = type;
  this.book = book;
}

SelfLearning.prototype.getTypeName = function() {
  return this.type;
};

function Category(type, book, major) {
  SelfLearning.call(this, type, book);
  this.major = major;
}

Category.prototype = Object.create(SelfLearning.prototype);
Category.prototype.constructor = Category;

const category = new Category("Javascript", "JavaScript: The Good Parts", "Computer Science");
console.log(category.getName()); // "Javascript" (inherited from SelfLearning)
console.log(category.major); // "Computer Science" (unique to Category)
```

In this example, the Category object inherits the name and age properties and the getName() method from the SelfLearning object. Additionally, it has its own unique major property.

It is important to note that Object.create(SelfLearning.prototype) creates a new object that inherits directly from SelfLearning.prototype. Also Student.prototype.constructor = Student; is to set the correct constructor for the new object.

This is just a simple example of inheritance in JavaScript, and it can be used to create more complex object hierarchies.

###### Abstraction {#Abstraction}
Abstraction refers to the process of hiding the implementation details of a function or an object while providing a simplified interface to interact with it. This allows for greater flexibility and modularity in code, as well as the ability to change the implementation without affecting the rest of the codebase.

For example, consider a simple object that represents a car. It has properties such as make, model, and year, and methods such as start and stop. We can create an abstraction for this object by creating a simple interface that only exposes the methods we want to use, and hides the implementation details.

```
//Car object
function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.start = function() {
        console.log("Car started");
    }
    this.stop = function() {
        console.log("Car stopped");
    }
}

//Car interface
var car = new Car("Toyota", "Camry", 2020);
car.start(); //outputs "Car started"
car.stop(); //outputs "Car stopped"
```

In this example, the user of the car object only needs to know about the start and stop methods, and does not need to know about the make, model, and year properties. This allows for greater flexibility in the implementation of the car object, as the properties and methods can be changed without affecting the code that uses the car interface.

In addition, abstraction also allows for better code organization and easier code maintenance. By keeping the implementation details separate from the interface, developers can make changes to the implementation without having to search through the entire codebase for references to the implementation.

Overall, abstraction is an important concept in programming and can be used to make code more flexible, modular, and maintainable.

###### Polymorphism {#Polymorphism}
Polymorphism is one of the four fundamental principles of object-oriented programming (OOP), along with encapsulation, inheritance, and abstraction. It allows objects of different classes to be treated as objects of a common superclass or interface.

In JavaScript, polymorphism is achieved through the use of prototypes and prototype inheritance.

For example, let's consider two classes: "Animal" and "Cat". The "Animals" class has a method called "speak" which simply logs "Animal make noise.". The "Cat" class inherits from the "Animals" class and overrides the "speak" method to log "Meow!".

```
class Animals {
    speak() {
        console.log("Animals make noise.");
    }
}

class Cat extends Animals {
    speak() {
        console.log("Meow!");
    }
}

let cat = new Cat();
let animal = new Animals();

cat.speak(); // Output: "Meow!"
animal.speak(); // Output: "Animals make noise."
```

In the above example, the "speak" method is polymorphic, because it can be used by objects of different classes (Animals and Cat) and will produce different results depending on the class of the object.

Another way to achieve polymorphism in javascript is by using interfaces. An interface defines a contract for objects, specifying the methods and properties that they must implement.

```
interface Speakable {
    speak(): void;
}

class Dog implements Speakable {
    speak() {
        console.log("Woof!");
    }
}

class Parrot implements Speakable {
    speak() {
        console.log("Hello World!");
    }
}

let dog = new Dog();
let parrot = new Parrot();

dog.speak(); // Output: "Woof!"
parrot.speak(); // Output: "Hello World!"
```

In the above example, the classes "Dog" and "Parrot" implement the "Speakable" interface, which means that they must implement the "speak" method. This allows us to treat them as a common type and use the "speak" method polymorphically.

In conclusion, Polymorphism is a powerful concept in OOP that allows objects of different classes to be treated as objects of a common type. In javascript, it can be achieved through the use of prototypes, inheritance, and interfaces.


JavaScript has strong object-oriented programming capabilities, even though some debates have taken place due to the differences in object-oriented JavaScript compared to other languages

Introduction to object-oriented JavaScript


## Shallow copy {#Shallow-copy}

In JavaScript, a shallow copy is a copy of an object that only copies the first level of properties in an object. This means that any nested objects within the original object are still referenced to their original objects, instead of creating new objects with their own values.

Here's an example to illustrate this:

``` 
let originalObject = {
  name: 'John Doe',
  address: {
    street: '1 Main St',
    city: 'San Francisco'
  }
};

let shallowCopy = {...originalObject};
```

In this example, the `shallowCopy` object is created using the spread operator, which is a quick way to create a shallow copy of an object.

Now, if we modify a property of the `address` object in the `shallowCopy`, it will also reflect in the `originalObject`. This is because the `address` property in `shallowCopy` is just a reference to the original `address` object in `originalObject`.

```
shallowCopy.address.street = '2 Main St';

console.log(originalObject.address.street); // Output: '2 Main St'
```

So, in conclusion, a shallow copy in JavaScript only creates a new object that references the original object's properties, rather than creating new objects with their own values. If you need to make a copy of an object with its own values, you'll need to perform a deep copy.

## Deep copy {#Deep-copy}

Deep copy is a technique of copying an object in such a way that the new object created has its own unique reference. This means that any changes made to the new object will not affect the original object and vice versa.

In JavaScript, there are two ways of creating a deep copy - using JSON.parse and JSON.stringify or using the spread operator.

* JSON.parse and JSON.stringify method:

```
let originalObject = { name: 'John', address: { city: 'New York' } };

let deepCopy = JSON.parse(JSON.stringify(originalObject));

deepCopy.address.city = 'London';

console.log(originalObject); 
// { name: 'John', address: { city: 'New York' } }

console.log(deepCopy); 
// { name: 'John', address: { city: 'London' } }
```

In this example, we have created a deep copy of the originalObject using the JSON.parse and JSON.stringify method. The deepCopy object has its own unique reference, and any changes made to it will not affect the original object.

* Spread operator:

```
let originalObject = { name: 'John', address: { city: 'New York' } };

let deepCopy = { ...originalObject };

deepCopy.address.city = 'London';

console.log(originalObject); 
// { name: 'John', address: { city: 'New York' } }

console.log(deepCopy); 
// { name: 'John', address: { city: 'London' } }
```

In this example, we have created a deep copy of the originalObject using the spread operator. The deepCopy object has its own unique reference, and any changes made to it will not affect the original object.

In conclusion, creating a deep copy of an object is important in JavaScript because it helps in avoiding unintended changes to the original object. JSON.parse and JSON.stringify and the spread operator are two ways to create a deep copy in JavaScript.

## Shallow copy vs Deep copy {#Shallow-copy-vs-Deep-copy}

A shallow copy of an object creates a new object with a reference to the original object's properties, rather than copying the properties themselves. A deep copy creates a completely independent copy of the original object and its properties.

In JavaScript, a shallow copy of an object can be created using the Object.assign() method or by spreading the object with the ... operator. Here's an example:

```
const originalObject = {
  a: 1,
  b: {
    c: 2
  }
};

// Shallow copy using Object.assign()
const shallowCopy = Object.assign({}, originalObject);

// Shallow copy using spread operator
const shallowCopy2 = {...originalObject};

console.log(shallowCopy.a); // 1
console.log(shallowCopy.b === originalObject.b); // true
```

As you can see, both Object.assign() and the spread operator produce a shallow copy of the original object, meaning that any changes made to the properties of the copied object will also affect the properties of the original object.

To create a deep copy, you need to create a completely new object and copy all of the properties of the original object to the new object, including any nested objects. Here's an example:

```
const originalObject = {
  a: 1,
  b: {
    c: 2
  }
};

// Deep copy
const deepCopy = JSON.parse(JSON.stringify(originalObject));

console.log(deepCopy.a); // 1
console.log(deepCopy.b === originalObject.b); // false
```

In this example, the JSON.stringify() method is used to convert the original object to a string representation, which is then parsed back into an object using JSON.parse(). The resulting object is a deep copy of the original object, meaning that changes made to the properties of the copied object will not affect the properties of the original object.

## Performance {#Performance}
Shallow copy and deep copy refer to the process of copying an object in JavaScript. In a shallow copy, only the reference to the object is copied, meaning that any changes made to the copied object will also be reflected in the original object. In a deep copy, a new and independent copy of the object is created, which means that changes made to the copied object will not affect the original object.

The performance between shallow and deep copy varies depending on the size and complexity of the object being copied. For small and simple objects, the performance difference between shallow and deep copy is minimal, but for larger and more complex objects, deep copy can be slower and require more memory compared to shallow copy.

``` 
// Shallow copy example
let originalObject = {
name: "John",
age: 30,
hobbies: ["reading", "swimming"],
};
let shallowCopy = originalObject;
shallowCopy.age = 35;
console.log(originalObject.age); // Output: 35

// Deep copy example
let deepCopy = JSON.parse(JSON.stringify(originalObject));
deepCopy.age = 40;
console.log(originalObject.age); // Output: 35
```

## Lodash cloneDeep() for Deep Copying {#Lodash-cloneDeep-for-Deep-Copying}
The cloneDeep() function in Lodash is used to create a deep copy of an object, array, or any other data type. This means that the new copy created by cloneDeep() is completely separate from the original, and any changes made to the new copy will not affect the original.

Here's an example of how to use cloneDeep():

```
const _ = require('lodash');

let original = [1, 2, 3, 4];
let copied = _.cloneDeep(original);

original[0] = 100;
console.log(original); // [100, 2, 3, 4]
console.log(copied); // [1, 2, 3, 4]
```

As you can see, even though the original array was modified, the copied array remains unchanged. This is because the cloneDeep() function created a deep copy, not just a shallow copy.

Note that `cloneDeep()` can handle any type of data, including objects, arrays, and primitive values. It's a useful function for when you need to make sure that changes made to one object or array don't affect another.


## 5 ways to Deep Copy Objects in JavaScript {#5-ways-to-Deep-Copy-Objects-in-JavaScript}

![Ways to Deep Copy](/BL-1013/ProsCons.png)


## Conclusion {#Conclusion}
As we've seen, there are several methods for copying a variable, but none is ideal for every scenario. Therefore, it's crucial to select the most suitable approach for each particular situation.


Happy learning!!

Understand and learn the difference between deep and shallow copies in JavaScript and use it wisely.