JavaScript Asynchronous Programming with JavaScript Understanding Promises From Callbacks to Promises

Return in callback of map function.

Why do we need to add a return when the callback returns a Pormise but we hadn´t before?

2 Answers

Robert Manolis
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Robert Manolis
Treehouse Guest Teacher

Hi Uriel Fuentes, I can't say for sure with out seeing the exact code you're referring to, but I imagine it has something to do with the format of the code. In certain circumstances, the return is implicit. For example, with simple one line arrow functions or what are sometimes called "concise body" arrow functions, the result of the expression is returned even without the use of the return keyword.

param => expression

But whether implicit or explicit, the result of the promise needs to be returned. Hope that helps. :thumbsup:

Keith Alorro
seal-mask
.a{fill-rule:evenodd;}techdegree
Keith Alorro
Full Stack JavaScript Techdegree Student 8,683 Points

Hi Robert Manolis. I believe what Uriel Fuentes is referring to is an earlier exercise where we were instructed to declare the Promise instance as a variable without returning it. Such was the case with promises-breakfast.js:

const breakfastPromise = new Promise( (resolve, reject) => {
  setTimeout(() => {
    if (order) {
      resolve('Your order is ready. Come and get it!');
    } else {
      reject( Error('Your order cannot be made.') );
    }
  }, 3000);
});

breakfastPromise
  .then( val => console.log(val) )
  .catch( err => console.log(err) )

Now we are being instructed to return the Promise instance during this lesson resulting in:

function getJSON(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if(xhr.status === 200) {
        let data = JSON.parse(xhr.responseText);
        resolve(data);
      } else {
        reject( Error(xhr.statusText) );
      }
    };
    xhr.onerror = () => reject( Error('A network error occurred') );
    xhr.send();
  });
}

btn.addEventListener('click', (event) => {
  getJSON(astrosUrl)
    .then(getProfiles)
    .then( data => console.log(data) )
    .catch( err => console.log(err) )

  event.target.remove();
});

My understanding is the first example demonstrates the Promise being declared within the same block of code as the then() and catch() functions. This means the Promise did not need to be returned as it is within scope.

And if my understanding is still correct, the second example demonstrates an EventListener with the then() and catch() functions expecting a return value from a Promise created inside the invoked getJSON function. We cannot access this Promise outside of the getJSON function unless we return it.

Robert Manolis
seal-mask
.a{fill-rule:evenodd;}techdegree
Robert Manolis
Treehouse Guest Teacher

Hi Keith Alorro, yeah, scope matters for reference, but I believe here it has more to do with how the .then() method works. That method is a built in part of the Promise API. And it expects to be called on a promise. So in your first example, .then() is being called directly on the promise that is created. No need to return anything because that the thing the .then method is being called on is actually a promise. But in the second example, that method is being called on a function that isn't a promise. So that function needs to return a promise for .then method to work. :thumbsup: