Javascript Deck 4 Flashcards
Single Responsibility Principle (SRP)
Each function or class should only have one responsibility
Open/Closed Principle(OCP)
Software entities should be open for extension but closed for modification
Liskov Substitution Principle(LSP)
Subtypes must be substitutable for their base types without altering the correctness of the program
Interface Segregation Principle(ISP)
Clients should not be forced to depend on interfaces they do not use
Dependency Inversion Principle(DIP)
High-level modules should not depend on low-level modules. Both should depend on abstractions
TL;DR
Follow SOLID principles to write clean, maintainable, and extensible javascript code
Fetch Method
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
For Loop
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
Do-While Loop
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
While Loop
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
For Each
Syntax
array.forEach(function(currentValue), index, arr);
ex:
[1,2,3].forEach((elem) => => {
console.log(elem);
})
prints - 1 2 3
Map
Syntax
array.map(function(currentValue, index, arr), callback function)
const results = [1,2,3].map((elem) => {
return elem.toFixed();
})
For of loop —ARRAY/ITERABLE
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
For In Loop — Object
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
Center Div – FLEX
.parent{
display:flex;
justify-content:center;
align-items:center;
}
Center Div – Grid
.parent{
display:grid;
place-content:center;
}
Center Div – Position
.parent {
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
Center Div – Flexbox and margin
.parent{
display:flex;
}
.child{
margin:auto;
}
Center Div – Grid and Margin
.parent{
display:grid;
}
.child{
margin:auto;
}
You have 2 minutes. Explain the JavaScript Event Loop to me
➤ 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.
Console Methods
- console.log(): Output standard messages.
- console.error(): Display error messages.
- console.warn(): Show warnings.
- console.info(): Print informational messages.
- console.debug(): Log debugging information.
- console.table(): Display data in a tabular format.
- console.time(): Start a timer.
- console.timeEnd(): End a timer and show the elapsed time.
- console.group(): Begin a collapsible group.
- console.groupEnd(): End a collapsible group.
- console.clear(): Clear the console.
