Check out a free preview of the full JavaScript: From First Steps to Professional course

The "Destructuring Exercise" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to follow TODO number two of the doggo quiz project and complete the getBreedFromURL function with destructuring and the .string() method.

Preview
Close

Transcript from the "Destructuring Exercise" Lesson

[00:00:00]
>> We're gonna go back to Doggo Fetch and go down to TODO 2. And what we're going to do, is complete another little utility function that we need. What this utility function getBreedFromURL does, is it's gonna take in a string representing a URL that has a format like this.

[00:00:29]
It's gonna be like https://images.dog.ceo/breeds/, and then some dog breed, and then some image name that we have no idea what that part is gonna be, in this example it's poodle standard and then and no2. Those are gonna be whatever we know. What we want, is to return the breed name as a string that we can use like standard poodle.

[00:01:02]
So poodle-standard becomes standard poodle. And what we're gonna also have to contend with here is that sometimes, so the URL is always gonna start with https://images.dog.ceo/ breeds/, but some of these dog breeds, if we look up in my breeds list, some of them have multiple words, and others, like Beagle, do not have multiple words, unlike poodle standards.

[00:01:43]
So sometimes It's just gonna be one word and then some other blahd, blah, blah, who knows what? So what we need to do is, we need to be able to handle either the case where it's just one word or where it is two words separated by a minus.

[00:02:05]
And what we want, in the first case, we want our function to give us standard poodle, and in the second case, we want beagle. So, this is the type of data processing where we might find ourselves doing, sometimes we get data out in a certain format and we need it in a different format.

[00:02:27]
And in this case, it's text data and we need to actually parse or process this text data. There is a handy string method that we can use here that's gonna be useful, which is split. Have folks run into split before? Maybe not. So what split does, is we give it a character, like here I'm giving it a space character.

[00:02:51]
And it's gonna return an array of the different strings that it gets when it takes this string and splits it on the delimiting character that we give it. So, if we go to our console and I run Anjanette Sophia Vakil.split, we get an array with Anjana as the first thing, Sophia's the second thing, Vakil's the last thing.

[00:03:20]
And then if I use my destructuring on that, my goodness. I'm going to be able to pull out individual parts of that array. And then the character that I give it matters, right? So, if I have this separated by spaces and I say split on, I don't know, minus, I only get one thing cuz there's nothing in there to split.

[00:03:55]
There's no minus sign to split on or no hyphen in this case to split on. So split is gonna come in handy here, and destructuring is also going to come in handy. So our mission, should we choose to accept it, is write this getBreedFromURL function that's going to take in a URL in either one of these formats, either with a two-word breed separated by one hyphen or a single-word breed with no hyphen.

[00:04:23]
And we wanna get out just the breed name. And in the case of the two-word breeds, it reverses them, it goes poodle-standard instead of standard poodle. So this is our mission, should we choose to accept it.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now