Javscript upper case function not working

0
votes

Hi just wondering if anyone could explain this syntax error to me. Im mapping over and object and trying to access the values through object.keys

 const getPokemonCard = (pokemonId) => {
    const { id, name } = pokemonData[`${pokemonId}`]
    const sprite = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonId}.png`
    return (
        <Grid item xs={4} key={pokemonId}>
            <Card>
                <CardMedia
                    className={classes.cardMedia}
                    image={sprite}
                    style={{
                        width: '130px',
                        height: '130px'
                    }}
                />
                <CardContent>
                    <Typography>
                        {`#${id}. ${firstLetterUpperCase(name)}`}
                    </Typography>
                </CardContent>
            </Card>
        </Grid>
    )
}

I have figured out a solution but dont quite understand it.

const firstLetterUpperCase = (name) => {
name.charAt(0).toUpperCase() + name.slice(1);
   }

gives me an error

Line 19:5: Expected an assignment or function call and instead saw an expression no-unused-expressions

Search for the keywords to learn more about each error.

but when i remove the brackets it works

const firstLetterUpperCase = (name) => 
name.charAt(0).toUpperCase() + name.slice(1);
4
javascriptarraysreactjsobject
The first example firstLetterUpperCase doesn't return anything. The second uses an implicit return. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - evolutionxbox
In the first example, because you've used curly brackets, you need to explicitly return the result from the function. In the second, because of how an implied return with an arrow function works, you don't. - Andy

4 Answers

1
votes

In the first instance, you have used curly brackets. This means (according to JavaScript ES6 arrow function syntax) you have to provide the return keyword. Otherwise, the function won't return anything.

What happens in the second instance is you have removed the curly brackets so you no longer need to use the return keyword.

Below is a simple arrow function breakdown from a traditional function.

// Traditional Function
function (a){
  return a + 100;
}


// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
}

// 2. Remove the body brackets and word "return" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;
0
votes

This does return undefined since you didn't return it

const firstLetterUpperCase = (name) => {
  name.charAt(0).toUpperCase() + name.slice(1);
}

But when you do this it returns value

const firstLetterUpperCase = (name) => 
name.charAt(0).toUpperCase() + name.slice(1);
0
votes

You need to use 'return' operator when you use brackets for an arrow function.

0
votes

“ arrow functions do not magically guess what or when you want to return “ MDN

If the arrow function is one-lined, we don't need to use the return keyword; otherwise, we need to use it to tell the function which value you want to return.

We need to explicitly use return in this case :

 const greetingfun = (name) => {
    let greeting=`Hello ${name}`; 
     return greeting;
    }

We don't need to use the return keyword in this case :

 const function1 = name => `Hello ${name}`;

** As you can see here, we didn't use parentheses for the argument; since we only have one, but if you have multiple, you'll need to use parentheses around the arguments.*