Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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
STAFF
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:

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
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: