2JxWJakG

1# JS Essentials: A quick guide for the busy developer.
2
3## Table of contents:
41. **Closures**
52. **Scope**
63. **Scope vs. Context**
74. **Encapsulation**
85. **Value vs. Reference**
96. **this**
107. **new**
118. **apply, call, bind**
129. **Prototypes & Inheritance**
1310. **Modules**
1411. **Promises**
1512. **Callback**
1613. **Generators**
1714. **Async Await**
1815. **Higher Order Functions**
1916. **Thunks**
2017. **Arrow functions**
2118. **ES6 Cool Methods**
2219. **Mixins**
2320. **Advantages of ES6**
2421. **Pure Functions**
2522. **Null, Undefined, and Undeclared**
2623. **Creating Objects**
2724. **Design Patterns**
2825. **Functional Programming**
29
30## 1. **Closures**
31A closure is a function that has access to its outer function scope even after the outer function has returned. This means a closure can remember and access variables and arguments of its outer function even after the function has finished.
32
33## 2. **Scope**
34Scope in JavaScript refers to the accessibility or visibility of variables. A **lexical scope** or static scope in JavaScript refers to the accessibility of the variables, functions, and objects based on their physical location in the source code.
35  1. Global Scope
36  2. Function Scope
37  3. Block Scope
38
39## 3. **Scope vs. Context**
40**Scope** pertains to the variable access of a function when it is invoked and is unique to each invocation. **Context** is always the value of the this keyword which is a reference to the object that “owns” the currently executing code.  
41
42## 4. **Encapsulation**
43Encapsulation means information hiding. It’s about hiding as much as possible of the object’s internal parts and exposing a minimal public interface. The simplest and most elegant way to create encapsulation in JavaScript is using closures.
44
45## 5. **Value vs. Reference**
46Understand how objects, arrays, and functions are copied and passed into functions. Know that the reference is what’s being copied. Understand that primitives are copied and passed by copying the value.
47
48## 6. **this**
49The object that “this” refers changes every time execution context is changed.
50- “this” in Global Environment
51- “this” inside Functions
52- “this” inside constructors
53- “this” in Object Methods
54- “this” in Classes
55
56## 7. **new**
57The new keyword invokes a function in a special way. Functions invoked using the new keyword are called constructor functions.
58  1. Creates a new object.
59  2. Sets the object’s prototype to be the prototype of the constructor function.
60  3. Executes the constructor function with this as the newly created ob
61  4. Returns the created object. If the constructor returns an object, this object is returned.
62
63## 8. **apply, call, bind**
64- Use **.bind()** when you want that function to later be called with a certain context, useful in events.
65- Use **.call() (args with commas)** or **.apply() (args is array)** when you want to invoke the function immediately, with modification of the context.
66
67
68## 9. **Prototypes & Inheritance**
69  - **Class Inheritance**: A class is like a blueprint — a description of the object to be created. Classes inherit from classes and create subclass relationships: hierarchical class taxonomies.
70
71  - **Prototypal Inheritance**: A prototype is a working object instance. Objects inherit directly from other objects
72  > In JavaScript, prototypal inheritance is simpler & more flexible than class inheritance.
73
74**Good to hear**: **Classes**: create tight coupling or hierarchies/taxonomies. **Prototypes**: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition.
75
76## 10. **Modules**
77**In JavaScript, the word "modules" refers to small units of independent, reusable code.**
78  1. CommonJS
79  2. AMD
80  3. UMD
81
82## 11. **Promises**
83**EX: AXIOS**. A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). **A promise may be in one of 3 possible states: fulfilled, rejected, or pending**. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
84
85## 12. **Callback**
86A callback is a function that is to be executed after another function has finished executing — hence the name 'call back'.
87
88## 13. **Generators**
89Generators are special functions that generate values when you need them to. When you call a generator it will not execute like a normal function. It will execute to the point where it sees a yield statement and it will exit until you need a new value.
90
91## 14. **Async Await**
92Any JavaScript function definition can be marked with the async keyword. When a function is marked as an async function, the returned value will always be wrapped in a promise.
93
94## 15. **Higher Order Functions**
95Higher order functions are functions that operate on other functions, either by taking them as arguments or by returning them. In simple words, A Higher-Order function is a function that receives a function as an argument or returns the function as output.
96
97## 16. **Thunks**
98A thunks is a function that contains all of the context (state, functions, etc) it will need in order to carry out some sort of logic in the future.
99
100## 17. **Arrow functions**
101Shine best with anything that requires this to be bound to the context, and not the function itself. **Not Use** in:
102  1. Object methods
103  2. Callback functions with dynamic context
104  3. When it makes your code less readable
105
106## 18. **ES6 Cool Methods**
107- Block Scope
108- Lexical “this” (via Arrow Functions) is a feature that forces the variable “this” to always point to the object where it is physically located within.
109- Dealing With “arguments”
110- Classes
111
112## 19. **Mixins**
113Mixin is a way properties are added to objects without using inheritance
114
115## 20. **Advantages of ES6**
116- Spread operator
117- for…of iterator
118- includes()
119- some()
120- every()
121- filter()
122- map()
123- reduce()
124
125## 21. **Pure Functions**
126- A pure function is a function which:
127- Given the same input, will always return the same output.
128Produces no side effects.
129
130## 22. **Null, Undefined, and Undeclared**
131- **undefined** is a variable that has been declared but no value exists and is a type of itself ‘undefined’.
132- **null** is a value of a variable and is a type of object.
133- **undeclared** variables is a variable that has been declared without ‘var’, 'let, or 'const' keywords.
134
135## 23. **Creating Objects**
136  1. Function based
137  2. Object Literal
138  3. From Object using new keyword
139  4. Using Object.create
140
141## 24. **Design Patterns**
142**Creational**
143- Factory Method
144  - Simple factory simply generates an instance for client without exposing any instantiation logic to the client
145- Abstract Factory
146  - A factory of factories a factory that groups the individual but related/dependent factories together without specifying their concrete classes.  
147- Builder
148  - Allows you to create different flavors of an object while avoiding constructor pollution. Useful when there could be several flavors of an object. Or when there are a lot of steps involved in creation of an object.
149- Singleton
150  - Ensures that only one object of a particular class is ever created.
151
152**Structural**
153- Adapter
154  - Adapter pattern lets you wrap an otherwise incompatible object in an adapter to make it compatible with another class.
155- Bridge
156  - Bridge pattern is about preferring composition over inheritance. Implementation details are pushed from a hierarchy to another object with a separate hierarchy.
157- Composite
158  - Composite pattern lets clients to treat the individual objects in a uniform manner.
159- Decorator
160  - Decorator pattern lets you dynamically change the behavior of an object at run time by wrapping them in an object of a decorator class.
161- Facade
162  - Facade pattern provides a simplified interface to a complex subsystem.
163- Flyweight
164  - It is used to minimize memory usage or computational expenses by sharing as much as possible with similar objects.
165- Proxy
166  - Using the proxy pattern, a class represents the functionality of another class.
167
168**Behavioral**
169- Chain of Responsibility
170  - It helps building a chain of objects. Request enters from one end and keeps going from object to object till it finds the suitable handler.
171
172- Command
173  - Allows you to encapsulate actions in objects. The key idea behind this pattern is to provide the means to decouple client from receiver.
174
175- Iterator
176  - It presents a way to access the elements of an object without exposing the underlying presentation.
177
178- Mediator
179  - Mediator pattern adds a third party object (called mediator) to control the interaction between two objects (called colleagues). It helps reduce the coupling between the classes communicating with each other. Because now they don't need to have the knowledge of each other's implementation.
180- Memento
181  - Memento pattern is about capturing and storing the current state of an object in a manner that it can be restored later on in a smooth manner.
182- Observer
183  - Defines a dependency between objects so that whenever an object changes its state, all its dependents are notified.
184- Visitor
185  - Visitor pattern let's you add further operations to objects without having to modify them.
186- Strategy
187  - Strategy pattern allows you to switch the algorithm or strategy based upon the situation.
188- State
189  - It lets you change the behavior of a class when the state changes.
190- Template Method
191  - Template method defines the skeleton of how certain algorithm could be performed but defers the implementation of those steps to the children classes.
192
193## 25. **Functional Programming**
194**Functional programming** (often abbreviated FP) is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. Functional programming is declarative rather than imperative, and application state flows through pure functions. Contrast with object oriented programming, where application state is usually shared and colocated with methods in objects.