WeakMap

Generators

Generators are functions that can be exited and later re-entered. Their context (variable
bindings) will be saved across re-entrances. A function keyword followed by an asterisk
defines a generator function, which returns a Generator object.

Generator Function Example.

function* generator(i) {
yield i;
yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value);
// expected output: 10

console.log(gen.next().value);
Further reading: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/function*

"use strict"

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.
https://www.fullstack.cafe/blog/javascript-es6-es2015-interview-questions
Examples of using Strict mode
 In normal JavaScript, mistyping a variable name creates a new global variable. In
strict mode, this will throw an error, making it impossible to accidentally create a
global variable
 Using strict mode, don’t allow to use a variable without declaring it
 // Using a variable, without declaring it, is not allowed:
 Deleting a variable (or object) and a function is not allowed
 Octal numeric literals are not allowed
 Escape characters are not allowed
 Writing to a read-only property is not allowed
 'use strict';
let obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14; //will throw an error

 Deleting an undeletable property is not allowed

'use strict';
delete Object.prototype; // will throw an error
 The string “eval” cannot be used as a variable
 The string “arguments” cannot be used as a variable
 The with statement is not allowed
In function calls like f(), the this value was the global object. In strict mode, it is now undefined

In normal JavaScript, a developer will not receive any error feedback assigning values to non-writable
properties

So What is Hoisting Then?

During compile phase, just microseconds before your code is executed,
it is scanned for function and variable declarations. All these functions
and variable declarations are added to the memory inside a JavaScript
data structure called Lexical Environment. So that they can be used
even before they are actually declared in the source code.

But why undefined?

When JavaScript engine finds a var variable declaration during the

compile phase, it will add that variable to the lexical environment and
initialize it with undefined and later during the execution when it reaches
the line where the actual assignment is done in the code, it will assign
that value to the variable.
All declarations (function, var, let, const and class) are hoisted in JavaScript, while the var declarations are
initialized with undefined, but let and const declarations remain uninitialized.

When not to use arrow function ?

https://wesbos.com/arrow-function-no-no/
1. click handlers

2. Object Methods

3. Prototype Methods

4. When you need an arguments Object??

Es6 new string methods ?

 .startsWith() – case sensitive - flightNumber.startsWith('AC', 3) ac after 3
characters

 .endsWith() - case sensitive - accountNumber.endsWith('RT', 11); adter 11

chars

 .includes() - which will just check if that string is anywhere in it

 .repeat() and String Padding

Event delegation

Bubbling also allows us to take advantage of event delegation — this concept relies on the
fact that if you want some code to run when you click on any one of a large number of child
elements, you can set the event listener on their parent and have events that happen on them
bubble up to their parent rather than having to set the event listener on every child individually.
Remember earlier that we said bubbling involves checking the element the event is fired on for
an event handler first, then moving up to the element's parent, etc.?
A good example is a series of list items — if you want each one of them to pop up a message
when clicked, you can set the click event listener on the parent <ul>, and events will bubble
from the list items to the <ul>.

Temporal dead zone

The difference between var/function/function* declarations and let/const/class declarations is
the initialisation.
The former are initialised with undefined or the (generator) function right when the binding is
created at the top of the scope. The lexically declared variables however stay uninitialised. This
means that a ReferenceError exception is thrown when you try to access it. It will only get
initialised when the let/const/class statement is evaluated, everything before (above) that is
called the temporal dead zone.

 There is another great advantage using let as it creates a new lexical environment
and also binds fresh value rather than keeping an old reference.
 In constants mutation is allowed but reassignment is not allowed.

Object Dot notation and bracket notation

When working with bracket notation, property identifiers only have to be a String. They can
include any characters, including spaces. Variables may also be used as long as the variable
resolves to a String.

We can now have spaces in our strings, and can even start strings with
numbers.Perhaps most importantly, we can now use variables to access properties in an
object. It’s important the variable you are using references a String.

Dot notation:

 Property identifies can only be alphanumeric (and _ and $)

 Property identifiers cannot start with a number.

 Property identifiers cannot contain variables.

 OK — obj.prop_1, obj.prop$

 Not OK — obj.1prop, obj.prop name

Bracket notation:

 Property identifiers have to be a String or a variable that references a String.

 It is okay to use variables, spaces, and Strings that start with numbers

 OK — obj["1prop"], obj["prop name"]

2. Is this the correct way of copying an object in JS?

Var obj2 = Object.asign({},obj1)

functions in JS are just a special type of Objects and hence,

properties can be attached to them.

What are Higher-Order Components?

A higher-order component (HOC) is a function that takes a component and returns a new
component. Basically, it's a pattern that is derived from React's compositional nature.

We call them pure components because they can accept any dynamically provided
child component but they won't modify or copy any behavior from their input
components.

const EnhancedComponent = higherOrderComponent(WrappedComponent)

HOC can be used for many use cases:

 i. Code reuse, logic and bootstrap abstraction.
ii. Render hijacking.
iii. State abstraction and manipulation.
iv. Props manipulation.