Lesson 19
Review of the JavaScript Things We Learned (Part 2)
Summary
NBK Tech World - JavaScript Review Summary
Welcome back to NBK Tech World! In this lesson, we will review topics covered so far, including string concatenation, interpolation, functions, and string operations.
String Concatenation & Interpolation
-
String Concatenation:
- Used to combine strings using the
+
operator. - Example:
"hello" + "world"
results inhelloworld
. - Make sure to include spaces where necessary.
- Used to combine strings using the
-
String Interpolation:
- A feature from ES6 that allows easier string combination using backticks (
`
) and${}
for variables. - Example:
`hello my name is ${name}`
simplifies the process without needing to break and concatenate strings.
- A feature from ES6 that allows easier string combination using backticks (
Functions
-
Functions allow for code reuse by defining a block of code that can be executed multiple times.
-
Defining a Function:
- Use the
function
keyword, followed by the function name and parameters. - Example:
function sayHello(name) { console.log(`Hello ${name}!`); }
- Use the
-
Calling a Function:
- Invoke the function by its name and pass the appropriate arguments.
- Example:
sayHello("John");
outputsHello John!
.
-
You can also add more parameters:
function sayHello(name, age) { console.log(`Hello ${name}, you are ${age} years old.`); }
String Operations
-
Changing Case:
- Use
.toUpperCase()
to convert a string to uppercase. - Use
.toLowerCase()
to convert a string to lowercase.
- Use
-
Slicing:
- Use
.slice(startIndex, endIndex)
to extract a portion of the string. - The end index is not inclusive.
- Use
-
Replacing Substrings:
- Use
.replace(searchValue, newValue)
to replace part of a string. - For global replacements, use a regular expression with a
g
flag.
- Use
Conclusion
This review encompasses important aspects of string manipulation and function definition in JavaScript. These concepts are foundational for continued learning in programming.
Thank you for watching, and see you in the next session!
Video Transcript
Welcome back to NBK Tech World! Let's continue our review of what we have done
so far. Remember if you already feel comfortable with everything we've did,
we've done so far feel free to skip this lesson. Alright so we finished our last
video talking about revealing the operators we talked about the triple
equals, strike equality, talking about striking equality and all the other
operators greater than or lower, less than or equal to etc. So now let's review
what we did in terms of string concatenation and interpolation. So we
learned about string concatenation to combine strings together. So if you have
a string hello and you want to add this guy to another string you can use the plus
another string. For example if I have the string with the word hello and I have
another string with the word world and you want to combine them you can use the
plus operator and that will concatenate this with that. Notice if I do this way
there won't be any space between the words so they'll be all glued together.
So you actually have to place a space either here or here okay. Let's do it in
a world. So keep that in mind. Also remember that this space here around
the operator doesn't really matter it's just for style convention that I adopted.
Even if you have spaces here could have as many as you want it will make a
difference to the output right it will be the same. What determines the output is
whatever is inside the quotes okay. The convention is I always put one space
before and after the operator this case the plus that's a style convention okay.
So that's concatenation and we learned that we can also have the variables like
we'd had before right. If you have a name the variable you can concatenate this
variable with whatever you want. So like a message to the screen we learn console
log hello my name is whatever right. You can concatenate with the variable here.
So if you want to print to the console some message and in the message you need
some value from a variable in this case the variable is called name and holds
the value my name or whatever your name is. So you can use the plus and then you
concatenate with the string that's stored in the variable name. Okay so hello my
name is my name okay. So that's string concatenation. Now we also learn about
string interpolation. It's an alternative to concatenation that allows you to do
the same kind of thing except you don't have to break the string right here and
have to add a plus and then continue on another different part. You can just use
the back tick if you want to do string interpolation that's a feature from
JavaScript AcumenScript 2015 aka ES6. Okay so back tick and then you do the same
thing hello my name is except now you can do the interpolation using the dollar
sign with two curly races and whatever you want to interpolate inside. So this
time I want this value of the variable name to be replaced right here where these
these guys at. Okay so hello my name is my name so that's string interpolation.
Okay so string concatenation or string interpolation. It's up to you to choose
which one you would like to use. Can you use either of them or a combination of
both? Doesn't matter. Whatever if you're comfortable with if you like better remember
that string interpolation is fairly new to JavaScript comes with ES6 AcumenScript 2015.
That's it for interpolation and concatenation so we also learn about functions. So we
learned the concept of function and we learned to reuse code so we can call the
function many times and we don't have to change the same code at multiple places.
We can just change that in the function definition so we can call the function
many times and if you want it you need to modify that function you just do it
once instead of every single instance where you have to do the same code. Just
to illustrate let's define a function here that prints some message and your
name like we did before. So we start off with the keyword function then you give
it a name let's say say hello okay and then you need some parameters. This
function needs some inputs so we're gonna do just somebody's name so we need
somebody's name so we can generate an output that is we want to print the
message to the console saying let's say hello whatever the person's name is.
Okay so we're gonna need that input you need to know the name person's name
before you can say hello to them. So that's only one parameter in this function.
Now when you define this function signature here you're gonna open the
function definition function body with the open curly brace by convention I
always put a space a style convention space after the parameters up to you to
choose which convention you like. I usually do this convention and whenever I
open a block okay this is called also a block a function definition block I
indent by two spaces okay that's another convention that I use and then I start
writing the function. It could be one could be one or more statements or it
could be nothing at all right but that wouldn't be useful so let's do that
console log to print a message so what we want to do is we want to say hello
whatever the person name is and an exclamation how about that let's do a
string interpolation do you remember use the back tick instead of the other kind
of quote and then the variable name within the curly braces with a prepended
with a dollar sign and that's what the exclamation point there okay remember I
like adding semicolons to the end of statements set to another convention you
don't have to have it here but it's a convention that I follow for every
statement JavaScript I will have the semicolon and then I close the function
I finish this definition with the closing curly brace aligned on the same
level as the function keyword okay I don't do this I do that okay always aligned
that's a convention that's widely used in not only JavaScript but other
programming languages so let's see everything okay keyword function name of
the function parameter just one that's the name definition just does a log to
the console and it the message is going to be hello whatever name exclamation
okay so we press enter we get nothing return value on defined right the
function because we just defined a function we did not call it yet so first
you have to define it before you can try to use it so if you want to call the
function what do you do is first what's the function name say hello now you need
to give it argument remember the whole notion of a parameter versus argument so
when you define the function declaring the function signature this part here you
give it a name and you give some parameters when I'm talking in this
context I usually refer to this guy as the parameter but when I'm talking about
the calling when you're calling a function I usually say argument instead of
parameter that's just a convention and a naming okay that's like difference but
sometimes some people might use the same term interchangeably but you should be
aware that's a slight difference so what's the argument at whatever person's
name you want I just gonna use my name you can use your name okay so let's try
it out say hello with the argument name takes this guy and goes to that function
and then this variable is gonna hold this value then it's gonna do a log
hello and then whatever you passed here in this case my name is gonna be
display hello my name with an exclamation mark so that's it that's a
function right just reviewing what we already did and we learned if you can add
more stuff to the function if you want you can add age like we did before so
that would add another what what do you call this guy not a parameter right if
you want to add another parameter you have to separate them with a comma so
let's with age and also say hello whatever you are age years old so it's
gonna say also the person's age you are age years old so remember comma
separated parameter list for the function definition here by convention I
always put a space after the comma it's not necessary but it's a style convention
so you see there's all these style conventions that we follow I highly
recommend that you pick them up from the beginning because it'll make your code a
lot cleaner and you just practice ours is the beginning and once you're doing the
real thing you're just gonna buy automatically right in a very elegant
fashion okay so keep that in mind I was following these good best practice
conventions so that's defined this again that's called a function now we can pass
two arguments can pass your name comma the second argument is gonna be the age
I'm just gonna make something up a number 35 okay so comma separated and this guy
is gonna be mapped to name 35 is gonna be mapped to age so whatever say name
you're gonna get this inside the function block okay whenever say age you're gonna
get 35 inside the function block all right so let's try it out hello my name
you are 35 years old so exactly we want it to be okay so that's it for functions
now let's go on and continue our review we learned about some string operations
remember so we learned about converting a string all the characters to uppercase
and all the characters to lowercase so that's very easy right so if you have
somebody's name like John someone and you want to convert this you want to
generate a new string with all the characters in uppercase you can use
to uppercase this is a method of the string you can use the dot name of the
function or method and you just call it without any arguments because it already
has the string right here so you're gonna get a new string okay it's not the
original that's changed you're gonna get a new string with all the letters
capitalized in the same fashion if you have John someone all capitalized and
you want to convert all of these guys to lowercase note I just put some lower
case here it won't matter you will stay the same right when we do to what to
lowercase and then don't forget the parentheses whenever you have function
calls remember the parentheses okay John someone so you're gonna get every single
letter in lowercase so that's it to uppercase and to lowercase methods of
the string type okay now let's talk about slicing a string so like we did
before slice is used if you want to take parts of a string and you want to cut
things off so if you have let's do the same example John someone you want to for
example just get his last name here you want to get rid of one two three four
five characters you can use slice right five characters give me you can think of
it this way please slice the first five characters that's one way of thinking
about this so this means it's gonna only get this part of the string
okay then there's not a you can add another argument to the slice method to
be able to grab not only from one side from the other example you want something
like this part how would you get that well we have to figure out the indices
right the index for each they start index and the end index for the string
remember indices always start counting from zero count the index from zero so
you're going let's count I just want this part of the string so how can we do
it so zero is J one is O and two is gonna be the H so the first argument to the
slice is gonna be two and I forgot if I highlighted everything okay sorry I took
off the highlight but let's do it like this one from the H to out the way to the
so me you owe the okay the last oh so where's that last oh so we figure out the
first index for the H that's two let's keep counting and is three spaces for
s is five oh is six and seven e eight oh nine okay oh is nine but remember that
the slice is always the second argument is X is not inclusive so you have to
count one more so you're gonna count to the end and that's 10 let make sure one
zero one two three four six seven eight nine ten yeah correct ten so use 10 which
is the index for n but that is not included when you do the slicing it
actually includes 10 minus one which is gonna be the O so it's gonna grab from
the H to the last oh let's try it out so it each to the last oh correct okay so
that's slice so you're gonna get parts of a string you want to slice it okay now
to finish our review we're gonna talk about replacement string replacement if
you have John someone and you want to replace say someone with I don't know
let's say another you can use a dot replace on that string first you have
to tell it what to look for look for someone replace that with what the second
argument is going to be another so I want to replace every instance of these
the sequence of characters with this other sequence of characters called
another just happened to be a word doesn't have to be a word could be any
sequence of characters any patterns so you're gonna notice now it generates a
new string with whatever whenever see someone it replaces with another the
second argument to the replace method of the string we also talk about globally
global replacement because if you have John someone and someone and someone
whatever it only replaces the first instance it finds so if you really want
to replace every instance of someone with another you have to do a global
substitution for that you'll have to write the first argument in a regular
expression fashion the JavaScript you can put forward slash anything in between
will be a pattern for a regular expression we just learned the term we
don't quite understand everything about it yet you just know that's something
that you can put a pattern in between and then after that we put a G to say it's
a global substitution okay for the replace is gonna take that okay you want
to replace every instance of this pattern the word someone with this other
word another so that case every single instance of someone is replaced with
another okay so we have finished our review of all the things we've done so
far I hope that helped you to refresh your mind about all the things that we've
done so we can go on and keep on learning in this JavaScript this wonderful
journey with JavaScript thank you so much for watching and until the next time
goodbye
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: