Destructuring Solution: Format String

[00:00:00]
>> Now, we need to keep going, cuz so far, so this would work for, If we have this .split("/")[4]. If we only have one name in our breed, we're done, right? Great, wonderful. But we might have the poodle minus standard problem. So how did we go on and solve the poodle minus standard problem?

[00:00:33]
>> Split it again. Split it again, walk me through it.
>> Let, I don't know, whatever, I just said that they call it splitter. Let splitter = breed4.slipt with a dash in the middle.
>> So all on one line?
>> Maybe split breed.
>> So yeah, in this case, maybe we could do, I don't know, splitBreed or something like that.

[00:01:00]
So if the first one was unsplitBreed, then the second one could be splitBreed, and this is just mine. As you build up your JavaScript foo here, you'll be figuring out your own naming conventions. And if you're working at a company, or working on a team, or a project like an open source project, they will have their own conventions around how you name things.

[00:01:19]
So we're not gonna totally get into that kinda worms, but-
>> It was unsplitBreed.split with a dash in there.
>> With the minus?
>> Yeah, minus, yeah.
>> Great, okay, so now, if we run this on "poodle-standard", split( "-"), we get "poodle" and then "standard". And if we run it on beagle, what do we get?

[00:01:48]
>> Just one value.
>> Just the one value, okay, cool, great. So this works in both cases, except in the poodle-standard case, we have that second thing in the array. Sarah?
>> We can join them.
>> So we could join them, for example, with yeah, walk me through it.

[00:02:14]
>> Could we just add it to the end of the last sentence?
>> Okay.
>> .join, quote with a space between.
>> Space, okay, great. So now we might wanna say it like joinedBreed or something like that, just to indicate that we're doing something different. I'm just renaming these things as we go to try and be as verbose as possible what we're doing, but it would work just fine if we said let x equals, JavaScript don't care.

[00:02:44]
So now, what we've got is let's say poodle-standard.split("-").join(" "), so we've got now is poodle standard. Cool, except what we're ultimately gonna need to do is compare these two, the breeds in our array. And the breeds in our array here and the name that we usually refer to these poodles with is, where is it?

[00:03:12]
It's hard to read, there are so many things, is, Standard poodle is gonna be the name of the breed that we're gonna be looking for in this breed list. So what we wanna do is reverse the order of those two parts. There's lots of different ways we could do this, but any, Anybody, Do something here?

[00:03:46]
I have a question, how about destructuring, can we just flex our destructuring muscle here and destructure to pull some values out of this array? I see some nods. So Paul, you wanna walk me through a destructuring you could do here? Maybe on our "poodle-standard".split("-"), is there a way that I could capture the poodle value and the standard value?

[00:04:19]
>> So this is an array, so, yeah, I mean, So it does matter the order, and so you could do, Yeah, no, it's not coming, this is-.
>> That's okay. So when we-.
>> Could you iterate through the values in the array to sort them descending somehow? What if you have three values in your poodle standard black, I don't know, how would you know, in that case, which value would wanna come first or second, right?

[00:05:01]
>> Yeah, so just by convention, because of the type of data that this API has, we're never gonna have more than two. We're only gonna have what I would call a breed and then a sub-breed. So poodle is the breed and then standard is the variety, let's say, breed and variety, or breed and sub-breed.

[00:05:16]
Or like Terrier West Island, or Terrier Jack Russell, or something like that. Yeah, comment from the chat.
>> We have a suggestion to do .reverse and then .join, and also a destructuring a, b = b, a. So just saving the variable, left side of the equal sign, [a, b], right side of the equal sign, [b, a], sort of swapping the variables.

[00:05:57]
>> Okay, since we don't have values a and b in our example here, I'm gonna just assume that what we're doing is we're trying to assign a and b to the first and second elements in this array, like a, b now as in the original order. And then we're saying we could make an array now by putting them in the other order.

[00:06:18]
Is that right, am I following here? So that now we have an array of once we've destructured, this is how we could destructure this here. And I might suggest maybe that instead of a and b, we give it descriptive names, right? For example, we could say breed and variety, or breed and sub-breed, or whatever we want here.

