What is the syntax for arrow functions?

Question: in this code:

fruits.forEach(fruit => console.log(I want to eat a ${fruit}.))

Why do we drop the callback function name?

Why is it not:

fruits.forEach((function(fruit => console.log(I want to eat a ${fruit}.)))

to call as an anonymous function?

you mean the function keyword? Because the arrow functions (=>) allows us to drop the function keyword. Of course you can go for:

function(fruit){ console.log(`I want to eat a ${fruit}.`) }

but you can’t combine function keyword with arrow function. That won’t work.

3 Likes

Hello guys, I’m from Brazil and it’s my first time here.

I would like to know why my code isn’t running:


const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

fruits.forEach(fruit => if (fruit[0] === 'a' || fruit[0] === 'e' || fruit[0] === 'i' || fruit[0] === 'o' || fruit[0] === 'u') { 
  console.log('I want to eat an ' + fruit); } else {
	console.log('I want to eat a ' + fruit);
});
2 Likes

it should be:

fruits.forEach(fruit => {
   /* body of the function here */
})

the if condition should also be in the function body

2 Likes

Thank you so much for helping, sir! It was really helpful.

1 Like

By this point in the course one might presume we have learned about, String.includes() and, String.charAt() which will greatly simplify the above expression…

'aeiouAEIOU'.includes(fruit.charAt(0))

One might also presume that by this stage we have learned about ternary expressions. Since we can include a ternary expression inside console.log, we can write,

fruits.forEach(fruit => {
  console.log(`I want to eat ${`aeiou`.includes(fruit.charAt(0)) 
              ? `an` : `a`} ${fruit}.`);
});

I want to eat a mango.
I want to eat a papaya.
I want to eat a pineapple.
I want to eat an apple.

Granted, we don’t usually think like this on our first draft. It’s usually when we are looking for ways to refactor that stuff like this surfaces.


Edit

Why charAt()?

It returns an empty string if the index is out of range which is less likely to throw an error. It won’t raise any eyebrows in the includes() method. Were the argument to that method dynamic then as a subscript (of the string) there would be an immediate error thrown if it is out of range.

6 Likes

I wonder why my way of doing doesn’t work…

const name = fruits.forEach(each => {
  console.log(each)
})

console.log('I want to eat a ' + name) 

//print
mango
papaya
pineapple
apple
I want to eat a undefined

Even the print looks strange so I couldn’t break it down and see why…

Array.forEach does not return anything, it carries of the function passed in on each item in the array and that is all. I’m guessing you wanted to either log the I want to eat a … In the for each or use .map to create a new array of I want to eat a… And then loop over that array and print each item out.

Could you be more specific? I think I’m getting there…

fruits.forEach(name => {
  console.log('I want to eat a ' + name);
})

Or

const sentences = fruits.map(name => 'I want to eat a ' + name)
for (const sentence of sentences) 
    console.log(sentence)
1 Like

Thank you! I got the first answer, but for the second, I think I will need to learn the const…of… first before I can understand that.

const is just a standard keyword for defining variables, like var and let. for of is like foreach.

Got it! Thank you for saving my time!

I’m trying to test my understanding by offering an explanation:

  • what you are trying to set as a constant variable only exists as a local variable inside of the function performed by “.forEach”
  • due to the limited scope and the nature of the method, what is returned to the variable “name” is only what is returned by forEach (undefined) instead of what is assigned to ‘each’ inside the function. Therefore, when you call upon ‘name’ the function is carried out internally but only ‘undefined’ is returned and assigned to the variable.
  • if you’re new like me, you just have to take into account that all of these methods have their own properties, and some can only be used for displaying data (like this one) and others like .map can be used for manipulating it or saving it as a new data. If you don’t like how the method works, you could just write out you own for loop.

I think I managed to un-jumble this in my head by writing it out, so hopefully it helps. Good luck!
(also if i’m wrong anywhere please correct me)

2 Likes

Hi,

You have to log ‘I want to eat a’ inside your initialization of const name. And call just your function ‘name’ after the first expression. See below :

const name = fruits.forEach(each => {
console.log('I want to eat a ’ + each)
});

name;

Not necessary to relog your function ‘name’ cause it already log something. Just invoke it.

In ur example, you log each elements in ur array, so the console will simply prints each elements that are contained in ur array.