-
Notifications
You must be signed in to change notification settings - Fork 1
/
JS.txt
153 lines (105 loc) · 7.23 KB
/
JS.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
Hoisting
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution regardless of whether their scope is global or local.
Every time you write a program in javascript, it runs in an environment and that environment is called **execution context**. There are two types of execution contexts:
1. Global Execution Context
2. Execution Context created every time after a function is created.
Every time a function is called the new execution context is pushed to the top of the global execution context, which makes an execution stack.
An undeclared variable is assigned the value undefined at execution and is also type undefined.
A ReferenceError is thrown when trying to access a previously undeclared variable.
Function declarations are hoisted and Function expressions are not .. gives typeError
JavaScript Functions
2 types of JS functions
1. Function declaration and 2. Function Expression
* The Function Declaration is created when JavaScript is preparing to start the script and is visible everywhere in it.
`function foo(){
}`
* Function Expressions are created when the execution reaches them.
`let foo = function(){
}`
Difference
* Syntax
* 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.
* FE can be used as an IIFE.
*can't use function expression before creating them (because they are not hoisted).
Closures
A closure is an inner function which gives you access to an outer function’s scope from inside. In JavaScript, closures are created every time a function is created, at function creation time.
A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created.
what happens internally is:
outer function execution goes into the execution stack first, then the variables goes into symbols table. Variable remains there till the execution of the function is completed. Then comes the inner function, it goes in execution stack and can access variable from symbols table. Once the execution of outer function is completed you can't access the variable outside.
Also, you can't access the variables declared inside the inner function.
`function runExecution() {
var a = 10;
function add(b){
var b = 20;
return a + b;
}
add();
}`
Spread and Rest operator
The spread operator takes an array (or any iterable) and spreads its values.
The spread operator takes the array of parameters and spreads them across the arguments in the function call. But what if we need our function to be able to work with an unknown number of parameters? That’s where the rest parameter comes in.
The rest parameter gives us an easier and cleaner way of working with an indefinite number of parameters
**Arguments** is like rest operator, it was used in old javascript but the difference between these both is, arguments creates an array like structure but not array, so we can't use methods of array, for example array.map(..)
* Spread syntax internally uses iterator, as for...of
* Rest parameters are used to create functions that accept any number of arguments.
* The spread syntax is used to pass an array to functions that normally require a list of many arguments.
Example of spread operator->
* Make copies of array or object.
* Merge arrays
Differences between var and let
1. Scope: var variables are function scoped and let variables are block scoped.
2. Hoisting: var variables are hoisted, let will throw referenceError.
3. Global object: var variables are created as a global object i,e, are attached to window object, but let variables are not. (which means var are wasting memory attaching every variable to the global object.)
4. Redeclaration:
`var foo = 20;
var foo;`
its ok but will throw an error in strict mode
but `let bar = 20;
let 20;`
is not ok.
Difference between normal function and arrow function
1. syntax
2. no arguments binding in arrow functions
3. use of this keyword -> arrow functions do not have their own this.
4. using new keyword: regular functions are callable and constructible. but arrow functions are only callable and not constructible.
5. no duplicate name parameters
HOF: Higher order functions
A higher-order function is a function that can take another function as an argument, or that returns a function as a result.
When you pass a function by name without parentheses, you are passing the function object itself. When you pass it with parentheses, you are passing the result of executing that function.
Difference between null and undefined
null is an object whereas undefined is of type undefined.
null !== undefined but null == undefined
undefined means a variable is declared but not assigned a value whereas null is an assigned value.
Deep copy and Shallow copy
If we make a copy `b = a` , and change some nested value in `b`, it actually changes `a`’s nested value as well, since `a` and `b` actually point to the same thing. This is known as shallow copy.
Shallow copy in objects can be done by **spread operators**, **Object.assign({}, obj)** and **obj.slice()**;
Shallow copy in arrays: **spread**, **Array.from(arr)**
Problem with these methods arises when there are nested values, such as a nested object or a nested array:
When you have a nested object (or array) and you copy it, nested objects inside that object will not be copied, since they are only pointers / references.
We can do a deep copy to overcome this problem.
Deep copy: `JSON.parse(JSON.stringify(obj))`
Typecasting or coercion
it means changing data type of a value to to another data type. 2 types
* implicit-> automatic conversion of data type
* explicit-> type conversion example.. parseInt(), parseFloat(), String(), Boolean()
Features of ES6
1. Constants
2. Block scoped variables and block scoped functions
3. arrow functions
4. Destructring
5. Template Literals
6. Extended parameter handling using Rest and Spread
Promises
Promises 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. A Promise can be in one of the 3 states
* Pending
* Fulfilled
* Rejected
Event loop
[event loop](https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4)
Difference between call and apply
What is debouncing?
Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, that it stalls the performance of the web page. In other words, it limits the rate at which a function gets invoked.
What is 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.
What is the difference between throttling and debouncing?
Throttling will delay executing a function. It will reduce the notifications of an event that fires multiple times. Debouncing will bunch a series of sequential calls to a function into a single call to that function. It ensures that one notification is made for an event that fires multiple times.