# FE developer questions

- Which primitive types you know in JS?

7 types:
String, Number, BigInt, Boolean, Undefined, Null, Symbol

The non-primitive type is object

- What is the differences between `.map` and `.forEach`

- How you can print the type of the instance?

Use typeof

- Can you check if the instance is null using typeof?

NO, it will return "object"

- What is the difference between session and cookies?

Session is stored on server
Cookie is stored on user's browser

- Can you explain closure in Javascript?

- What is the difference between the Observer pattern and Pub-Sub pattern?

In ‘Publisher-Subscriber’ pattern, senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers.

This means that the publisher and subscriber don’t know about the existence of one another. There is a third component, called broker or message broker or event bus, which is known by both the publisher and subscriber, which filters all incoming messages and distributes them accordingly

- What should we do when we must pass a function as a dependency in useEffect?

Use useCallback

- What should we do when we need pass an object or an array as a dependency in useEffect?

use useMemo, useDeepCompareEffect or JSON.stringify the object/array

- In redux, what should you do when you need to do an async logic?

- Did you have to optimize React bundle size before? What are some of the common ways?

- What are event bubbling and event delegation?

Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements

<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
    // e.target is the clicked element!
    // If it was a list item
    if(e.target && e.target.nodeName == "LI") {
        // List item found!  Output the ID!
        console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
    }
});

event bubbling: 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.

- How to prevent CSRF?

Use a random token that is generated by the server for the returned page, and put this random token inside a hidden HTML field. Save that token in user's session and change each time the page is rendered (anti-forgery token)

Use the SameSite Flag in Cookies

- How to prevent XSS?

- Flexible grid: https://codesandbox.io/s/inspiring-vaughan-5gmfn

Answer: https://codepen.io/piavgh/pen/YzVymvx

or

/* ... */

.classB {
  background-color: cyan;
}

/* ... */

.container {
  display: flex;
}
.container .classA {
  display: flex;
  flex: 1;
}
.container .classB {
  flex: 1;
}

@media (max-width: 992px) and (min-width: 576px) {
  .container {
    flex-direction: column;
  }
  .classB {
    flex: 1;
  }
}
@media screen and (max-width: 576px) {
  .container {
    flex-direction: column;
  }
  .container .classA {
    flex-direction: column;
  }
}

- What should you do when you need to handle a CPU-intensive task in React.js (or any UI framework)?
The heavy task takes from 3-10 seconds to complete, which blocks the main UI thread?

- Explain Node.js event loop?

- Explain how JWT works? Can we know the content of JWT at frontend?

- Can you implement a funtion that can be used in both of the following ways:
add(12, 35); // 47
add(12)(35); // 47

https://codesandbox.io/s/gallant-https-49o4r?file=/index.html

- What are the types of authentication when you interact with Google service?

API key, OAuth client, Service account

- What will you do when you need to read the same function from multiple contract?

- What is the advantages of using multicall contract?

+ reduces the number of separate JSON RPC requests that need to be sent over the network
+ provides the guarantee that all values returned are from the same block
+ returning the block number the values are from

------
closure: https://codesandbox.io/s/elegant-cherry-vf1qx?file=/src/index.js

liftup state: https://codesandbox.io/s/amazing-jang-jfpn5?file=/src/App.js