Adding a semicolon after return statement in arrow function produces error!?


#1

This is from page three in Learn JavaScript: Iterators. I got an error from this portion of my code:

let animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

// Create the secretMessage array below
let secretMessage = animals.map(animalsElement =>
  animalsElement[0];
);

console.log(secretMessage.join(''));

The error goes away when I remove the semicolon after animalsElement[0]. However, this is no more syntactically correct, so what is the error for? We learned in page 9 of Learn JavaScript: Functions that arrow functions can be refactored to produce a concise body, with no braces, parentheses, or return statement. They did not say anything about the semicolon and it was not omitted in that example of the refactored arrow functions.

Keep in mind that the block I pasted is the refactored version of the code I wrote correctly for step 1 in this exercise. Here is the function form, the non-arrow-function form, for step 1:

let animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

// Create the secretMessage array below
let secretMessage = animals.map(function(animalsElement){
  return animalsElement[0];
});

console.log(secretMessage.join(''));

#2

Semicolon terminates a statement, but you can’t have statements where you put your semicolon, you’re essentially doing this:

console.log(5;);

#3

I don’t understand how your example is related to my case. Can you elaborate please why adding a semicolon after my arrow function statement is like adding a semicolon after the 5 in your console.log statement?


#4

Your function is an expression, I replaced it with a simpler expression (5) to make it more evident what it is you wrote.

You can think of syntax as patterns that code has to match. No such pattern.
The body of your arrow function can’t contain statements, and there also can’t be statements in the argument list (argument list to map)


#5

Ah, I see now. Thank you. I take it that the way I wrote my arrow function, I can only have one expression in the body as this form of the function automatically returns the expression. No need for a statement, hence, no need for a semicolon. However, I assume without testing, if I add braces around the expression, then I have to add the return keyword and that’s when it becomes a statement and then I may add the semicolon. :+1: