Memoization is a programming technique which attempts to increase a function’s performance by caching its previously computed results. Each time a memoized function is called, its parameters are used to index the cache. If the data is present, then it can be returned, without executing the entire function. Otherwise the function is executed and then the result is added to the cache. Let's take an example of adding function with memoization,
```js
const memoizAddition = () => {
  let cache = {};
 return (value) => {
  if (value in cache) {
   console.log('Fetching from cache');
   return cache[value]; // Here, cache.value cannot be used as property name starts with the number which is not a valid JavaScript  identifier. Hence, can only be accessed using the square bracket notation.
  }
  else {
   console.log('Calculating result');
   let result = value + 20;
   cache[value] = result;
   return result;
  }
 }
}
// returned function from memoizAddition
const addition = memoizAddition();
console.log(addition(20)); //output: 40 calculated
console.log(addition(20)); //output: 40 cached
```

What is memoization

It is a function that has no name. These functions are declared dynamically at runtime using the function operator instead of the function declaration. The function operator is more flexible than a function declaration. It can be easily used in the place of an expression. For example:

```
var display=function()  
{  
  alert("Anonymous Function is invoked");  
}  
display();  
```


Define anonymous function


Arrow functions were introduced in ES6, provides a concise way to write functions in JavaScript.

```
let multiply = (x, y) => x * y;
console.log(multiply(3, 2)); // 6;
```

The typeof operator returns function indicating the type of arrow function.

```
console.log(typeof add); // function
```

The arrow function is also an instance of the Function type as shown in the following example:

console.log(add instanceof Function); // true

In the arrow function, the this, arguments, super, new.target are lexical. It means that the arrow function uses these variables (or constructs) from the enclosing lexical scope. An arrow function cannot be used as a function constructor. If you use the new keyword to create a new object from an arrow function, you will get an error. The value of this inside arrow functions is not dependent on how they are invoked or how they are defined.It depends only on its enclosing context.


What are arrow functions?

The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.

* Content - The content of the box, where text and images appear
* Padding - Clears an area around the content. The padding is transparent
* Border - A border that goes around the padding and content
* Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements. 

What is Box model in CSS?


Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

Why can’t browsers read JSX?

Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.

Code splitting is a feature supported by bundlers like Webpack and Browserify.

What is code splitting

**Objects** are similar to **Maps** in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Due to this reason, Objects have been used as Maps historically. But there are important differences that make using a Map preferable in certain cases.

- The keys of an Object are Strings and Symbols, whereas they can be any value for a Map, including functions, objects, and any primitive.
- The keys in Map are ordered while keys added to Object are not. Thus, when iterating over it, a Map object returns keys in order of insertion.
- You can get the size of a Map easily with the size property, while the number of properties in an Object must be determined manually.
- A Map is an iterable and can thus be directly iterated, whereas iterating over an Object requires obtaining its keys in some fashion and iterating over them.
- An Object has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by using map = Object.create(null), but this is seldom done.
- A Map may perform better in scenarios involving frequent addition and removal of key pairs.


How do you compare Object and Map 


Context provides a way to pass data through the component tree without having to pass props down manually at every level.

For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components.

```js
const {Provider, Consumer} = React.createContext(defaultValue)
```

What is Context?

The BEM methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues. BEM stands for Block Element Modifier which is an explanation for its structure. A Block is a standalone component that is reusable across projects and acts as a "namespace" for sub components (Elements). Modifiers are used as flags when a Block or Element is in a certain state or is different in structure or style.

```css
/* block component */
.block {
}

/* element */
.block__element {
}

/* modifier */
.block__element--modifier {
}
```
Here is an example with the class names on markup:

```css
<nav class="navbar">
  <a href="/" class="navbar__link navbar__link--active"></a>
  <a href="/" class="navbar__link"></a>
  <a href="/" class="navbar__link"></a>
</nav>
```
In this case, ```navbar``` is the Block, ```navbar__link``` is an Element that makes no sense outside of the navbar component, and ```navbar__link--active``` is a Modifier that indicates a different state for the ```navbar__link``` Element.

Since Modifiers are verbose, many opt to use ```is-*``` flags instead as modifiers.

```
<a href="/" class="navbar__link is-active"></a>
```
These must be chained to the Element and never alone however, or there will be scope issues.
```
.navbar__link.is-active {
}
```

What is CSS BEM?

The JS is getting evolved everyday, now it supports the use of css inside the js templates. Libraries which supports CSS in JS are emotion, styled-components, etc ..
For example : 
```
import styled from 'react-emotion'
const Wrapper = styled("div")`
background: red;
`

render(){
    return <Wrapper>Hello</Wrapper>
}

```
In the above example the styled div is created which can be used inside a react component as a normal component.

What is CSS in JS

