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

The "Destructuring Solution: Return Breed" 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:

Anjana walks through the solution to returning the unformatted breed name from the given URL.

Preview
Close

Transcript from the "Destructuring Solution: Return Breed" Lesson

[00:00:00]
>> So we are wielding our many tools in our increasingly large JavaScript toolbox. And in this case, we're wielding a lot of string related methods, and we wanna try out some of our destructuring in order to create this little utility function. So once again we want to take any URL, which has this images.dog.ceo breeds and then either a two part name with a minus in it or a one part name.

[00:00:30]
And we wanna return either the one part name or the two part name but split up the reversed so that it's all one string. Okay, let us put our heads together and figure out. There are many different ways that we could do this, but let's figure out at least one way that we can get through this.

[00:00:49]
So would anybody like to share with me where they started off? OJ, you said you got
>> I say let url equal, and then I'll put the url.split.
>> Okay, so we're, We're doing url.split here, and then-
>> [COUGH] And then within double quotes I have a slash.

[00:01:20]
>> A slash, okay.
>> Yes.
>> So one thing we could do is we could split this URL on the slashes of which there are many here. And let's just in the we do just wanna quickly see. What that would do, split on slashes.
>> Yes.
>> So this gives us like a big long array with lots of stuff.

[00:01:48]
>> [LAUGH] to URL and square parenthesis for to pull out the name
>> Okay, and then we, yeah and then we look at this array, so the first part we know that the chunks of meaning between these slashes are gonna be pretty much consistent. Because we know the first part all the way up through breeds is gonna be consistent.

[00:02:11]
So then we just count, okay, 0, 1, 2, 3, 4, is gonna be where the dog breed comes up.
>> Yes. Okay, now,
>> So then I gonna go URL 4, position four in the array, right? To get the name of the dog or the breed of the dog

[00:02:28]
>> And then do you
>> Well, [CROSSTALK] let's, I think let's flitter equals Url 4, and then I do another split on that as well.
>> Okay
>> [LAUGH].
>> Okay, so lemme maybe call this, I don't know, I could call it the-
>> Splitter is what I call it.

[00:02:48]
>> Splitter, okay, we could call it, maybe, so again, naming things is subjective, and whatever, I might. In my mind, splitter would be for example this thing like the character that I pass in, that I'm splitting on, so I might just say, I don't know.
>> Url
>> Breed part or something.

[00:03:09]
>> Sure.
>> Or something like that or breed Raw text or something like that, but yeah, we can call it whatever we want. Now can I ask about this line here? So URL Was the name of the string passed in to our function, that was the name of the parameter that was already coded into this starter project here.

[00:03:42]
So I might suggest that just so we don't kind of confuse ourselves about what we're talking about when we're talking about a URL. That we maybe named this to, I don't know, URL array or URL split or URL parts maybe, or something like that. Because it's going to be this array of all these different things.

[00:04:02]
So I might just suggest we try to think about our naming here to make sure I'm missing my semicolons. To make sure that we are naming it something that we're gonna be able to when we read this code later. After we've forgotten when we wrote it and what we were doing in it or when we show it to our teammate or our friend or whatever, that somebody else would be able to sort of guess at what's going on here.

[00:04:25]
Okay, great, so this, so far this gets us the
>> Poodle-standard
>> Yeah, poodle- standard, okay, cool. Did anybody do anything different for the beginning of this function? Yeah, just for variety sake not because this is totally valid.
>> I would have just combined those two, those two don't need to be two separate statements use two

[00:04:53]
>> Okay
>> Url.split with slash at the top and then in the square brackets 4
>> So we can also, we don't have to necessarily capture it as an intermediate value, we can also do that. And then, what did you name this?
>> Just temp name.
>> Okay, so temp or something like that.

[00:05:15]
Or you could call it I don't know, split breed or something, whatever you want. So we can call it, let's call it maybe we'll call it unsplit breed, because it might be like poodle minus standard, which we still need to split up and move around for example. I don't know, names are hard, so it's up to you.

[00:05:43]
So these are totally valid. Any other options? There are several but just curious. Anything from the chat?
>> Little outside of the scope, but image URL equals URL.search, and then the regular expression slash breed slash I.
>> Okay, yeah, so we are using now string.search here, which is doing something a little bit fancy that we haven't looked at before.

[00:06:18]
Which is using what's called regular expressions, which are very very powerful tools for matching certain patterns and text. So we haven't covered this, but yes, if you know regular expressions, maybe from other languages or things that you've learned and you're comfortable with those, you could totally use that.

[00:06:37]
We're gonna maybe leave it out of our example code because it's not something we've covered yet, but great. Okay, wonderful. There's another thing we could do that is in the finished example, which is to split on a longer string. For example because I know that breeds is a word that's gonna be in my URL.

[00:07:05]
I could even split on that or on breeds slash, and then get two different parts. And then maybe take the second thing of that and split on the slash or what? So there's lots of different ways that you could do this. So our way of splitting on the dashes is totally valid because then that means that we can pull out just the poodle minus standard.

[00:07:28]
Great, okay.

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