Enzyme, Redux, and Flux.

offline storage

automated testing suites, like Jest or Mocha

es6-for-beginners
Lesson 1

1. Let and Const

2. Arrow functions

 Function expressions are best for object methods. Arrow functions are best for

callbacks or methods like map, reduce, or forEach.

3. Default parameters
4. for of loop - for..of iterates through list of elements (i.e) like Array and
returns the elements (not their index) one by one.
5. Spread attributes - it converts a list of elements to an array and vice
versa.=> …arr
6. Maps - It’s similar to an array but we can define our own index. And
indexes are unique in maps.
7. Sets - Sets are used to store the unique values of any type
8. Static methods
9. Getters and Setters

Lesson 2

1. Promisses
2. Async Await

Lesson 3

1. Array map -  is used to do a specific operation on all elements of an array and it returns
an array with modified elements.
2. Array filter - is used to filter the whole array based on some condition. Array filter takes
each element of an array and checks with the given condition. If the element passes the
condition it keeps the element in the array else it removes the element.
 3. Array reduce -  is used to aggregate all the elements of an array and return a single
value.
4. Template literals
5. Imports and exports
6. Destructuring objects and arrays – const { firstName } = person => name is the same
as object keys
7. Extend and super

1. We used extends to create a sub-class from the parent class.

2. We used super to call the constructor of the parent class.
3. We used super to call the method defined in the parent class.

1.Hoisting
 Hoisting is JavaScript's default behavior of moving declarations to the top

 In JavaScript, a variable can be declared after it has been used.

 In other words; a variable can be used before it has been declared

 Hoisting is JavaScript's default behavior of moving all declarations to the top of the
current scope (to the top of the current script or the current function).

 Variables and constants declared with let or const are not hoisted!

 JavaScript only hoists declarations, not initializations.

o var x = 5; // Initialize x

o var y;     // Declare y

 To avoid bugs, always declare all variables at the beginning of every scope.

 Since this is how JavaScript interprets the code, it is always a good rule.

 JavaScript in strict mode does not allow variables to be used if they are not declared.
2."use strict"
 The purpose of "use strict" is to indicate that the code should be executed in "strict
mode".
 With strict mode, you can not, for example, use undeclared variables.

3.Scope in JavaScript
 refers to the current context of code, which determines the accessibility of variables
to JavaScript. The two types of scope are local and global: Global variables are those
declared outside of a block. Local variables are those declared inside of a block

4.Robust App
 A robust product can be one that doesn't break easily. Thus, an operating system in
which any individual application can fail without disturbing the operating system or
other applications can be said to be robust

5.What does Program to interfaces not implementations mean?

 It means that you should try to write your code so it uses an abstraction (abstract class
or interface) instead of the implementation directly

6.What is a stateful function?

 A stateful function is a small piece of logic/code existing in multiple instances that
represent entities — similar to actors. Functions are invoked through messages and
are: Stateful. Functions have embedded, fault-tolerant state, accessed locally like a
variable

7.Closures
 MDN -  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.

 Variables created without a declaration keyword (var, let, or const) are always global,

even if they are created inside a function.
 A closure is a function having access to the parent scope, even after the parent function
has closed.
 self-invoking function
 var add = (function () {
  var counter = 0;
  return function () {
counter += 1; 
return counter
}
})();

Source https://www.w3schools.com/js/js_function_closures.asp

 Closures are frequently used in JavaScript for object data privacy, in event handlers and

callback functions, and in partial applications, currying, and other functional

programming patterns.

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

 To use a closure, define a function inside another function and expose it. To expose a

function, return it or pass it to another function.

 The inner function will have access to the variables in the outer function scope, even

after the outer function has returned.

 Among other things, closures are commonly used to give objects data privacy. Data
privacy is an essential property that helps us program to an interface, not an

implementation. This is an important concept that helps us build more robust software.

In JavaScript, closures are the primary mechanism used to enable data privacy.

 Objects are not the only way to produce data privacy. Closures can also be used to

create stateful functions whose return values may be influenced by their internal state

Source https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-

closure-b2f0d2152b36
8.This keyword

 His references the object that is executing the current function

 The JavaScript this keyword refers to the object it belongs to

o In a method, this refers to the owner object.

o Alone, this refers to the global object.

o In a function, this refers to the global object.

o In a function, in strict mode, this is undefined.

o In an event, this refers to the element that received the event.

