JavaScript seen in React

Question 1

What does destructuring do?

Answer 1

Makes it possible to unpack values from arrays or properties from objects into distinct variables.
Extract multiple properties from an object/array.

Example Code: var user = {
  name: 'Ray',
  handle: 'Ray@gmail.com'
  location: 'Bluffdale, UT'
}

var {name, handle, location} = user;

Order in this case wouldn’t matter as if I put handle before name, it would still pull out the email because of what I called it.

Question 2

How is destructuring useful when dealing with function arguments?

Answer 2

We can set default values for any properties. So if there’s a value from the arguments we don’t want to use or define, we can give it a default value.
Example: Note - The reason the arguments are in a function is because he made a object and put in the argument values we care about as this is a good way of doing it

function fetchRepos({language = ‘All’, minStars=0, maxStars=’’, createdBefore=’’, createdAfter=’’})

Question 3

What is destructuring in place?

Answer 3

If we have nested objects and want to pull it out, we could destructure it in place rather than create a new line. So let’s say we have an object that has a object and in that object we have a address object and we want to pull out the street property from it. We can destructure in place

const {name, id, address: {street}} = employee;

Question 4

What arguments does a Promise take?

Answer 4

Callback functions of resolve and reject

Question 5

What is a promise simply?

Answer 5

It is simply an object in JavaScript and is always in one of the three state: pending -initial state
fulfilled - operation success
rejected - meaning that the operation failed

Question 6

Why use promises

Answer 6

One reason. Help deal with asynchronous code in a far more simpler way compared to callbacks

Question 7

What are resolve/reject in promise?

Answer 7

The promise receives 2 arguments. Both are functions. Resolve changes state of promise from pending to fulfilled. Reject changes from pending to rejected. Cannot directly mutate the status of a promise. Can call resolve or reject. Usually called after a async operation.

Question 8

When is then/catch method called.

Answer 8

then is when pending is fulfilled. catch is when pending is rejected.

Question 9

What is the fetch API?

Answer 9

Make requests to a server

Question 10

How do we use .then/.catch with an api call?

Answer 10

After the fetch api url we can attach the then which takes in the data as the argument and the catch that takes in the error.

fetch(‘https://pokeapi.co’).then((data) => console.log(data)).catch((err) => console.log(err));

The data isn’t necessarily what we want….Answered later

Question 11

How to take json out of response of a then method?

Answer 11

Take the res and add res.json() at the end to return json. That returns a promise so we can chain on another then where we’re going to get actual data.

fetch(‘https://pokeapi.co’)
.then((res) => res.json())
.then((data)=>console.log(data))
.catch((err) => console.log(err));

Question 12

Explain what an API is

Answer 12

When we need some data from a website, let’s say from google, our website needs to speak to Google so our server needs to speak to google server. This gives us a response which isn’t in HTML that our browser understands but rather JSON.

To summarize, when a company offers an API to their customers, it just means that they’ve built a set of dedicated URLs that return pure data responses — meaning the responses won’t contain the kind of presentational overhead that you would expect in a graphical user interface like a website.

Question 13

Explain what async keyword is in JavaScript

Answer 13

We can declare any function in JavaScript as async and async functions always return promises. Inside of the async function we can write code that looks synchronous even if it isn’t.

Question 14

How would you deal with an rejection in async function?

Answer 14

Simply throw an error inside of the async function.

async function oops() {
throw “you shouldn’t have invoked me!!”;
}

Question 15

Explain the await keyword

Answer 15

We can use it inside of a async function. await pauses the execution of the async function. Can await any async operation returning a promise (i.e other async functions).

The await keyword waits for promise to resolve and extracts its resolved value. It then resumes the async function’s execution. Think of it like a pause button.

Question 16

How do you handle error in async function?

Answer 16

If a promise is rejected using await, an error will be thrown. We can use try/catch statement to handle errors. 
try {
let url = "https://api{user}";
let response = await $.getJson(url)
} catch (e) {
   console.log("User does not exist");