indexOf

[00:00:00]
>> We have established that each character in a string gets a particular number kind of assigned to it, either to the letter itself or to kind of where that letter begins in the string. And there is a name in JavaScript and in computer science for the numbers assigned to positions of these characters.

[00:00:21]
Does anybody know the word for that, a number given to a position? Yeah.
>> It's an array.
>> Okay, so arrays also have these numbers assigned to them. We're gonna talk about arrays a little bit later. So this is something that strings and arrays have in common, is the things inside of them each get a number.

[00:00:39]
And those numbers, just as a point of trivia, are called?
>> In chat, they're saying index.
>> Index, exactly, so the number given to each thing inside of a more complex thing [LAUGH] when that thing is ordered is called an index, and plural indices, right? So we often talk about, what is the index of a particular character in a string?

[00:01:00]
Or, as we're gonna see later, what is the index of a particular element or value within an array? So when we want to work with strings, we use these indices a lot. If we want to ask JavaScript, JavaScript, dear JavaScript, please tell me, in this string ALOHA, what is the first character?

[00:01:23]
I can do that using this magical invocation here, square brackets at the end of the string with a number inside of them. Where that number represents an index of the character that I am asking JavaScript for. So in this case, if I asked JavaScript, what is the character at index 0?

[00:01:45]
In other words, if I have the string ALOHA and then in square brackets [0], it's asking, what is the first character in the string? And so this is going to give me, any guesses?
>> A
>> A, so we said that in our, We said that in our strings, the first character, although it sounds sort of counterintuitive if you're not used to counting from 0.

[00:02:12]
As humans, we often start counting at 1. In JavaScript and in lots of other programming languages, we start counting at 0. So 0 is the first character, the character at index 0. Okay, what if we wanna ask it, what is the third character in the string? Well, again, because we started at index 0, we need to kind of always be mentally subtracting 1 from the order, the number of things into the string that we're looking for.

[00:02:40]
So in this case, if we're asking the third character, that's gonna be the character at index 2. So again, we have A is at index 0, L is at index 1, O is at index 2. So if I type in ALOHA[2], I expect to get and I do get O.

[00:03:04]
Yeah, we're all on board, a surfboard, in this case, [SOUND]. Okay, [LAUGH] all right, so how do I ask JavaScript, what is the index of a specific character in the string? Let's say I wanna find out, what is the index of the L? Well, I have a nice little spell, I can use indexOf, it's handy.

[00:03:28]
Sometimes things are named in a way that we expect, sometimes they are not. In this case, they're named in a way that we expect. So I can ask JavaScript of a particular string. I can do .indexOf, and then in parentheses give it the character that I'm looking for, and it will tell me the index where that character appears.

[00:03:49]
So let's try it out. What do you think is going to be the value of "ALOHA".indexOf("L")?
>> 1.
>> We would expect 1, and it is indeed 1. Beautiful, now, what about this one, "ALOHA" .indexOf("A"). What do you think it's gonna be?
>> 0.
>> 0 is a good contender.

[00:04:14]
We do have an A at index 0 as we saw before, cuz we asked it ALOHA(0). We know that that's A, but there's also an A at the end of the string, which would be index?
>> 4.
>> 4, exactly, so which one?
>> It takes the average.

[00:04:30]
>> [LAUGH] The average, maybe. Perhaps, let's find out. So the way we can find out, as always, is by tinkering with things in our console, and it indeed returns 0. So indexOf is going to find with the first thing like this that I'm looking for. And we're gonna see indexOf works on arrays too, so we're gonna look at that later.

[00:04:51]
But in strings, it's going to return the index of the first appearance of this character in the string. So keep in mind that if you have multiple of the same character, you're only gonna find the first one with indexOf. Now, what if I ask it to tell me the index of a character that's not in the string, like Q?

[00:05:13]
For example, if I ask "ALOHA".indexOf("Q").
>> Null.
>> Maybe it's gonna be null. That might make sense. Maybe it's gonna be, Dear Anjana, you don't know what you're talking about. Stop asking me for stuff that doesn't exist, unlikely, cuz how does it know my name? Tracking, no, just kidding.

[00:05:33]
[LAUGH] But because it's JavaScript, sometimes stuff is interesting and this is one of those cases. So let's find out. Let's just do it, let's find out what it does. -1, so this is just kind of a convention in JavaScript that when I ask for the index of a character or an element that doesn't exist in the string, I'm gonna get a -1.

[00:06:02]
That indicates that this character is not present in the string. And later in life, in our JavaScript lives, we're going to see how we could use that information to make certain decisions or what have you. But basically, if you get a negative number, -1 is the only negative number you could get, as far as I know, [LAUGH] that means this string does not appear.

[00:06:24]
It's outside of the string. It's in the negative world. Yes, question.
>> Is this case sensitive?
>> Great question. Is this case sensitive? Let's find out. So for example, instead of asking "ALOHA".indexOf("A") ,or let's use L cuz there's only one of them. Let's ask "ALOHA".indexOf("l"), -1. So the answer to the question, is it case sensitive, is, sure is, yes, indeed.

