Javascript

Question 1

Async Evolution

Answer 1

callbacks (unmanageable callback hell) → promises with then and catch → async/await (write code normally, no long promise chaining)

Question 2

Callback

Answer 2

A function that is passed as an argument. The function will be executed after a certain operation is finished. This is useful for handling async operations.

Question 3

Promise

Answer 3

An alternative approach for callbacks for handling async operations. It allows you to set an operation to run after another operation finish. It is a syntactic improvement that prevents unclean callback hell.

a promise returns resolve or reject

handled with then and catch

Question 4

async / await keyword

Answer 4

Syntactic sugar for handling promise, without then and catch

const res = await someFunc()
console.log(res)

make sure res is printed only after someFunc resolved

Question 5

Basic of async

Answer 5

Blocking codes: expensive task or intensive chunk of code

When executed without returning control to the browser, it will appear frozen

Javascript main thread is single-threaded

A thread can only execute a task at a time

expensive operations: I/O operations like HTTP requests, disk reads and writes or database operations

when encountering an async I/O operations it will be assigned to a kernel thread (system kernel are multi-threaded)

with promise or callback, the I/O operation will not block the main thread

after operation is finished, callback is being put into a callback queue in the event loop

once it can be safely handled it will be pushed to the JS call stack, to be called by the main thread

Question 6

for (let i = 0; i < 5; i++) {
  setTimeout(function() { console.log(i); }, i * 1000 );
}

for (var i = 0; i < 5; i++) {
	setTimeout(function() { console.log(i); }, i * 1000 );
}

Answer 6

setTimeout(function() { console.log(i); }, i * 1000 );
setTimeout(function() { console.log(i); }, i * 1000 );
setTimeout(function() { console.log(i); }, i * 1000 );
setTimeout(function() { console.log(i); }, i * 1000 );
setTimeout(function() { console.log(i); }, i * 1000 );

Question 7

What is Bubbling

Answer 7

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Question 8

What is Capturing

Answer 8

event goes down to the element.

Question 9

event target vs current target

Answer 9

• event.target– is the “target” element that initiated the event, it doesn’t change through the bubbling process.
• this– is the “current” element, the one that has a currently running handler on it.

Question 10

How to stop Bubbling

Answer 10

event.stopPropagation()

Question 11

Capturing and Bubbling Phase

Answer 11

1. Capturing phase – the event goes down to the element.
2. Target phase – the event reached the target element.
3. Bubbling phase – the event bubbles up from the element

Question 12

Arrow Function vs Regular Function

Answer 12

• Structure
• This
• Implicit Returns
  If the arrow function contains one expression, without curly braces, then the expression is implicitly returned. These are the inline arrows function.
• Constructor
  can’t be used as constructor
• Argument
  arguments object equals to the arguments of the outer function, can use …args to get direct arguments

Question 13

Arrow vs Regular “this”

Answer 13

> `this`value inside of an arrow function always equals`this` value from the outer function. In other words, the arrow function resolves`this` lexically.
> no more`const self = this` or`callback.bind(this)`workarounds.

Question 14

Debounce vs Throttle

Answer 14

Debouncing forces a function to wait a certain amount of time before running again. The debounced function will ignore all calls to it until the calls have stopped for a specified time period. Only then will it call the original function. (e.g. autosave feature)

To throttle a function means to ensure that the function is called at most once in a specified time period (for instance, once every 10 seconds) (e.g. limiting API hit)

Question 15

What is a Closure

Answer 15

A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain. The closure has access to variables in three scopes; specifically: (1) variable in its own scope, (2) variables in the enclosing function’s scope, and (3) global variables.

Question 16

DOM Manipulation

Answer 16

Document Object Mode, organizes the elements on a web page and allows scripting languages to access them

DOM Manipulation in JS is costly

adding a first child, will rebuilt the whole list

Question 17

React Virtual DOM

Answer 17

In React, for every DOM object, there is a corresponding “virtual DOM object.”

Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen

Render process

1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the real DOM.
4. Changes on the real DOM cause the screen to change.

add example about using key in lists

Question 18

React functional updates on state hooks

Answer 18

onClick={() => {
setCount(count + 1)
setCount(count + 1)
}}

will only increment count once

onClick={() => {
setCount((previousCount) => previousCount + 1)
setCount((previousCount) => previousCount + 1)
}}

increment count twice

It will bail out of rendering if you try to update to the same value that your state is currently holding.