Learn Basic String and Array Methods by Building a Music Player - Step 82

JavaScript
1

Tell us what’s happening:

Ok, I’ve read a ton on the arrow function and how it works. I have been able to use them a few times during this project, but really, I still don’t understand the premise. Take the following, for example:

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

In this case, why is the arrow function necessary? Wouldn’t this work?

const result = words.filter(word.length > 6);

If anyone can explain why this isnt redundant, it would be much appreciated.

Oh, and help on my code on the project would be great as well :slight_smile: .

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

const deleteSong = (id) => {
  userData?.songs.filter(song.id !== id) (song)
}

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Learn Basic String and Array Methods by Building a Music Player - Step 82

2

I didn’t understand your question. These two lines of code are identical?

3

The filter method needs a callback function. You haven’t given it one.

4

const result = words.filter(word.length > 6);
Oops! I meant this. I’ll edit it now.

5

Yes, I ended up solving the problem. My main concern is that I still don’t understand the purpose of an arrow function. To me, adding:

(word) =>

in:

const result = words.filter(word.length > 6);

is simply redundant.

6

“The purpose”?
Like, why was it invented?
You may need to google that if you are interested in a history lesson.

7

Your code in the second example does not contain an arrow function though. So it would fail to work like an arrow function does.

8

No, I mean what use does it have? Why do we use it? What effect on the code does it have?
I have read several other posts on this forum about the arrow function and I still don’t understand any thing about it. This ended up being the correct answer to the problem in this case:

userData.songs = userData?.songs.filter((song) => song.id !== id);

But I still don’t understand why add the ‘(song) =>’ ?

9

If you want to know why we need the arrow, it is because without it, the code you wrote is not a function. It is just a expression.

A function is something that can be packaged up for the purpose of using it later. An expression, (the code you write without the arrow) is just something that will get interpreted immediately.

So in the case of filter, if you pass a comparison expression, what you are actually passing is the result of that expression, ie. a true or false. That is not useful.

A function does some behaviour. It is not evaluated by the JavaScript engine when the code is read. It gets evaluated only when it is called (later). In the case of filter, it gets evaluated when we invoke it on each item in the array.

10

Thanks! That’s very helpful. Sorry for the late response, just ate lunch. How should I make sense of this when trying to write it into my code? When do I know to add something like (song)? The comparison was between song.id and id, so why should (song) be involved in this case?

11

If you mean, when do I know that I need an arrow function or a function, well that will depend on what you are doing. If you forget that filter needs an arrow function, you can look it up (and the documentation on the MDN website will say that)