Allows to attach a list of suggestions to a text input element. As soon as the user begins to type in the text field, the list of suggestions appears and the user can choose from the suggestions with the mouse.
```html
<p>Enter your favorite browser name:</p>
<input type="text" list="browsers" name="favorite_browser">
<datalist id="browsers">
    <option value="Firefox">
    <option value="Chrome">    
    <option value="Internet Explorer">
    <option value="Opera">
    <option value="Safari">
</datalist>
```

What is Data List Tag?

Debounce is a technique in which, no matter how many times the user fires the event, the attached function will be excuted at the end of the time interval only once.

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

What is the difference between Debounce and throttle

Both `em` and `rem` units are based on the `font-size` CSS property. The only difference is where they inherit their values from.

* `em` units inherit their value from the `font-size` of the parent element
* `rem` units inherit their value from the `font-size` of the root element (`html`)

In most browsers, the `font-size` of the root element is set to `16px` by default.




What is the difference between `em` and `rem` units?

The **Focus** pseudo-class is applied to an element. When that element is in focus the styling appears. Its commoly used for buttons, input box etc.

The **Focus-within** pseudo-class is assigned to a parent element. The styling rules are applied when any child element receives focus. Selecting an input, clicking a link, etc. This pseudo-class is most commonly usefull in creating nested drop-downs etc.

What is the difference between **Focus** and **Focus-within**?


Both increment the variable value by 1. The difference is what they evaluate to.

The postfix increment operator evaluates to the value before it was incremented.
```
let i = 0
i++ // evaluates to 0
```

The prefix increment operator evaluates to the value after it was incremented.

```
let i = 0
++i // evaluates to 1
```

What is the difference between the postfix `i++` and prefix `++i` increment operators?

A pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example ```:hover```. A pseudo-element however allows us to create items that do not normally exist in the document tree, for example ```::after```.

Pseudo-classes examples:
- :link
- :visited
- :hover
- :active
- :focus

Pseudo-classes examples:
- ::before
- ::after
- ::first-letter
- ::first-line
- ::selection

What is the difference between ```Pseudo-classes``` and ```pseudo-elements```?

Triple equals (===) checks for strict equality, which means both the type and value must be the same. 

Double equals (==) on the other hand first performs type coercion so that both operands are of the same type and then applies strict comparison.

In short, the '==' operator will compare for equality after doing any necessary type conversions but the '===' operator will not do any type conversion.

For example:

```javascript
let str2="2";
let int2=2;

console.log(" 2 === '2' is ", str2 === int2);
// output: " 2 === '2' is " false

console.log(" 2 == '2' is ", str2 == int2);
//output: " 2 == '2' is " true
```

