Code-Along: Remix Your Favorite Song with .map() in JavaScript

Hello and Welcome to Mari World (You'll learn more about this later)! This is my third blog since starting the software engineering bootcamp at Flatiron School, but my first blog on Dev.to, so I'm pretty stoked to finally contribute to the community. Just a tidbit about myself: I was born and raised in Chicago, IL, I graduated from a small liberal arts college in Massachusetts in 2014 with a degree in Psychology, worked at a bank for a brief stint, pivoted into a music career that saw its success and failures, and eventually I took a dive into software engineering. If you're interested in learning more about my journey, feel free to check out my article Fail Forward: How a Starving Artist Failed into Software Engineering.

While I'm still super new to the world of programming, I've already started to find ways to blend it with my passion for music. I'm so excited about how much I've been learning and as expected, each week of bootcamp is increasingly more challenging as we ingest new material in abundance. As this time breezes through, I'm making sure to stay mentally elastic and open to learning new things. At the time of this post, we've just made a sharp transition from object-oriented programming in Ruby for our backend curriculum to the fundamentals of JavaScript, where we're learning more frontend. This has been a challenge indeed, but not one unmet. Though I'm very novice in my own understanding of JavaScript, here's a word of advice to anyone learning a new language: Take it slow and find elements of familiarity. We're going to live that advice by doing a code-along that will allow us to add a featured artist name on to a list of songs (by my favorite artists). Quick disclaimer: you must have Google Chrome for this code-along to work. Also, if you get comfortable with this code-along, feel free to plug in your favorite artists/songs. Let's get started!

To start, I'll talk in a bit more detail about what we'll be doing. We'll be using something called the .map() method which allows you to take an array (or a list of items) -  "[item1, item2, item3…]" - and manipulate or transform each item in that list, returning an array with those elements transformed- "[itemOneTransformed, itemTwoTransformed, itemThreeTransformed…]".

For our purposes, we'll just say that we'll be using the .map() method to remix some of my favorite songs, by adding my artist name "Mari World" as a featured artist on a list of songs.

Below: Array of Objects in JavaScript OR Array of Hashes in Ruby (sans 'const' variable keyword )

const songs = [
    {artist: "Kendrick Lamar", title: "Element", album: "DAMN"},
    {artist: "Erykah Badu", title: "On&On", album: "Baduizm"},
    {artist: "D'Angelo", title: "Chicken Grease", album: "Voodoo"},
    {artist: "OutKast", title: "Roses", album: "Speakerboxxx/The  Love Below"}
]

If you look above, we see a data structure that can be called an "array[] of hashes" in Ruby, or in JavaScript, an "array[] of objects" stored into a variable noted by "const songs." The object in the array is wrapped in curly brackets{} and consists of key-value pairs that represent information about the song such as the {artist: artist name, title: song title, and album: album name}- and there are four of them, one for each song. We'll iterate and map through each one to add the featured artist name to the song (Song(Remix) ft. ftArtistName), making it a remix of the original array of objects. Let's get our hands dirty with some code.

Open Your Console

1. We're going to open our Chrome console by pressing command-option-i on your keyboard and select "Console". You should see a white or dark screen like this:

Copy-Pasta the songs Array of Objects

2. Let's copy and paste the songs array of objects (below in the black box) into your console and press enter.

const songs = [
    {artist: "Kendrick Lamar", title: "Element", album: "DAMN"},
    {artist: "Erykah Badu", title: "On&On", album: "Baduizm"},
    {artist: "D'Angelo", title: "Chicken Grease", album: "Voodoo"},
    {artist: "OutKast", title: "Roses", album: "Speakerboxxx/The  Love Below"}
]

Now, the console recognizes this array of objects that may be used for something. If you're comfortable at some point, you can replace the artist "Kendrick Lamar", song "Element", or album "DAMN" information, but be sure to keep them in the quotations as you change them or it'll break the code.

Load Up .map() Method

function remixTheSong(songsObj){ 
   return songsObj.map(function(song){
     return `${song.artist} - ${song.title}(Remix) ft. Mari World`}
    )
};

3. Now, we're going to take this songs array of objects above and do something with them(remix them) with what we call the .map() method. Copy and paste the code above into your console and press enter to store it! I want to break down what our remixTheSong function will do.

• We have a function() called "remixTheSong" that will accept a songs array of objects "songsObj" as an argument (Hint hint: Our songs array of objects that we posted in our console will get used for this). 
• Moving along the 'return' keyword will return an iterated-through array of objects that are made possible through .map().
• Inside of the parentheses of the .map is a callback function - function(song) -  that will execute our remix code.  -This remix code, initiated by the bracket after function(song) says in plain English "take EVERY object in the song array, list the artist - ${song.artist} - and the song ${song.title} - and finally, add the phrase "(Remix) ft. Mari World", and return it - thus remixing the song!

At this point, your console should look something like this:

If this is not the case, just type "songs" into your console, press enter, and click the down-arrow under songs to reveal your array of objects.
For demonstration purposes only, I've attached the Ruby map method below as it serves the same purposes as far as transforming information in an array. It does the same thing: the method "remix_the_song" takes in a songs array of hashes, it maps through them, and for each |song_hash|, it will transform it by giving us the artist name #{song_hash[:artist]}, song title #{song_hash[:title]}, and adding our remix tag " ft. Mari World".

**For Demo Purposes ONLY - Don't use this code in the console! **
**Method in Ruby**
def remix_the_song(song_aoh)
   song_aoh.map do |song_hash|
   "#{song_hash[:artist]}- #{song_hash[:title]}(Remix) 
      ft. Mari World"
   end
end

RUN THE REMIX IN THE CONSOLE

1. Now that you have the songs array of objects, stored in the console, as well as the remixTheSong function, it's time to run the remix. In your console, type(exactly how you see it or copy-paste):

remixTheSong(songs)

Now press ENTER. WALAAAAA!!!! Pictured below, you should see the transformation we made! What you just did is called the function remixTheSong() and passed in the (songs) array of objects and essentially, transformed EACH element (pun intended) to print out the existing artist with song.artist, add "(Remix)" to the song.title and "ft. Mari World" or if you were a lil code-savvy, "ft.Your-own-artist-name". If you have any trouble implementing this or mess up, simply refresh your browser and repeat the steps.

I really hope you enjoyed this exercise! All in all, there's so much creativity that goes into and comes out of coding and I'm here for all of it. It's so liberating to learn the different tools through which you derive insights and play around with code in different languages. While I found it quite jarring to be learning about the different data types in JS in one hour, then the next hour implementing them in full-out JavaScript functions, it's been great staying on my toes. I'm sure there are silver linings and connecting paths in all of this if you open your mind to seek them out. Maybe I'm just an optimistic beginner in the world of programming. Call it what you want, but knowing that I can map out my joy in learning new things and solving problems while blending them with my passions brings me a lot of optimism for the world that I can build out for myself. Hopefully, you can discover some things for yourself whether you're totally new to Ruby or JavaScript or any other language for that matter. Now, go do your thing! And we outttttt!

If you have any interest in exploring the intersections of creativity, artistry, and coding, or just engaging discourse - feel free to reach out, drop a comment! Expect to hear/see more from me! You can connect with me on IG @mari.world, Twitter @mari_world_, GitHub and LinkedIn. Bless!