Adding implicit return to arrow function using fetch api

Question

I am playing around with promises and the Fetch API in Javascript

I wanted to know why when I do not add an implicit return in my countryDetail() function, I get undefined, whereas when I add an implicit return I get the data I am looking for?

Here is the function without the implicit return which returns undefined.

const countryDetail = (countryCode) => {
  return fetch("http://restcountries.eu/rest/v2/all")
    .then((response) => {
      if (response.status === 200) {
        return response.json();
      } else {
        throw new Error("Unable to fetch data");
      }
    })
    .then((data) => data.find((country) => country.alpha2Code === countryCode);
};

Here is the same function with the implicit return using the arrow function. This function works and return the data instead of undefined

const countryDetail = (countryCode) => {
  return fetch("http://restcountries.eu/rest/v2/all")
    .then((response) => {
      if (response.status === 200) {
        return response.json();
      } else {
        throw new Error("Unable to fetch data");
      }
    })
    .then((data) => {
      return data.find((country) => country.alpha2Code === countryCode);
    });

here is how the function is being used in app.js

countryDetail("MX")
  .then((country) => {
    console.log(country.name);
  })
  .catch((err) => {
    console.log(err);
  });

Maybe it is me, but I can't see the function with the implicit return. I only see the one without implicit return and how it is used in app.js — urchmaney, Jan 01 '21 at 11:32
Other than couple of missing parenthesis, your code is fine. Both code examples work as they should. Only different between the two versions of `countryDetail` function is that first one returns the data implicitly and second one returns the data explicitly. — Yousaf, Jan 01 '21 at 11:33
Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) — Aluan Haddad, Jan 01 '21 at 11:38
@AluanHaddad no, it looks like it was a syntax issue, I added the missing parenthesis and it worked. — user6248190, Jan 01 '21 at 11:42
I see what you're saying. It's too bad this code even parses — Aluan Haddad, Jan 01 '21 at 11:44
yeah it's weird, now I need to figure out why this code even parsed and didn't raise an error — user6248190, Jan 01 '21 at 11:47

score 3 · Accepted Answer · answered Jan 01 '21 at 11:34

3

It seems, there is a syntactical error in the implicit code. Closing bracket is missing.

.then((data) => data.find((country) => country.alpha2Code === countryCode);

It should be

.then((data) => data.find((country) => country.alpha2Code === countryCode));

answered Jan 01 '21 at 11:34

tsfahmad

404
4
12

That syntax error isn't the cause of the problem described in OP's question. – Yousaf Jan 01 '21 at 11:37
Yup that was the problem – user6248190 Jan 01 '21 at 11:39
Apart from this syntactical issue, I do not find any other problem. Ideally, it should work as expected. – tsfahmad Jan 01 '21 at 11:39
1

@user6248190 if that syntax error was the problem then you should get an error instead of `undefined` like you described in your question. Anyways, your problem has been solved and that's what matters. – Yousaf Jan 01 '21 at 11:40
Missing `)` should be a parse error in this case. – Aluan Haddad Jan 01 '21 at 11:45

Adding implicit return to arrow function using fetch api

1 Answers1