5 Frontend Interview Questions to help you feel more confident when using asynchronous JavaScript

One of the tough things about learning Javascript is promises . They are not easy to understand and may take some guidance and a fair amount of time to use them. Today we will prepare for coding interview and understand them through the following code Try processing questions first, then we will see the answers.

1. What are the results?

• A: “one”
• B: “two”
• C: "two" "one"
• D: "one" "two"

Explain

• When we execute multiple promises with the Promise.race method, it resolves / rejects the promise complete at the earliest. With firstPromise takes 500ms to return and secondPromise takes 100ms. So secondPromise be resolve before value log out "two" . So the correct answer is B

2. What will the code print out?

• A: "I made it!"
• B: Promise {<resolved>: "I made it!"}
• C: Promise {<pending>}
• D: undefined

Explain

• An async function always returns a promise . await will keep waiting until the promise completes. That promise will be pending while it’s doing getData() until resolve/reject .
• So if we want to get the data value "I made it!" We can use the .then() :

With the above code will not log out "I made it!" . The answer is C

3. What is the output value?

• A: I have resolved! , second and I have resolved! , second
• B: second , I have resolved! and second , I have resolved!
• C: I have resolved! , second and second , I have resolved!
• D: second , I have resolved! and I have resolved! , second

Explain

• With a regular promise and function we’ll basically understand that I want to execute this function, but I’ll put them aside while it’s running as this can take some time. Only if a value that is resolve (or reject ) or the callstack is empty do I use them
• We can get data with both .then and await in an async function like firstFunction and secondFunction . However, they will be different.
• With firstFunction we will push the myPromise function aside (and callstack) while they’re running, and continue executing all the code below, in this case console.log('second') . Then go back to executing them when the callstack is empty.
• For secondFunction we will pause execution of the code below until the value has been processed and then run the next code. This will ensure consistent processing of our code. So I have resolved log, then ran to second => D

4. Which result is returned below?

• A: 5
• B: Promise {<pending>: 5}
• C: Promse {<fulfilled>: 5}
• D: Error

Explain

When we execute the command that returns any type of value with Promise.resolve , whether promise or non-promise . Then this method will return to a promise with the resolved value ( <fulfilled> ). That means if we return with Promise.resolve then the data will be returned with the promise form. In this case the value returned is a promise with the data 5 . The answer will be C

5. What is returned?

• A: Promise {1} Promise {2} Promise {3}
• B: Promise {<pending>} Promise {<pending>} Promise {<pending>}
• C: 1 2 3
• D: undefined undefined undefined

Explain

Above we use a generator function with a range function that returns an async object with promises each element traverses: Promise{1} , Promise{2} , Promise{3} . They put on a gen variable as an async object . We then loop through it with a for await ... of loop. Thus, the loop will put on the item with the value of the promise value : First Promise{1} , 2 is Promise{2} and finally Promise{3} . Since we are waiting for the value of each item using await , Thus promises will be resolved and returned in the order of 1 , 2 and 3 . The answer is * C

summary

• Hopefully, the above questions about promise will help you refresh your knowledge and review your knowledge. Good luck with Javascript.
• Source article here