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

JavaScript
1

Tell us what’s happening:

Alright I’ll be honest, I haven’t the slightest clue on how to use arrow syntax during a callback function

Your code so far

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


/* file: styles.css */


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

const deleteSong = (id) => {
  userData?.songs.filter(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/122.0.0.0 Safari/537.36

Challenge Information:

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

2

The syntax would be the same, except its something called an “anonymous function expression.”

In this example:

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

if you remove the const delete song = part, what your left with is an anonymous function expression. That is what you will pass in as the callback function in .filter() (except the parameter should be song and not id, and the code within the function will be different.)

3

Hmm, it tells me to not mess with the Const DeleteSong variable, so it has to stay the way it is. What I think it is asking of me is to do an arrow syntax callback, but I am unsuer how to do arrow syntax when it is already inside of a function.

4

The arrow function syntax is like a shorthand-syntax of a regular function.

Example:

function sayHi(){
  console.log("Hi!");
}

This is the same to:

const sayHi = () => {
  console.log("Hi!");
}

suppose that the function sayHi above will only be used once. You can use it there and that’s it.

So instead of this:

let btn = document.getElementById("btn");

btn.addEventListener("click", sayHi);

You can do this:

let btn = document.getElementById("btn");

btn.addEventListener("click", () => {
   console.log("Hi!");
});

And in your case the .filter() method takes a callback function with a parameter of each element’s value.

Example:

let arr = [1, 2, 3, 4, 5];

let filteredArr = arr.filter( (num) => {
   return num % 2 === 0;
});

console.log(filteredArr);      // output: [2, 4]

This is equivalent of having a separate function for example called evenNum and then use it in your .filter() method:

const evenNum = (num) => {
   return num % 2 === 0;
}

let filteredArr = arr.filter(evenNum);
1 Like