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

JavaScript
1

Tell us what’s happening:

i dont understand what the code is supposed to look like and where its supposed to go.

Your code so far

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


/* file: styles.css */


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

      return `
      <li id="song-${song.id}" class="playlist-song">
      <button class="playlist-song-info">
          <span class="playlist-song-title">${song.title}</span>
          <span class="playlist-song-artist">${song.artist}</span>
          <span class="playlist-song-duration">${song.duration}</span>
      </button>
      <button class="playlist-song-delete" aria-label="Delete ${song.title}">
          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
      </button>
      </li>
      `;
    })

// 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/124.0.0.0 Safari/537.36

Challenge Information:

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

2

Welcome to the forum.

The songHTML is currently like this:

const songsHTML = array
    .map((song) => {
        return `a very long HTML string`
    });

or in short:

array.map((song) => {return `HTML string`}));

which is an array of HTML strings.

Now we have to concatenate those strings in that array into one string using the join() method.

We can achieve that by chaining the join() method to the current map() method, like the given example:

array.map().join();

Also, the instruction asked us to use an empty string as a separator for the join() method.

Read the given example to understand what a separator is:

The join() method is used to concatenate all the elements of an array into a single string. It takes an optional parameter called a separator which is used to separate each element of the array. For example:

const exampleArr = ["This", "is", "a", "sentence"];
const sentence = exampleArr.join(" "); // Separator takes a space character
console.log(sentence); // Output: "This is a sentence"
1 Like
3

i still dont get it…

4

Let’s talk example:

We have an array of words:

const words = ["you", "shall", "not", "pass"];

To make those words uppercased we use map() method:

const uppercasedWords = words
    .map((word) => {
        return word.toUpperCase();
    });

Now, the value of uppercasedWords is an array:

["YOU", "SHALL", "NOT", "PASS"]

To concatenate those words in the array into one string, we use join() method with an empty space (" ") as separator:

const sentence = uppercasedWords.join(" ");

Now, sentence is a string:

"YOU SHALL NOT PASS"

We can also achieve this by chaining methods, skipping the middle step:

const sentence = words
    .map((word) => {
        return word.toUpperCase();
    }).join(" ");

Now, the instruction asked you to:

Chain the join() method to your map() method and pass in an empty string ("") for the separator.

You can use the example above as a reference.

2 Likes
5

The join method is chained TO THE END of the map method.

This is the code already established is an arrow function:
const songsHTML = array.map((song)=>

The code available to change starts with a return and a template literal.
The return and the template literal are all part of the map method.

The map method ends with a closed parenthesis.

The way to chain the join method to the map method is
array.map().join();

***Key Tip: The map method holds the return and the template literal. The join method is added after this. ***

1 Like
6

It confused me too.
.map({all the info for map}).join()

2 Likes
7

you just have to add .join(“”) at the end of the code