Javascript Deck 4

Question 1

Single Responsibility Principle (SRP)

Answer 1

Each function or class should only have one responsibility

Question 2

Open/Closed Principle(OCP)

Answer 2

Software entities should be open for extension but closed for modification

Question 3

Liskov Substitution Principle(LSP)

Answer 3

Subtypes must be substitutable for their base types without altering the correctness of the program

Question 4

Interface Segregation Principle(ISP)

Answer 4

Clients should not be forced to depend on interfaces they do not use

Question 5

Dependency Inversion Principle(DIP)

Answer 5

High-level modules should not depend on low-level modules. Both should depend on abstractions

Question 6

TL;DR

Answer 6

Follow SOLID principles to write clean, maintainable, and extensible javascript code

Question 7

Fetch Method

Answer 7

The fetch() method in JS is used to request to the server and load the information in the webpages. The request can be pf any API’s that return the data of the format JSON or XML. This method returns a promise

Question 8

For Loop

Answer 8

Syntax
for(initialExpression; condition; updateExpression){}

ex:
const numbers = [1,2,3];

for(let i = 0; i < numbers.length; i++){
console.log(numbers[i]);
}
//prints - 1
2
3

Question 9

Do-While Loop

Answer 9

Syntax
do{
//body of loop
while(condition)
}

ex:
const numbers = [1,2,3];

do{
console.log(numbers[i]);
i++;
while(i < numbers.length)
}
//prints - 1
2
3

Question 9

While Loop

Answer 9

Syntax
while(condition){
//body of loop
}

ex:
const numbers = [1,2,3];

let i = 0;
while(i < number.length){
console.log(numbers[i]);
i++;
}
//prints - 1
2
3

Question 10

For Each

Answer 10

Syntax
array.forEach(function(currentValue), index, arr);

ex:
[1,2,3].forEach((elem) => => {
console.log(elem);
})

prints - 1 2 3

Question 11

Map

Answer 11

Syntax
array.map(function(currentValue, index, arr), callback function)

const results = [1,2,3].map((elem) => {
return elem.toFixed();
})

Question 12

For of loop —ARRAY/ITERABLE

Answer 12

Syntax
for(element of iterable){
//body of for… of
}

const numbers = [1,2,3];

for(let ele of cars) {
console.log(ele);
}

prints 1 2 3

Question 13

For In Loop — Object

Answer 13

Syntax
for(key in object){
//body of the for… in
}

const data = {id:1, name:’Joe’, age:’45’}

for(let key in data){
console.log(data[key])
}
//prints 1 Joe Age

Question 14

Center Div – FLEX

Answer 14

.parent{
display:flex;
justify-content:center;
align-items:center;
}

Question 15

Center Div – Grid

Answer 15

.parent{
display:grid;
place-content:center;
}

Question 16

Center Div – Position

Answer 16

.parent {
position:relative;
}

.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}

Question 17

Center Div – Flexbox and margin

Answer 17

.parent{
display:flex;
}
.child{
margin:auto;
}

Question 18

Center Div – Grid and Margin

Answer 18

.parent{
display:grid;
}
.child{
margin:auto;
}

Question 19

You have 2 minutes. Explain the JavaScript Event Loop to me

Answer 19

➤ Single-Threaded Execution:
- JavaScript is single-threaded, which means it can only execute one task at a time. This is managed by the call stack, where functions are executed one by one.

➤ Call Stack:
- Think of the call stack as a stack of plates. Every time a function is called, a new plate (function) is added to the stack. When the function finishes, the plate is removed from the stack.

➤ Web APIs:
- For asynchronous operations like setTimeout, DOM events, and HTTP requests, JavaScript relies on Web APIs provided by the browser. These operations are handled outside of the call stack.

➤ Callback Queue:
- When an asynchronous operation completes, its callback is placed in the callback queue. This queue waits until the call stack is clear before pushing the next callback onto the stack.

➤ Event Loop:
- The event loop is like a manager that constantly checks if the call stack is empty. When it is, the event loop takes the first callback from the callback queue and adds it to the call stack.

➤ Microtasks Queue:
- There’s also a microtasks queue for tasks like promises. This queue has higher priority than the callback queue. The event loop checks the microtasks queue first, ensuring these tasks are processed before other callbacks.

➤ Priority Handling:
- To sum it up, the event loop first checks the microtasks queue. If it’s empty, it moves to the callback queue. This ensures that critical tasks, like promises, are handled promptly.

That’s the JavaScript Event Loop.

Question 20

Console Methods

Answer 20

1. console.log(): Output standard messages.
2. console.error(): Display error messages.
3. console.warn(): Show warnings.
4. console.info(): Print informational messages.
5. console.debug(): Log debugging information.
6. console.table(): Display data in a tabular format.
7. console.time(): Start a timer.
8. console.timeEnd(): End a timer and show the elapsed time.
9. console.group(): Begin a collapsible group.
10. console.groupEnd(): End a collapsible group.
11. console.clear(): Clear the console.