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

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

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"

i still dont get it…

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.

1 Like