Jonas: Over the next few lectures,
we will learn how to work with strings
and so we're gonna be taking a look
at a couple of useful string methods.
Now I could have divided this part about strings
into many more lectures
and go really deep into some topics
but I think it's best to just quickly introduce you
to all the topics here
and then keep using them in future projects
because we work with strings all the time in JavaScript
and so you will see these methods being used
all the time throughout the rest of the course.
Anyway, this is gonna be really fun
so let's get started.
And in this part of the section,
we're gonna leave the restaurant theme behind
and work on stuff related to airplanes and airlines.
So that's something that I really like.
So let's now start by creating an airline variable here
and I'm using TAP Air Portugal.
All right, and if you want, you can use some other one
from your country maybe,
but then you might have to adapt the examples.
So as a plane,
I'm using a string A320.
Okay.
And now let's do some stuff with this.
So just like in arrays,
we can get the character of a string at a certain position.
So for example, plane at position zero
should be A, right?
So let's load this here.
And indeed we got A
and the same of course for all the other letters,
one, two for example.
And so indeed you now get three and two here
but both of them are still strings.
So if we wanted them to be numbers,
we would have to convert them and we can do the same
directly on a string.
So we can just write a string and let's write B727 now,
which is a Boeing and so this works the same.
Okay so now we got to the B,
we can also read the length property of strings,
just like we can in arrays.
So let's say airline.length.
And again we can also do that directly on the string.
Okay.
There you go.
Next up let's talk about methods.
So again comparing strings to arrays here,
strings also have methods
and some of them are quite similar to the array methods.
So one of them is the index off.
So I believe we talked about this one
when we talked about a array.
And so this one works the same way,
so we can get the position in which a certain letter
is in the string.
So let's use r here.
And so here we now get to position number six.
And so let's see zero, one, two, three, four, five and six.
Okay and that's where the six here comes from.
So you'll see that strings are also zero-based right?
And we could observe that already up here.
Now this here will only give us the first occurrence
but sometimes we might need the last one.
And so then we can use lastIndexOf,
lastIndexOf and so that is 10.
So this one was six then seven,
because the space of course also counts as a character,
then eight, nine, and this is position 10.
Alright and we can also search for entire words.
For example, for the occurrence of Portugal,
and so that is at position eight,
and this one is actually case sensitive.
So if I search with lowercase,
then we get minus one,
because this can now not be found
in this airline's string.
All right now, what can we actually do with these indexes?
Why are they useful?
Well, one good use case is to extract part
of a string using the slice method
and a slice method needs indexes as arguments.
And so therefore sometimes it can be very useful
to first figure out the index of part of a string
to then extract that.
So let's see how the slice method works.
So airline and then dot slice,
and let's write four and see the result here.
All right so the result is Air Portugal.
And the reason for that is that this here
is the begin parameter.
So basically it's the position at which
the extraction will start.
And remember that this is zero based.
So zero, one, two, three, and four.
So four happens to be this A.
And so this is where the slice method starts to extract.
And this result that we get here,
so just this here is called a substring
because it's just a part of the original string.
Now this does not change the underlying string okay?
Just keep that in mind.
That's because it's actually impossible to mutate strings.
They are primitives, right?
So if we wanted to use this string
now we would have to store it first into some variable
or some data structure.
Okay, so this method here and all the other ones
that we're gonna talk about always return a new string.
Okay and so that's why we can then lock that result
to the console like this.
Now, besides the begin parameter that we already specified,
we can also specify an end parameter.
So let's try seven and see the result.
And so now we only got air.
Okay so this one is four, then five, six
and seven is the space here.
And so what this means is that the end value
is actually not included in the string.
All right so basically it stops extracting
before reaching index number seven.
And that's really important to keep in mind.
And just as a side note,
the length of the extracted string
is always going to be end minus beginning.
So seven minus four is three.
And so that's the length here of air.
All right, okay.
Now up until this point,
we have always just hard-coded these values,
but ofcourse many times we don't even know the string
that we receive yet okay?
And so let's now try to extract just the first word
of this string here,
but without knowing any of the indexes.
And so that's where this IndexOf,
and lastIndexOf here become really important.
So basically that we do not have to hard code
these values here.
All right so let's try to extract that first word
as I was saying.
Airline.slice
and now we need to figure out the index.
And now if we want the first word we need to start at zero,
but what about the end parameter?
Well we want to extract until this space here basically.
So let's find the index of that.
So airline.indexOf,
and remember that this will be the first occurrence
and so indeed we get top.
All right and now let's do the opposite extracting
the last word, so slice.
And so for the last word,
we want to start at the last space here.
Okay that's why we have lastIndexOf.
So airline.lastIndexOf
and again searching for the space.
And now we don't need the end parameter
because then if we don't specify it,
it will simply extract everything until the end.
Okay.
But actually now the space is also included here.
And so we just need to add plus one,
and now we're good.
So that's the fundamentals of the slice method,
but we can do even more with it.
So let's go again here.
And we can even define a negative begin argument.
Like this for example,
and then it will start counting from the end.
Or actually start extracting from the end.
So these are the last two letters from Portugal.
And finally let's duplicate this one again.
And again I'm using this shortcut here for duplicate.
Okay.
So we can also specify a negative end parameter.
So the beginning is back to positive,
and now the end is minus one.
So let's see.
And so basically we started at position one.
So that's why the T is cut off.
And then the negative end parameter,
basically cuts off the last character.
All right.
And so we will need all of these
different combinations here,
in different situations.
So it's good that you know how to use them,
because you will need them at some point.
Okay.
And now let's practice a little bit,
what we just learned
and write a function that receives an airplane seat
and locks to the console,
whether it is a middle seat or not.
I hope that sounds like fun.
So let's write.
Check,
middle,
seat.
And it is a function which takes in a seat.
And just to illustrate it,
let me start by calling this function.
To check middle seat.
And so typically,
an airplane seat looks like this.
So we have the row as a number here
and then the seat itself,
so that's like the column so to say,
it's then a letter for example a B.
So it starts from the left
and goes all the way to the right side.
And in small planes, like the A320, or the Boeing 737,
we only have six seats in one row.
And that means that B and E are the middle seats.
Let me just write that here.
B and E,
are middle seats.
So just in case you're not familiar
with how these small planes works.
Right.
And that's also not the point here of course.
So basically all we want to do is to check
if the string that we receive,
contains a, B or an E.
And if so, then it's a middle seat.
And let's call this with a couple of different strings.
So 23C
and 3E.
All right, so what we need to do here is basically
take the last character of the string
and test whether it is a B or an E right?
So let's get that letter from the seat.
Now we'll just call it S for seat again,
but I cannot repeat the same name here.
So how do I do that now?
Well to extract part of a string,
we already know we use the slice method
and how do we take the last character of a certain string?
Well, we use minus one as the begin character.
And then as we saw up here,
it will start counting basically one from the right side.
And now it's very easy.
If S equals B
or if S equals E,
then let's log to the console,
you got the middle seat,
which is the one that no one wants.
Well, let's add an emoji here.
Let's say this one
or else
you got lucky,
just any emoji here,
just to make it different
and I think we are good now.
Let's test it.
And so indeed this here contains the B at the end.
And so therefore it's a middle seat,
the same for this one
and this person with this seat got lucky.
All right and that's how we extract parts of strings.
And that's something really important to do.
So maybe if you'd like,
you can play around with this some more,
maybe come up with your own example.
Now before we move on here,
let's just stop for a second
and understand why all of this actually works.
So we know that strings are just primitives.
So why do they have methods?
Shouldn't methods only be available
on objects such as a race?
Well that is actually true.
However, JavaScript is really smart.
And so here is how this works.
Whenever we call a method on a string,
JavaScript will automatically behind the scenes
convert that string primitive to a string object
with the same content.
And then it's on that object where the methods are called.
All right and this process is called boxing
because it basically takes our string
and puts it into a box
which is the object.
So basically what happens is this.
So what JavaScript does,
is to call this string function here.
Okay.
And so now you'll see, that this string here,
looks a little bit more like an object.
And we could take a look at this here.
And so you see here, all of these methods,
like slice that we just use.
But this is beyond the scope of this lecture.
We will learn what this is a little bit later.
But what matters is that this indeed is now an object.
So you see it is an object.
And so this conversion here
is what JavaScript does behind the scenes
whenever we call a method on a string.
And then when the operation is done
the object is converted back to a regular string primitive.
Okay.
And in fact all string methods return primitives.
Even if called on a string object.
So let me demonstrate us here as well.
Just really quick.
And actually we want your type off.
And so the result of all of this,
is then back to being a string.
Okay, but don't get confused by this.
This is just a theory explanation
behind why all of this works in case you're curious.
And I hope you are.
Great.
But now let's move on to the next video,
where we will continue working with strings.