Why Curly braces while handling a Promise object provides undefined data?

Question

In a simple React App that fetch response from a API, the following code with curly braces has resulting data value as undefined.

fetch('http://localhost:8000/track/?id='+this.state.input)
            .then(res => {res.json()})        //Note Curly braces around {res.json()}
            .then((data) => {
                console.log(data);

Whereas when curly braces was removed, surprisingly it fetched and printed the response data in the console.

fetch('http://localhost:8000/track/?id='+this.state.input)
            .then(res => res.json())         //No Curly braces - then works fine
            .then((data) => {
                console.log(data);

What is the reason for this behavior with curly braces around a Promise function? Is it not possible to use curly braces ?Why? Promises are slightly confusing though.

Your first function returns nothing. The second one is using the [arrow function shorthand](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and thus is returning the json promise. If you want to use the long hand, you need to do the `return` yourself, as in `.then(res => { return res.json() })`. — Nicholas Tower, Sep 15 '21 at 19:21
Does this answer your question? [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](https://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas) — Emile Bergeron, Sep 15 '21 at 19:29
Or maybe this one is more specific to this situation: [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/q/28889450/1218980) — Emile Bergeron, Sep 15 '21 at 19:30
@EmileBergeron The answer I was looking for are that `res.json()` is returning a Promise that must be resolved/rejected further and the Response object(`.then(res =>`) has nothing to return further and the answers here provided clarity easily, so that the elaborate discussion links on Arrow functions in JS you shared will make sense to me. — Blossom, Sep 15 '21 at 20:00

Ryan Wheale · Accepted Answer · 2022-11-10T17:16:15.073

When you are using an arrow function, you can omit the curly braces for very simple functions. This will implicitly return the result of the expression following the arrow. This is best explained by example. Let's start with a simple function:

var foo = () => {
  return 'bar';
}

This can be shortened to this one liner:

var foo = () => { return 'bar' }

Which can be further shortened to this (removed curly braces and return statement):

var foo = () => 'bar';

In your case, you can think of the code you posted like this:

.then(res => {
  res.json()
})

The above function doesn't return anything, which is the source of your problem. What your really want is this:

.then(res => {
  return res.json()
})

Which can be shortened like this:

.then(res => { return res.json() }) // one-liner with curlys
.then(res => res.json())            // without curlys

score 1 · Answer 2 · answered Sep 15 '21 at 19:25

you have to return something when you are using {} in an arrow function, let's take a look.

fetch('http://localhost:8000/track/?id='+this.state.input)
  .then(res => {
    return res.json()
  })        
  .then((data) => {console.log(data)};

Read this MDN doc.

score 1 · Answer 3 · answered Sep 15 '21 at 19:25

1

This:

() => 5

is equal to

() => { return 5; }

If you use curly braces, you need to explicitly return.

answered Sep 15 '21 at 19:25

Evert

93,428
18
118
189

Why Curly braces while handling a Promise object provides undefined data?

3 Answers3