o Methods like call(), and apply() can refer this to any object

18. Call, Apply and bind

 The major cause of confusion between the call() and apply() methods is how to pass in

the additional arguments besides this.

Apply()
apply(this [, [arg1, arg2,...]]): Calls a function with a provided this value. Further
arguments are provided as a single array.
Way to remember: “Apply accepts arguments as an Array” or “AA”
Call()
call(this [, arg1, arg2...]): Calls a function with a provided this. Further arguments are
provided as a comma separated list
Ways to remember: “Call’s arguments are separated by commas” or “CC”.
Bind()
bind(this): Returns a new function whose this value is bound to the provided value.
Ways to remember: bind() is the only method out of the three that returns a new
function altogether. It does not call the function.

19.Class & Prototypal Inheritance

 Dfgdfgdfg

20. Imutability
  An immutable object is an object whose state cannot be modified after it is created.
 immutable - numbers and strings.
 mutable - objects, arrays, functions, classes, sets, and maps

21. Event handlers

 Event handlers are basically a callback functions which gets called once
the event happens or gets explicitly triggered. So basically you register an event for a
particular action e.g click and ask JavaScript runtime to execute some set of action
once action takes place

22. What are callbacks in JavaScript?

 A callback is a function that is to be executed after another function has finished
executing — hence the name 'call back'. More complexly put: In JavaScript, functions
are objects. ... Any function that is passed as an argument is called a callback function
 Important: Always return results, otherwise callbacks won't catch the result of a
previous promise (with arrow functions () => x is short for () => { return x; }).

23. Promisses

 MDN - The Promise object represents the eventual completion (or failure) of an

asynchronous operation, and its resulting value.

 One of the great things about using promises is chaining, because a common need is to
execute two or more asynchronous operations back to back

 It allows you to associate handlers with an asynchronous action's eventual success value
or failure reason. This lets asynchronous methods return values like synchronous
methods: instead of immediately returning the final value, the asynchronous method
returns a promise to supply the value at some point in the future.

 making a promise is a commitment that you will keep your word. It is a

commitment that reinforces trust

 A Promise is a value returned by an asynchronous function to indicate the completion of

the processing carried out by the asynchronous function

 A promise is an object which can be returned synchronously from an asynchronous

function

 Once settled, a promise can not be resettled. It has value (which may be undefined)
which must not change.
  The immutability of a settled promise is an important feature.

 Every promise must supply a .then() method

 .then() must return a new promise, promise2.

 Promises allow you to mimic normal synchronous code’s try/catch behavior.

 Note that `null` is a valid promise value

//////////////////////////////////

Source: es6-for-beginners

 Before promises, programmers used to define callbacks. Callbacks are normal functions in
Javascript which executes when the async operation is complete.

 Technically, they are objects that represents the completion of the async operation.

 Three states: Pending, Fulfilled, Rejected

 Promise is defined by creating a constructor using new keyword. Then the constructor will
have a function ( we call it executor function.)

- the executor function have two parameters resolve and reject.

 We use handlers to get the output from the promise.

 Handlers are just functions which executes when some event occurs such as clicking a
button, moving the cursor, etc.

 // calling the promise with some handlers.

 apiCall.then(function(x) {console.log(x); })

 there is another handler catch.

 Async keyword makes any function to return only promises.

24.Function expression
  A function expression is very similar to and has almost the same syntax as
a function declaration (see function statement for details). The main difference
between a function expression and a function declaration is the function name, which
can be omitted in function expressions to create anonymous functions.

25.Higher order function (HOC)

 is a function that can take another function as an argument, or that returns

a function as a result

 a higher-order component is a function that takes a component and returns a new

component.

26. Object literal 

 is a comma-separated list of name-value pairs wrapped in curly braces. This

minimizes the use of global variables which can cause problems when combining
code.

27.Function expression 

 is very similar to and has almost the same syntax as a function declaration

(see function statement for details). The main difference between a function
expression and a function declaration is the function name, which can be omitted
in function expressions to create anonymous functions

28.Functional programming

 is the process of building software by composing pure functions, avoiding shared

state, mutable data, and side-effect

29. Pure function 

 The function always returns the same result if the same arguments are passed in. It
does not depend on any state, or data, change during a program's execution. It must
only depend on its input arguments

30. Inheritance vs Polymorphism

 Inheritance is creating a class that derives its feature from an already existing class. On
