JavaScript Professional, I need your help Answer the following questions denpend

Question

JavaScript Professional, I need your help

Answer the following questions denpending on index.html file:

Question 1: In the given index.html file, getImage() function creates and returns promise objects. What do these promise objects do? Or in other words, what kind of tasks do they represent?

Question 2: What are the differences among the three ways the images are fetched from the file system and then displayed in browser?

Question 3: Research online and explain how Promise.all() behave.

Question 4: If you were to design an image gallery on the web, which approach will you adopt: demo1(), demo2(), demo3(), or something else? Explain why.

-----index.htlm-----

Explanation / Answer

1. A Promise Object is used to denote a value which may become available in the future i.e. it allows the user to enter asynchronous code in its scope. The Promise objects acts as a substitute to the actual value till it gets available.
For example:
var promise = new Promise(function(resolve,reject)){//asynchronous code}
We instatiate a new Promise object with a callback function with arguments - resolve and reject(both represent functions). When the asynchrous code gets succesfully executed, the method resolve() is called and in case of any error the method reject() is called.
As already written, Promise acts as a substitute to the actual value till it becomes available so when the data does become available then the Promise.then() function gets called. Promise.then() function takes 2 arguments - failure and success callback. Now when the Promise is either fulfilled or rejected then the success or failure callbacks are called with the data passed to resolve and reject functions.

2. There are basically two ways used to iterate the images in the array. One is images.shift() method - This method deals with iterating the elements(images) in the Array named images sequentially i.e. one at a time. When the last element is reached the recursion stops. While the images.map(getImage()) method creates an entirely new array by calling the getImage() function on each of the array elements and assigns it to doggypromises variable. Now because the getImage() method return Promse object hence it will return an array of promises.

3. Promise.all() method takes an iterable argument which in this example is doggypromises. Basically, the Promise.all() method returns a single Promise object only when all the promise objects in the arguments get resolved or if the argument contains no promise objects.
If any promise is rejected, then Promise.all() rejects with the reason of the prmise in the iterable argument which got rejected at the first place without checking the rest of the promises. It aggregates the results of multiple promises passed as arguments. The return value of Promise.all() can be either a pre-resolved promise for an empty iterable argument, an asynchronous Promise when iterable contains no promises and a pending promise when all promises resolve or any of them rejects.

4. A Parallel loading approach is always better than a Sequential approach because it is faster as images get loaded once and for all at one time only. Though it depends on the usage and the scenario also, but I would prefer demo3 for loading images because it will download all images parallely so processing time and loading lag could be avoided which might happen while sequentially loading images. So preventing a sequential latency helps to make the overall download faster. demo3 and demo2 both use parallel loading but demo3 displays the images one at a time so that avoids any confusion which might occur while loading the other html elements giving the browser enough time to adjuct the asynchronous and synchronous components appropriately eventually providing the user an overall good experience.

Related Questions

Navigate

• Browse (All)
• Browse J
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.