Which one to choose? 
If you don’t need the type conversion, always use the strict equality operator. The reason is because the abstract equality operator might produce some unexpected results. Most linters will also suggest you to change if you use '=='. To elaborate, '==' can be quite confusing and has odd rules. For example, "1" == true or "" == 0 will return true. For more peculiarities, take a look at the [Javascript Equality Table](https://dorey.github.io/JavaScript-Equality-Table/).


Resources: 
[codeahoy.com](https://codeahoy.com/javascript/2019/10/12/==-vs-===-in-javascript/)
[stackoverflow](https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons)

What is the difference between the equality operators `==` and `===`?


Drag and Drop interfaces allow applications to use drag and drop features in browsers. This means the user can select elements with their mouse, drag the elements to a droppable element, and drop the element by releasing the mouse button.

Before dragging and dropping, an elements attribute must be set so it's allowed to be dragged, and the `ondragstart` global event handler must be added.

```html
<div draggable="true" ondragstart="dragstartHandler(event);"></div>
```

```js
function dragstartHandler(ev) {
  console.log('Start dragging...');
}
```


How to add drag and drop functionality to the hmtl element?


Answer is `undefined`

length property of the array object has a special behavior:

Reducing the value of the length property has the side-effect of deleting own array elements whose array index is between the old and new length values.

As result when JavaScript executes clothes.length = 0, all clothes items are deleted.

clothes[0] is undefined, because clothes array has been emptied.

What is the value of `clothes[0]` ``` const clothes = ['jacket', 't-shirt'];  clothes.length = 0; clothes[0]; // => ??? ``` 

You can ```ternary operator``` for this.
The syntax of ternary operator is
```js
condition ? <statement if true> : <statement if false>
```
In this case 
The first number is 20 and the second number is 60
Here the code is like this..
```js
function findthelargest(num1,num2){
    return(num1>num2 ? num1 : num2)
}
console.log(findthelargest(20,60))
```

How to find largest among 2 numbers without using ```if``` ?


The ```dangerouslySetInnerHTML``` attribute is React's replacement for using ```innerHTML``` in the browser DOM. Just like ```innerHTML```, it is risky to use this attribute considering cross-site scripting (XSS) attacks. You just need to pass a ```__html``` object as key and HTML text as value.

In this example MyComponent uses ```dangerouslySetInnerHTML``` attribute for setting HTML markup:
```js
function createMarkup() {
  return { __html: 'First &middot; Second' }
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />
}
```

How to use innerHTML in React?


JavaScript Hoisting refers to the process whereby the interpreter allocates memory for variable and function declarations prior to execution of the code. Declarations that are made using var are initialized with a default value of undefined. Declarations made using let and const are not initialized as part of hoisting.

Conceptually hoisting is often presented as the interpreter "splitting variable declaration and initialization, and moving (just) the declarations to the top of the code". This allows variables to appear in code before they are defined. Note however, that any variable initialization in the original code will not happen until the line of code is executed.

## Examples:

```javascript
function catName(name) {
  console.log("My cat's name is " + name)
}

catName("Tiger")

/*
The result of the code above is: "My cat's name is Tiger"
*/
```

The above code snippet is how you would expect to write the code for it to work. Now, let's see what happens when we call the function before we write it:

```javascript
catName("Chloe")

function catName(name) {
  console.log("My cat's name is " + name)
}
/*
The result of the code above is: "My cat's name is Chloe"
*/
```

Even though we call the function in our code first, before the function is written, the code still works, because this is how context execution works in JavaScript.

Hoisting works well with other data types and variables. The variables can be initialized and used before they are declared.

Source: [MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)


What is hoisting in JavaScript


NaN is a property of the global object. In other words, it is a variable in global scope.

The initial value of NaN is Not-A-Number — the same as the value of Number.NaN. In modern browsers, NaN is a non-configurable, non-writable property. Even when this is not the case, avoid overriding it. It is rather rare to use NaN in a program.

There are five different types of operations that return NaN:

- Number cannot be parsed (e.g. parseInt("blabla") or Number(undefined))
- Math operation where the result is not a real number (e.g. Math.sqrt(-1))
- Operand of an argument is NaN (e.g. 7 \*\* NaN)
- Indeterminate form (e.g. 0 \* Infinity, or undefined + undefined)
- Any operation that involves a string and is not an addition operation (e.g. "foo" / 3)

## Example:

```javascript
function sanitise(x) {
  if (isNaN(x)) {
    return NaN
  }
  return x
}

console.log(sanitise("1"))
// expected output: "1"

console.log(sanitise("NotANumber"))
// expected output: NaN
```

Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN)


What is NaN in JavaScript


JavaScript's strict mode, introduced in ECMAScript 5, is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of "sloppy mode". Strict mode isn't just a subset: it intentionally has different semantics from normal code. Browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't rely on strict mode without feature-testing for support for the relevant aspects of strict mode. Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally.

Strict mode makes several changes to normal JavaScript semantics:

1. Eliminates some JavaScript silent errors by changing them to throw errors.
2. Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.
3. Prohibits some syntax likely to be defined in future versions of ECMAScript.

Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)


What is Strict mode in JavaScript?

JSON is a text-based data format following JavaScript object syntax, which was popularized by ```Douglas Crockford```. It is useful when you want to transmit data across a network and it is basically just a text file with an extension of .json, and a MIME type of application/json

**Parsing**: Converting a string to a native object
```js
JSON.parse(text)
```

**Stringification**: converting a native object to a string so it can be transmitted across the network
```js
JSON.stringify(object)
```

What is JSON and its common operations 

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is ```null``` or ```undefined```, and otherwise returns its left-hand side operand.

```js
let user;
alert(user ?? "Anonymous"); // Anonymous (user not defined)
```

```js
let user = "John";
alert(user ?? "Anonymous"); // John (user defined)
```

What is Nullish coalescing operator ?


Proxies enable custom behaviors for fundamental operations (e.g., property lookup, assignment, enumeration, function invocation...).

For instance:

```
// make NaN the default value for getters
const handler = {
  get: (target, name) => name in target ? target[name] : NaN
};

const obj = new Proxy({}, handler);
obj.a = 1;
obj.b = 2;

console.log(obj.a) // 1
console.log(obj.b) // 2
console.log(obj.c) // NaN

```

`obj.c` evaluates to `NaN` (instead of the usual `undefined`) because of the special behavior defined in the Proxy's handler.


What is proxy in javascript

If you try to redeclare variables in a ```switch block``` then it will cause errors because there is only one block. For example, the below code block throws a syntax error as below,
```js
let counter = 1;
switch(x) {
  case 0:
    let name;
    break;

  case 1:
    let name; // SyntaxError for redeclaration.
    break;
}
```
To avoid this error, you can create a nested block inside a case clause and create a new block scoped lexical environment.
```js
let counter = 1;
    switch(x) {
      case 0: {
        let name;
        break;
      }
      case 1: {
        let name; // No SyntaxError for redeclaration.
        break;
      }
    }
```