the other hand, polymorphism is an interface that can be defined in multiple forms.
 Inheritance is implemented on the classes whereas, the polymorphism is implemented
on methods/functions. Polymorphism is the ability of an object to take on many forms

31. Prototype

 is an object that is associated with every functions and objects by default in JavaScript

 All JavaScript objects inherit properties and methods from a prototype.

 allow you to easily define methods to all instances of a particular object.

 the method is applied to the prototype, so it is only stored in the memory once, but
every instance of the object has access to it]

 the JavaScript prototype property allows you to add new properties to object
constructors

32. HTML Accessibility

 Provide the user a good way to navigate and interact with your site

 is easy to understand for visitors and screen readers.

33.Semantic HTML
 means using correct HTML elements for their correct purpose as much as
possible. if you need a button, use the <button> element (and not a <div>).
34. CSS Specificity
 Think of specificity as a score/rank that determines which style declarations are
ultimately applied to an element.
35. CSS box-sizing Property
 The box-sizing property defines how the width and height of an element are
calculated: should they include padding and borders, or not.
36. ForEach vs Map
 So, forEach doesn’t actually return anything. It just calls the function for each
array element and then it’s done. So whatever you return within that called
function is simply discarded.
 On the other hand, map will similarly call the function for each array element but
instead of discarding its return value, it will capture it and build a new array of
those return values.
  This also means that you could use map wherever you are using forEach but
you still shouldn’t do that so you don’t collect the return values without any
purpose. It’s just more efficient to not collect them if you don’t need them.

37. CSS Flexbox
 Flexbox is a layout model that allows elements to align and distribute space within a
container. Using flexible widths and heights, elements can be aligned to fill a space or
distribute space between elements, which makes it a great tool to use for responsive
design systems

38 Boilerplate
 is a template that you can clone and reuse for every project.

React

1.Static methods in react class 

 The static keyword allows react to get the values of propTypes and defaultProps ,

without initializing your component.

2.Pure components

 Components can be termed as pure if they return same output for same input values at
any point of time.

3.Stateless function

 STATELESS COMPONENT declared as a function that has no state and returns the same

markup given the same props. A quote from the React documentation:
These components must not retain internal state, do not have backing instances, and do
not have the component lifecycle methods
4.Pure component

 Pure functions are those that do not have any side-effects and will always return the

same output when the same inputs are passed.

 render() is a pure function

10.Lifecycle (hooks also)

 ……………………..

11.State and props

 ………………………………….

12.Hooks

 ………………………………..

13.Redux

 ……………………………

14.Redux Thunks

 is a middleware that lets you call action creators that return a function instead of an

action object

15.Context api
 is a way to essentially create global variables that can be passed around in a React app
 Context is a simpler, lighter solution to using Redux for state management

16.Server side vs client side rendering

Below is a quick breakdown of the pros and cons for each approach:

Server-side pros:
1. Search engines can crawl the site for better SEO.

2. The initial page load is faster.

 3. Great for static sites.
Server-side cons:
1. Frequent server requests.

2. An overall slow page rendering.

3. Full page reloads.

4. Non-rich site interactions.

Client-side pros:
1. Rich site interactions

2. Fast website rendering after the initial load.

3. Great for web applications.

4. Robust selection of JavaScript libraries.

Client-side cons:
1. Low SEO if not implemented correctly.

2. Initial load might require more time.

3. In most cases, requires an external library.

17.1 DataBinding
 means connecting the data to the view or UI, it means the data we defined inside our
component is attached to the HTML template.

17.2 One way vs two way data binding

 One-way data-binding means the data flows in a single direction so that whenever the
data changes in a component, it also updates the view with new data
 Two-way data binding means data flows in both directions, it means any change
happens in the view updates the data and any change happens in the data updates the
view

18.Typescript

19.Destructing
While object literals are the usual case for destructuring, remember that you can also
destructure Arrays and Sets.
const dict = { prop1: "one", prop2: "two" };

const { prop1, prop2 } = dict;

The syntax for Array and Set destructuring is a bit different:
const arr = ["uno", "dos"];

const [one, two] = arr;

// one = "uno"
// two = "dos"

// Or more explicitly
const [width, height] = [200, 400];

You can also clone an array with destructuring:

const arr = ["one", "two"];
const clone = [...arr];

You can also use commas to your advantage if you don't care about a given index of an array:
const arr = [1, 2, 3, 4];

const [,,,four] = arr; // four === 4

20. Spread operator