[00:06:52]
Characters like A and lower case a are separate. JavaScript doesn't even necessarily, well, it does kind of know that they're somehow related, but it sees them as different things. But in some cases, like if I ask for a lowercase q, that's not in the string either, so it might give us the same result.

[00:07:11]
Now, strings since they're made up of multiple characters, means that they can contain shorter strings within them. So for example, our word ALOHA also has the word HA [LAUGH]. Like you're making a really ridiculous statement, and I'm saying, ha, negative indices, what a concept, right? So we can ask JavaScript whether or not a string includes another string using this spell, includes.

[00:07:44]
So this is a question that we're asking, dear JavaScript, does the string ALOHA include the string HA? JavaScript is gonna respond with an answer. This is a little question, what type of answer is JavaScript gonna give me? What type of value do you think this returns?
>> Boolean?

[00:08:07]
>> Boolean, nice guess, true or false. It's a yes or no question, right? This string either does or does not contain this other string. So we're gonna get a Boolean out from includes, that tells us, yes, true, this string includes that other string, or false. So in this case, we would expect what value for "ALOHA".includes("HA")?

[00:08:30]
True, yes, there is HA in there. And likewise if I asked, does ALOHA include LOL? No, almost, but no. Almost doesn't count in JavaScript, [LAUGH] only in horseshoes and hand grenades. So the includes spell here is something we can ask of a string that gets a Boolean yes or no value of whether or not some other substring is part of it.

[00:09:02]
Similarly, or sort of as a more specific case, we can also ask whether a string begins with some other string. Anybody happen to know the spell or the question or the name of the thing that I could ask JavaScript? If we had includes is what tells me whether or not a string includes another string, I wanna find out whether this string starts with some other string.

[00:09:26]
I can ask.
>> Like a left.
>> Does it start with this thing? So startsWith is this spell we can use here. Yeah, this is just trivia in case you've already seen this before. So startsWith is another question I can ask of a string that similarly is gonna return a value of what type?

[00:09:44]
Boolean, yes or no, true or false. So if I ask "ALOHA".startsWith("AL")? True. "ALOHA".startsWith("HA"), False. So these are some fun little [LAUGH] questions we can ask JavaScript. Now, it seems kind of trivial with a short string like ALOHA, what have you. But this can end up being quite useful when you end up working with a more complex program that maybe has to manipulate text or you wanna be checking the value for certain strings.

[00:10:17]
Some of these spells are gonna come in handy as you're working with strings. Okay, now, if we know that strings can contain other strings, then that means we can also ask for an index not just of a single character, but of an entire substring. And we can actually use our good friend indexOf with a longer string, a substring instead of just a single character.

[00:10:47]
So earlier we saw "ALOHA".indexOf("H"), let's say, or index of A, or whatever individual character. We can also ask for the index of a substring, so another string that has multiple characters. So what do you think this is going to give us? Let's go back to our drawing of the indices related to the string.

[00:11:13]
What do you think "ALOHA".indexOf("HA") is going to tell me? The question is, where does the substring HA begin in the string ALOHA?
>> 3.
>> So I heard the guess 3. I see some nodding. I can't see if the chat is nodding, but I'm just gonna feel the nods.

[00:11:36]
[LAUGH] All right, let's
>> There's 3s the chat
>> There's 3s in the chat. Let's double-check. Indeed, it does. And this is why, to go back to our drawing, I said that sometimes it's helpful to think about these indices not as corresponding to a particular character, as in the green numbers at the top here, but to a particular position in the string.

[00:12:01]
So both the character H and the substring HA begins at position 3, if that makes sense. How about "ALOHA"indexOf("LOL")? Now, we already asked if ALOHA includes LOL, and JavaScript said, false. So what do you think index of LOL is going to give us? Any guesses?
>> -1.
>> I heard -1.

[00:12:29]
Let's find out. Boom, yes. So same rules as for a character that doesn't exist in the string. Even though we have an L and an O in ALOHA, the substring LOL does not exist, so the whole thing returns -1. Cool? So cool. We know numbers corresponding to things inside of a string.

[00:12:53]
All right, what else can we do with strings? How about we add them together? [LAUGH] So the plus, plus is a thing we're gonna talk about later. Plus can be used to connect strings together. If I use a + on "ALOHA" + "!", this is going to give me a combined string that sort of smooches the two strings together into a new string that has both of them, just one right after the other.

[00:13:28]
So "ALOHA" + "!" is ALOHA!, more enthusiastically. [LAUGH] So this is something we're gonna come back to a little bit later when we talk about operators. But plus is an operator that works on strings to, you can also hear the word concatenate strings together, meaning, squish them together.

[00:13:51]
But why am I yelling so much? Why is there so much yelling? And of the Schitt's Creek ladies want to know why I'm raising my voice. And so there's another fun tricks that strings can do, which is, they have a spell called toLowerCase. "ALOHA".toLowerCase is going to give me, any guesses?

[00:14:13]
>> Lowercase aloha. aloha, exactly, [LAUGH] so we said earlier that JavaScript sees the character capital A and the character lowercase a as different characters, that is true. But it does kind of know a little bit about the correspondence between lowercase and uppercase characters. So there is a method or a spell, an invocation, I can ask JavaScript to give me the lowercase version of a string by calling string.toLowerCase, and then parentheses.