How do you redeclare variables in switch block without an error 


A self closing tag is a type of tag in HTML that need not to be closed by a closing tag, which means there is no saperate closing tag for it. 

```
// Examples 
<br />
<img />
<link />
<input />
```

Self closing tags cannot have content or child nodes.

What are Semantic elements in HTML?


The state is a built-in React object that is used to contain data or information about the component. 

A component’s state can change over it's lifetime. Whenever the state changes, the component re-renders.

The change in state can happen as a response to user action or system-generated events.

What is State in ReactJS?


Synchronous means each operation must wait for the previous one to complete.

Asynchronous means an operation can occur while another operation is still being processed.

In JavaScript, all code is synchronous due to the single-threaded nature of it. However, asynchronous operations not part of the program (such as ```XMLHttpRequest``` or ```setTimeout```) are processed outside of the main thread because they are controlled by native code (browser APIs), but callbacks part of the program will still be executed synchronously.

What is the difference between synchronous and asynchronous code in JavaScript?


The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?) , then an expression to execute if the condition is truthy followed by a colon (:) , and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.

```js
let isLoggedIn = true;

console.log(isLoggedIn ? "Welcome User" : "Please Login"); // Output - Welcome User

// Equivalent to :

if (isLoggedIn) {
  console.log("Welcome User");
} else {
  console.log("Please Login");
}

// Output - Welcome User
```


Ternary Operator

1. **External Style Sheet:** An external file linked to your HTML document: Using link tag, we can link the style sheet to the HTML page.

```
<link rel="stylesheet" type="text/css" href="style.css" />

```
2. **Embed CSS with a style tag:** A set of CSS styles entered directly on your HTML page.

```
<style type="text/css">

/*CSS code goes here*/

</style>
```

3. **Inline CSS:** Style can be added directly to the HTML element using a style tag.

```
<h2 style="color:red;">Danger</h2>

```
4. **@import rule:** The `@import` rule allows you to import a style sheet into another style sheet. The `@import` rule must be at the top of the document.

```
@import "path/to/style.css";

```

What are the different ways to include CSS in webpages?


A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

```js
const outerFun = (a) => {
    let b = 10;
    // inner func can use variable/parameter of outer funcion
    const innerFun = () => {
        let sum = a + b;
        console.log(sum);
    };
    return innerFun;
};
let inner = outerFun(5);
inner();
```


What are closures


JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML).

JSX enables the expressiveness of JavaScript along with HTML like template syntax.


What is JSX?

Callback Hell is an anti-pattern with multiple nested callbacks which makes code hard to read and debug when dealing with asynchronous logic. The callback hell looks like below,
```js
async1(function(){
    async2(function(){
        async3(function(){
            async4(function(){
                ....
            });
        });
    });
});
```

What is a callback hell

A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language. It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and inheritance to name a few, supercharging your vanilla CSS.

SASS (Syntactically Awesome Style Sheets) is the most commonly used css pre processor.

What is CSS Preprocessor ?


A DOCTYPE is always associated to a ```DTD``` ( Document Type Definition ). A DTD defines how documents of a certain type should be structured (i.e. a ```button``` can contain a ```span``` but not a ```div```), whereas a DOCTYPE declares what DTD a document supposedly respects (i.e. this document respects the HTML DTD). For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects.

Once a user agent has recognized a correct DOCTYPE, it will trigger the ```no-quirks mode``` matching this DOCTYPE forreading the document. If a user agent doesn't recognize a correct DOCTYPE, it will trigger the ```quirks mode```.



What does a ```<DOCTYPE html>``` do?

ES6 is the sixth edition of the javascript language and it was released in June 2015. It was initially known as ECMAScript 6 (ES6) and later renamed to ECMAScript 2015. Almost all the modern browsers support ES6 but for the old browsers there are many transpilers, like Babel.js etc.

What is ES6

The optional chaining ?. stops the evaluation if the value before ?. is undefined or null and returns undefined.
```js
let user = {
  name: "John Doe",
  isLoggedIn: true,
  email: "john@example.com",
  address: {
    city: "San Francisco",
  },
};

user?.address?.city;
//Output : San Francisco

user?.address?.country;
//Output : Undefined

user.address.country;
//Output : Uncaught TypeError : Cannot read property 'country' of undefined
```


What is Optional Chaining?


The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called **reconciliation**.
In simple words, virtual DOM is just a copy of the original DOM kept in the memory and synced with the real DOM by libraries such as ReactDOM. This process is called Reconciliation.

Virtual DOM has the same properties that of the Real DOM, but it lacks the power to directly change the content of the screen.

Think of Virtual DOM as the blueprint of a machine, changes made to the blueprint doesn't reflects on the machine itself.