Javascript
1. JS is a synchronous single-threaded language.
2. How does the JS code work? : Watch Akshay Saini Video
3. Why do we use Javascript?
a) Javascript is used in Client-side code as well as Server-side.
b) It is used in Web development.
c) It is used in App development.
4. ES5:
- use strict, trim(), isArray, map(), forEach(), filter(), reduce(),
indexOf(), lastIndexOf(), [Link](), [Link]().
- [Link]
5. ES6: Let, Const, Arrow Function, Spread and rest operator, Array
destructuring, template literal.
6. 3 Difference between ES5 and ES 6.
- Regular function vs Arrow function.
- Var vs let, const.
- Class declaration.
- In ES 5 we are using + operator to append variables in a string but in ES6 we are
using template literal to achieve this.
- [Link]
- [Link]
- [Link]
s6-classes-a37b6c90c7f8
7. Hoisting
- Hoisting: It is a technique in which we can access a variable or function before
its initialization. This is happening due to 1st phase (memory creation) of
execution context.
- [Link]
- [Link]
ions-b6f91dbc2be8/
- Arrow functions are not hoisted because they are not declared using the
function keyword. It is defined using “fat arrow” syntax. This syntax does
not create a function declaration, so the function is not hoisted to the top of the
scope.
- Initialization: Variables declared with var are hoisted with a default initialization
of undefined. Variables declared with let and const are hoisted without a default
initialization.
- Accessibility: Variables declared with let and const are inaccessible because
they are in a temporal dead zone (TDZ).
- Accessing uninitialized variables: Accessing uninitialized variables causes a
ReferenceError.
-
- TDZ: The Temporal Dead Zone (TDZ) is a concept in JavaScript that refers to the
period between the start of a block scope and the moment a variable declared
with let or const is initialized.
8. Constructor and Diff b/w Constructor and Object
- It is used to create and set up multiple instances of an object.
- [Link]
- [Link]
-and-an-object
9. [Link](“Addition :”, 0.1+0.2)
10. [Link](“Value :”, 0.1+0.2 == 0.3)
11. npm vs npx:
- Npm is a tool that is used to install packages.
- Npx is a tool that is used to execute packages.
- [Link]
px/
12. Npm vs yarn
13. Library vs Framework
- [Link]
-a-library-bd133054023f/
14. Use of strict:
- It cannot allow the use of undefined variables, Duplicate properties of an
object, and Duplicate parameters of the function.
- [Link]
15. Generator function:
- A generator can pause midway and then continue from where it paused.
- The next() method returns an object with a value property containing the
yielded value and a done property which indicates whether the generator has
yielded its last value, as a boolean.
- [Link]
- [Link]
function*
16. Higher-Order function:
- Higher-order functions are functions that take other functions as arguments or
return functions as their results. Ex: map, forEach, filter
- [Link]
17. preventDefault() :
- It prevents the default action of the event.
- [Link]
18. Client-Side Rendering vs Server-Side Rendering
- Client-side: Client-side means that the JavaScript code is run on the client
machine, which is the browser.
- Server-side: Server-side JavaScript means that the code is run on the server
which is serving web pages.
- [Link]
g
- In server-side rendering when a user makes a request to a webpage, the server
prepares an HTML page by fetching user-specific data and sends it to the
user’s machine over the internet.
19. Interpolation:
- String Interpolation is a feature of ES6 that can make multi-line strings without
the need for an escape character.
- String interpolation is a feature that allows injecting variables, function calls,
and arithmetic expressions directly into a string.
- [Link]
20. JSON vs Object:
- JSON is a set of name-value pairs and Object is a set of key-value pairs.
- [Link]
- [Link]
21. [Link]
22. Types of Error:
- [Link]
23. freeze() vs seal():
- [Link]
l-in-javascript/
24. Browser Object Model?
- It allows JavaScript to "talk to" the browser.
- Feature:
a) It allows JavaScript to control the browser window (resize, open/close,
display alerts)
b) It allows Javascript to Access and manipulate the current web page
(navigation, history)
c) It interacts with the user (display messages, take input)
d) Get information about the browser and its environment (screen size,
browser version)
25. Diff between an onload event and a DOMContentLoaded event?
- DOMContentLoaded fires when HTML parsing is complete while onload event
fires when all resources are loaded.
- DOMContentLoaded event is used for Manipulating page structure, and
displaying basic content while onload event is used for Animations, complex
interactions, and full page state.
26. Pass by value vs Pass by reference?
- In Pass by value, parameters passed as arguments create their own copy.
So changes made inside the function do not affect the original value.
- In Pass by reference, parameters passed as an argument do not create its own
copy, it refers to the original value. So changes made inside the function
affect the original value.
- [Link]
ript/
27. null and undefined
- null: A variable assigned with null value.
- Undefined: A variable is declared but not assigned any value.
- [Link]
28. Continue: It skips an iteration if a certain condition returns true.
29. fetch() vs axios():
- fetch():
a) Fetch method is used to request data from a server.
b) It returns a Promise, once promise is resolve/reject then it gives a
response body readable stream. Then we have to use [Link]()
to convert the response readable stream into JSON.
c) [Link]() is also a promise.
d) The request can be of any type of API that returns the data in JSON or
XML.
- fetch() method requires one parameter, the URL to request, and returns a
promise.
- [Link]
- [Link]
ng-http-requests/
Advanced Javascript
1. Regular function vs Arrow function
- [Link]
:text=arguments%20object%20inside%20the%20regular,args%20).
- Syntax: Regular function defines using function keyword while Arrow function
defines using fat-arrow syntax.
- implicit return: Arrow function has an implicit return means if an arrow has
one expression then we return the arrow function without writing the return
keyword while Regular function doesn’t have an implicit return.
- this value: The value of this inside arrow function is equal to this value from
the outer function while in Regular Function this value refers to a global object
- Regular Function:
- Use case:
a) Explicit this binding: Gives you more control over this binding
using techniques like .bind(), arrow functions within them, or
explicit binding.
b) Constructor functions: Essential for defining object constructors
using the new keyword.
c) arguments object: Provide access to the arguments object.
d) super binding: Allow using the super keyword to access parent
methods in class hierarchies.
- Limitation:
a) Consistency: For predictable this behavior and avoiding scoping
issues, arrow functions are generally better.
- Arrow Function:
- Use case:
a) Implicit Return: When a function has one line of expression then
it allows return a single-line expression without a return
keyword.
b) Callback functions: Ideal for callbacks in array methods like map,
filter, reduce, forEach, etc. due to their lexical this and concise
syntax.
c) Event handlers: Well-suited for event handlers as they often need
consistent this behavior.
- Limitation:
a) No arguments object: Cannot access the arguments object, which
holds function arguments as an array.
b) No new binding: Cannot be used as constructors with the new
keyword.
c) No super binding: Cannot use super keyword within them.
2. Events vs synthetic event
- Events: It is an action that occurs as per the user input and gives the output in
response.
- Ex: click, changes, mouseover, mouseout, keydown, keyup
- Synthetic event: It is a cross-browser wrapper around the browser's native
event.
- Ex: onClick(), onBlur(), and onChange() are synthetic events.
3. slice vs splice
- splice(): splice() method changes the content of the original array by
removing, replacing, or adding new elements. It returns removed item(s) in an
array.
- splice (index, deleteCount, item1, item2, …) (index: where to start add/remove)
- slice(): slice() method returns the new array of selected elements.
- slice(startIndex, endIndex) (startIndex: where to start selection, endIndex:
where to end selection)
- First argument is required in both methods and the rest is optional
- [Link]
4. call(), apply() and bind() method:
- They all attach this into a function or object.
- Call, apply, and bind are the functions that help you change the context of this
keyword present inside the invoking function.
- Call use case:
a) Changing the context: Often used when a function's default this doesn't
suit the current context. For example, a method defined inside an object
might need to access other properties of that object.
b) Borrowing methods: Borrowing a method from another object and
calling it with a different this value.
5. call(), apply() and bind() method:
- They all attach this into a function or object.
- Call, apply, and bind are the functions that help you change the context of this
keyword present inside the invoking function.
-
- Call use case:
a) Changing the context: Often used when a function's default this doesn't
suit the current context. For example, a method defined inside an object
might need to access other properties of that object.
b) Borrowing methods: Borrowing a method from another object and
calling it with a different this value.
- Apply use case:
a) Same as call use case
b) When arguments are pre-defined in an array and need to be passed to a
function.
c) Ex: No
- Bind use case:
a) Creating event handlers: You have a function that you want to pre-bind
to a specific context (this) value for later use. This is particularly useful in
handling event handlers where this can be unpredictable.
b) Ex: [Link]("click", [Link](this))
c) Ex: No
- Link:
a) [Link]
to-use-bind-call-and-apply-in-javascript-77b6f42898fb
b) [Link]
d-methods-in-javascript-80a8e6096a90/
c) Polyfill:
[Link]
-javascript/
6. Closure
- Definition: A function along with its lexical scope bundle together to form a
closure. Inner function can still access variables of outer environment even
Outer function return.
- Lexical scope: Variables defined outside the function can be accessible inside
the inner function.
- Advantage: Data hiding
- Disadvantage: Memory consumption (when a closure is formed it takes a lot of
memory).
- Use case:
a) Implementing private variables and functions: Closures can be used to
create private variables and functions that are only accessible to the
functions within the closure.
b) Creating curried functions: Currying is a technique that transforms a
function that takes multiple arguments into a series of functions that take
one argument at a time. This can be useful for making functions more
reusable and easier to compose.
c) Creating memoization functions: Memoization is a technique that stores
the results of previous function calls so that they can be reused if the
same function is called with the same arguments. This can be useful for
improving the performance of functions that are called repeatedly with
the same arguments.
7. Function Currying
- Definition: When a function, instead of taking all arguments at one time, takes
the first one and returns a new function that takes the second one and returns a
new function which takes the third one, and so forth until all arguments have
been fulfilled.
- Use:
a) It helps to avoid passing the same variable again and again.
b) It is extremely useful in event handling.
- [Link]
8. [Link](object1): It returns the array of a given object.
[Link](object1): It returns the array of keys of a given object.
[Link](object1): It returns the array of values of a given object.
9. async, await:
- [Link]
- Asynchronous: Functions running in parallel with other functions are called
asynchronous.
- Async: async makes a function return a Promise
- Await: await makes a function wait for a Promise for resolve/reject
10. Prototype:
- Prototype is an object where we attach methods and properties in a Prototype
Object so that all other Objects inherit these methods and properties.
- [Link]
11. Inheritance:
- Inheritance allows us to inherit the method and properties of its parent class.
- [Link]
- Ex:
class Animal {
constructor(legs) {
[Link] = legs
}
walk() {
[Link](`This animal has ${[Link]} legs`)
}
}
class Bird extends Animal {
constructor(legs) {
super(legs)
}
fly() {
[Link]("Flying")
}
}
let bird1 = new Bird(4)
[Link]()
[Link]()
12. Event bubbling vs event capturing.
- Bubbling: The event is first captured and handled by the innermost element
and then propagated to outer elements. (Bubbling travels from Target to
Root node. Target is the DOM node on which you click, or trigger any event.)
- Capturing: The event is first captured and handled by the outermost element
and propagated to the inner elements. (Capturing travel from Root to
Target node. Target is the DOM node on which you click, or trigger any
event.)
- [Link](): It prevents further propagation through the DOM tree,
and only runs the event handler from which it was called.
13. Debouncing and throttling.
- Debouncing: Debouncing is a technique in which, no matter how many times the
user fires the event, the attached function will be executed only after the
specified time once the user stops firing the event.
- 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.
- [Link]
- [Link]
14. Object vs Map vs Set:
- Object is a collection of keys, value pairs, and keys are only in the form of
strings.
- Map is a collection of keys, value pairs, and keys can be any value (including
functions, objects, or any primitive).
- Set is a collection of unique values, unlike an array which can have duplicates.
- Object and map are hash table types of data structure in which is stored in the
form of key, and value pair. Hash tables access components in constant time
(O(1)).
15. Shallow copy vs Deep copy:
- Shallow copy: Suppose we have two variables and we assign one variable into
another variable and both are pointing to the same memory location.
- Deep copy: Suppose we have two variables and we assign one variable into
another variable and both pointing to different memory locations.
- [Link]
ascript/
16. Higher Order Function:
- map(), forEach(), filter(), reduce()
17. Callback:
- Callback() function is used when we want to execute a function just execution
of another function.
- Use case:
a) Event Handling: Callbacks are essential for handling events like button
clicks, form submissions, or user interactions with web pages. Ex:
[Link]("click", handleButtonClick())
b) Asynchronous Operations:
- Callbacks are crucial for handling asynchronous operations,
where a function might take some time to complete (e.g., fetching
data from a server).
- You can pass a callback function as an argument to the
asynchronous function, and the callback will be executed once
the operation finishes, allowing you to process the returned data
or handle any errors.
c) Higher-Order Functions:
- In functional programming, HOFs take functions as arguments
and often return a new function.
- Callbacks play a vital role in HOFs, allowing you to customize the
behavior of the returned function based on the provided callback.
d) Timers and Intervals:
- We can use callback with setTimeout() and setInterval() functions
to execute code after a specific delay or at regular intervals
- Callback hell:
a) Def: Callback inside callback
b) Issue: Unmanageable code, inversion of control means we lose the
control
- [Link]
18. Async, await:
- Async:
a) async makes a function and return a promise.
b) Ex:
const getData =async()=> {
return new Promise((resolve, reject)=> {
resolve("Resolved.")l
})
}
const getName =async()=> {
return "Saurabh"
}
In the last example async() wraps the value inside the promise
then it returns a promise.
- Await:
a) await, make a function, and wait for a promise to resolve/reject.
19. Promise:
- Promise: Promise is an object that is used to handle asynchronous operations
in JavaScript.
It is created via a new keyword. It takes a function as an argument with two
parameters - resolve and reject.
- They are easy to manage when dealing with multiple asynchronous operations
where callbacks can create callback hell leading to unmanageable code.
- Use case:
a) Promises are most useful when you have a process that takes an
unknown amount of time. Ex: server request
- [Link]
- Promise Chaining: Promise Chaining is a simple concept by which we may
initialize another promise inside our .then() method and accordingly we may
execute our results. The function inside then captures the value returned by the
previous promise
- [Link]():
a) It takes an array of promises and returns a single Promise.
b) This returned promise fulfills when all of input's promises fulfill.
c) And This returned promise rejects when any of input's promises reject
with it's first rejection reason.
d) Return: It returns an array as an output containing promise data inside
several indexes.
- [Link]():
a) It takes an array of promises and returns a single Promise.
b) This returned promise fullfills when all of input’s promises settle.
c) Return: It returns an array of objects and each of these objects contains
status and value.
20. Memoization:
- It is an optimization technique for applications by storing computation results
in cache and return a result from cache when the same inputs are used again
instead of doing the calculation again.
- [Link]
21. Debouncing and throttling Code?
const debounce = (func, timeout = 300) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
[Link](this, args);
}, timeout);
};
}
const printName = () => {
[Link]("Debounce Response === Saurabh")
}
const debounceRes = debounce(()=> printName(), 3000)
debounceRes()
22. Memoization (Code)
function fibMemo(n, memo={0:0, 1:1}) {
If (n in memo) {
return memo[n]
}
const result = fibMemo(n-1, memo) + fibMemo(n-2, memo)
memo[n] = result
return result
}
ES6
1. Ref: [Link]
2. Array Destructuring:
- It allows you to destructure properties of an object or elements of an array into
individual variables.
- It is used when we have a complex function that has a lot of parameters, default
values and so on.
3. Class :
- A JavaScript class is a blueprint for creating objects. A class encapsulates data
and functions that manipulate data.
- In other words, ES6 classes are just special functions.
4. Static method and property:
- static methods are associated with a class, not the instances of that class. Thus,
static methods are useful for defining helper or utility methods.
- Prior to ES6, to define a static method, you add the method directly to the
constructor.
5. Computed Property:
- ES6 allows you to use an expression in brackets []. It’ll then use the result of the
expression as the property name of an object.
6. Inheritance:
- Inheritance refers to an object's ability to access methods and other properties
from another object.
- Objects can inherit things from other objects.
- We can achieve inheritance in js using extends and super.
- Child class also inherits all static properties and methods of the parent class.
7. [Link]:
- The JavaScript [Link] meta property that detects whether a function or
constructor was called using the new operator.
8. symbols:
- ES6 added Symbol as a new primitive type.
- Unlike other primitive types such as number, boolean, null, undefined, and
string, the symbol type doesn’t have a literal form.