[00:06:41]
And so then, if we say variety, breed, now we get them in the right order. And then we could do, I think somebody said a join. Yep, we could do a join on that, which if I don't pass it anything, it's gonna put a comma, but if I put a space, now I've got my standard poodle, great.

[00:07:03]
And there was another, somebody said reverse, right? So there is an array, It's not what I meant to type in, array reverse that we have, which reverses an array in place, meaning it mutates the array, that will swap the order of things. So we could also use that, And say, let's say, Okay, "poodle-standard".split("-").reverse.

[00:07:46]
First, I have to capture it. Sorry, what did I name this? Let's just call it, I don't know, splitArray is gonna be "poodle-standard".split("-"), splitArray is poodle and standard. And then if we do splitArray.reverse, now our splitArray, because it was in place, now our splitArray is reversed. And now, similarly, we can do the .join on it.

[00:08:21]
So all of these options are good options, okay? So we can see what we wanted to do here. We have, If we do, If we do our destructuring option, just to flex our muscles here, so I'm gonna wait on the join a little bit. Why don't we take that option?

[00:08:54]
So we're gonna split the breed, I'll call them breed and variety, or subbreed, maybe, is more clear. And then, we could do, we could return [subbreed, breed], put them in the opposite order manually, because we know we're only gonna have two things. But if in the hypothetical example where we had more than two things, reverse could work too.

[00:09:23]
Now, hopefully, we should have a function that does what we want. Now, what about in the case where is only one thing in the array, where it's beagle, let's say? Let's find out. What I'm gonna do since this doesn't really depend on anything, I can just copy paste it into my console here, if it feels like it.

[00:09:49]
Okay, so now, let's try getBreedFromURL, and we're just gonna test it out on the one that we had tried so far, which we should feel pretty confident will work. Okay, "standard poodle", great, that case is handled. Now, we wanna try the example, With beagle. Oops, too many quotes, too many quotes.

[00:10:22]
Okay, so this one, we've got a small problem. What's the problem here?
>> Spacing.
>> Spacing, so we have this extra space at the beginning of beagle, which is there, why?
>> Because of the join.
>> That join, right? So when we did this destructuring, we did let, I don't remember what we called them, but [b, sb] = what was it, "poodle standard".

[00:11:04]
No, sorry, it's gonna be beagle, .split("-"), gosh, [brd, sbrd], okay, so now, breed is beagle, but what is subbreed? What do you think?
>> I think it's empty string.
>> So it's actually gonna be JavaScript's good old word for nothing is here. There is nothingness here, and maybe you didn't intend that, so it's actually gonna be undefined.

[00:11:44]
And then when we join undefined and beagle, With a space, undefined gets stringified into nothing, the empty string, but it's still joined with that space. So, now we need to handle that.
>> Trim.
>> Trim, so there is something called, [INAUDIBLE], there's something called, String.trim, which removes whitespace from both ends of a string.

[00:12:14]
So this is just a new trick we can put in our book of tools, our box of tools. [LAUGH] So what we could do is we can, where's my tab? Call trim, and that will take off any white space that might be on the edges. So that is definitely one way we can do it.

[00:12:38]
We can put .trim here. Okay, so we are flexing a lot of muscles here. Yeah, question.
>> Not a question, just if I were doing this, I probably would have, even before the second let, I would have done an if statement and just checked to see the length of the array.

[00:13:05]
And only done those next two things if the array were greater than 1, the length of it.
>> Right, so we could do a conditional here. We could check if the length of the array is 1, or we could check if subbreed is undefined. Or we could check if there's even a minus in the string before we even split it, or whatever we want.

[00:13:29]
We could do lots of different things here. So now that we're getting closer and closer to real life of trying to program, we are seeing that the possibilities go like this. There's so many choices, there's so many different ways that we can write code, and everybody has their kind of individual style.

[00:13:45]
And JavaScript, unlike some other languages, gives us so many different options for how we work with things that, I mean, in all languages, we have lots of different options. But in JavaScript, it feels like we have even more options than usual, so we have so many choices. And then if you wanna see another way you could do it, you can also check out the finished version.