Downloaded from git.ir
[Music]
in the 3-minute introduction I'm going
to answer for frequently asked questions
about JavaScript
what is JavaScript what can you do with
it where does JavaScript code run and
what is the difference between
JavaScript and echo script so let's
start with the first question what is
JavaScript JavaScript is one of the most
popular and widely used programming
languages in the world right now it's
growing faster than any other
programming languages and big companies
like Netflix Walmart and PayPal build
internal applications around javascript
and here's the average salary of a
JavaScript developer in the United
States and it's only $2,000 a year so
it's a great opportunity to get a good
job out of learning JavaScript you can
work as a front-end developer or a
back-end developer for a full stack
developer who knows both the front end
and the back end now the second question
what can you do with JavaScript for a
long time
javascript was only used in browsers to
build interactive web pages some
developers refer to javascript as a toy
language but those days are gone because
of huge community support and
investments by large companies like
Facebook and Google these days you can
build full-blown web or mobile apps as
well as real time networking
applications like chats and video
streaming services command-line tools or
even games here's an example a third
question where does JavaScript code run
javascript was originally designed to
run only in browsers so every browser
has what we call a JavaScript engine
that can execute JavaScript code for
example the JavaScript engines in
firefox and chrome are SpiderMonkey and
v8 in 2009 a very clever engineer called
Ryan Dahl took the open-source
JavaScript engine in chrome and embedded
it inside a C++ program he called that
program node the node is a C++ program
that includes Google's v8 JavaScript
engine now with this we can run
JavaScript code out
of a browser so we can pass our
JavaScript code to node for execution
and this means with JavaScript we can
build the backend for our web and mobile
applications so in a nutshell JavaScript
code can be run inside of a browser or
in node browsers and node provide a
runtime environment for our JavaScript
code and finally the last question what
is the difference between JavaScript and
Eggman script well ECMO script is just a
specification javascript is a
programming language that confirms to
this specification so we have this
organization called a comma which is
responsible for defining standards they
take care of this Eggman script
specification the first version of
Eggman script was released in 1997 then
starting from 2015
ACMA has been working on annual releases
of a newest specification so in 2015
they released a kimono script 2015 which
is also called ECMO script version 6 or
es6 for short this specification defined
many new features for JavaScript alright
enough theory
let's see javascript in action so every
browser has a JavaScript engine and we
can easily write JavaScript code here
without any additional tools of course
this is not how we build real-world
applications but this is just for a
quick demo so open up Chrome right click
on an empty area and go to inspect now
this opens up chrome developer tools
here select the console tab this is our
JavaScript console and we can write any
valid JavaScript code here so type this
console dot log put a single code here
and then hello world another single code
to terminate close the parentheses and
add a semicolon at the end now as you go
through the course you're going to
understand exactly what all this means
for now don't worry about it so now I'll
press ENTER and you can see the hello
world message on the console we can also
write mathematical expressions here for
example two plus two we get four or we
can do something like this alert
practices single coat yo enter and
here's an alert in the next lecture I'm
going to talk about setting up your
development environment for writing
JavaScript code
in order to write javascript code you
need a code editor there are various
code editors out there including Visual
Studio code or yes code sublime text
atom and so on
out of these my favorite is Visual
Studio code that you can download from
code that Visual Studio comm it's a very
simple lightweight cross-platform and
powerful editor so if you don't have
Visual Studio code on your machine go
ahead and download it the other thing I
wanted to install is note you can
download note from nodejs
org now technically you don't
necessarily need know to execute
JavaScript because as I explained before
you can execute JavaScript code inside
of a browser or EndNote but it's good to
have node on your machine because we use
that to install third-party libraries
and also later in this section I'm going
to show you a preview of node so pause
the video now and download Visual Studio
code as well as note once you're done
come back continue watching
to create a new folder call that J s
dash basics the name doesn't really
matter we just want to have a folder for
writing all the code in this course now
drag and drop this folder into visual
studio code okay we've got this folder
open let's add a new file here index dot
HTML now you don't really need to know
HTML in order to take this course but if
you want to be a front-end developer you
should know your HTML well now in this
file I want you to type an exclamation
mark and then press tab this generates
some basic HTML boilerplate we don't
really care about any of this code here
we're gonna use this as a host for our
JavaScript code you're gonna see that in
the next lecture so save the changes now
open the extensions tab here
here in this box search for live server
so live server is a very lightweight web
server that we're going to use to serve
our web application so install this then
you will have to restart Visual Studio
code when you're done go to the Explorer
tab right click index.html and select
open with live server
this will open up Chrome or your default
browser and point it to this address
that's where our web application is
served from now currently we have an
empty page now to make sure that
everything is working properly let's go
back to visual studio code here in the
body section let's add an h1 press tab
and type hello world now save the
changes back in the browser we can see
this page is refreshed automatically and
we've got the hello world heading here
in the next lecture you're going to
write your first JavaScript code
all right now we're ready to write our
first Java Script code in order to write
JavaScript code here we need a script
element there are two places where we
can add a script element we can add it
here in a head section or in the body
section the best practice is to put the
script element at the end of the body
section after all the existing elements
so here after h1 I'm gonna type script
and press tab this is our script element
now why did I say that as a best
practice you should put this script
element here well there are two reasons
for that one reason is that the browser
parses this file from top to bottom so
if you put this script element here in
the head section you might have a lot of
JavaScript code there so your browser
may get busy parsing and executing that
JavaScript code and it won't be able to
render the content of the page so this
will create a bad user experience your
user looks at your web page it's white
or blank while your browser is busy
parsing and executing your JavaScript
code so that's reason 1 the second
reason is that almost always the code
that we have in between script elements
needs to talk to the elements on this
web page for example we may want to show
or hide some elements so by adding the
code here at the end of the body section
we'll be confident that all these
elements are rendered by the browser now
there are exceptions to this rule
sometimes you're using third-party code
that has to be placed in the head
section but these are exceptions as I
told you before as a best practice you
should add your JavaScript code at the
end of the body section now here we're
gonna write the same code that you wrote
in the last lecture console dot log
hello world but we're going to talk
about this in a little bit more detail
what we have here is a statement a
statement is a piece of code that
expresses an action to be carried out in
this case we want to log
a message on the console all statements
in JavaScript should be terminated by a
semicolon what we have here in between
single codes is called
a string a string is a sequence of
characters now in JavaScript we also
have this notation we can add two
slashes and this represents a comet so
here we can add some description to our
code and this description is ignored by
the JavaScript engine it's not executed
it's purely for documenting the code
when you wanna explain to other
developers why you have written this
code this way you don't explain what the
code does because that should be clear
in the code itself so here I don't want
to write something like logging
something on the console that's so
obvious in the code right instead we
want to explain why's and a house so for
this demo I'm just gonna add a simple
comment this is my first JavaScript code
now save the changes back in the browser
we need to bring the console back up so
right click somewhere and go to inspect
or alternatively you can use a shortcut
that is alt command an eye on Mac or alt
control eye on windows that brings up
the console tab if the console tab is
not immediately visible make sure to
select it here and here you can see the
hello world message
now while we can easily write javascript
code in between the script element in a
real-world application you have
thousands or even millions of code we
don't want to write all that code in
line here we want to extract and
separate our JavaScript code from our
HTML code let me give you a metaphor
think of your house in your bedroom you
have your bed and your clothes you don't
store your clothes in the kitchen this
is what we call separation of concerns
we have the same principle in
programming so we want to separate HTML
which is all about content from
JavaScript which is all about behavior
how should your web page behave what
should happen when we hover our mouse
over a given element maybe something
should pop up maybe something should be
hidden so we use JavaScript to implement
behavior so open up the Explorer window
add a new file cut in index the j/s now
back in index dot HTML cut all this
JavaScript code here and then paste it
in index J s now in this simple
application we have a single file a
single javascript file in a real world
application we have hundreds or even
thousands of JavaScript files later in
the course you will learn how to combine
these files into a bundle and serve that
bundle to the client now save the
changes back in index.html now that all
our JavaScript code is in a separate
file we need to reference that file here
so let's add an attribute here SRC which
is short for source and set it to index
that j/s so this tells the browser that
our JavaScript code is now in index that
is save the changes back in the browser
you can still see the hello world
message and that confirms that our code
is still working in the next lecture we
are going to execute this code in node
so in the last lecture we executed this
piece of JavaScript code inside of a
browser in this lecture I'm going to
show you how to run the same code in
node so I'm assuming that you have
installed node on your machine if not
head over to node.js org and download
the latest version of node now if you're
on Windows open up command prompt if
you're on Mac open up terminal and head
over to the folder you created earlier
now in this folder we run node and pass
the name of our javascript file that is
index dot JSON c node is a program that
includes google's v8 JavaScript engine
we can give it a piece of JavaScript
code and it will execute that code for
us just like how we can execute some
JavaScript code in a browser so node is
a runtime environment for executing
JavaScript code now let me show you a
tip here in vs code we have an
integrated terminal so you're gonna have
to explicitly open up a separate
terminal window so here on the top under
the View menu look we have integrated
terminal note the shortcut here that's
the shortcut for mac and windows you're
gonna have a different shortcut so
select this and here's our integrated
terminal pointing to the same folder
where we created our files so you don't
have to explicitly navigate to this
folder and here we can run node indexed
at j/s as well now in this course we're
not gonna work with node anymore because
node is a complex separate topic in fact
I have a comprehensive course about node
with 14 hours of content so once you
finish this course if you want to learn
node you can always look at my note
course
well hello it's mahshar thank you for
watching my javascript tutorial I just
wanted to quickly let you know that this
tutorial is part of my complete
JavaScript course where you can learn
about all the essential concepts in
JavaScript the course is packed with
lots of exercises and solutions and by
the end of watching the course you will
also receive a certificate of completion
in case you're interested you can find a
link in the video description and if not
that's perfectly fine continue watching
as the next section is coming up
let's start this section by a discussion
of variables which are one of the most
fundamental concepts in JavaScript and
any other programming languages in
programming we use a variable to store
data temporarily in a computer's memory
so we store our data somewhere and give
that memory location and name and with
this name we can read the data at the
given location in the future here is a
metaphor think of the boxes you use to
organize your stuff you put your stuff
in various boxes and put a label on each
box with this you can easily find your
stuff right a variable is like a box
what we put inside the box is the value
that we assign to a variable that's the
data and the label that we put on the
box is the name of our variable now
let's see this in code so here in index
Jas I'm gonna declare a variable now
previously in the old days before es6 we
use the VAR keyword to declare a
variable but there are issues with var
as you will find out later in the course
so going forward from es6 the best
practice is to use the lead keyword to
declare a variable now we need to give
this variable a name or an identifier
and this is like the label we put on a
box so I'm gonna call this name and
finally we need to terminate this
declaration with a semicolon now let's
log this on the console and see what we
get
so console that log name once again we
need to terminate this statement with a
semicolon save the changes and here in
the console we see undefined so by
default variables that we defined in
JavaScript their value is undefined now
we can optionally initialize this
variable so I'm gonna set this to a
string which is a sequence of characters
like Marsh note that I'm using single
quote you can also use double quotes
different developers have different
preferences but it's more common to use
single quotes for declaring strings in
JavaScript now when we save the changes
instead of one
we see Marsh on the console so here in
this example we have declared a variable
called name and we have set that to this
value to this string now we have a few
rules for naming these variables here
are the rules
first is that they cannot be a reserved
keyword so in JavaScript we have
reserved keywords let is one of them
you also have if else VAR and so on now
you don't have to memorize this list if
you try to use one of these names you're
gonna get an error for example if I
change this to if notice red underline
this is indicating that this is not a
valid identifier okay so revert it back
now the second rule is that they should
be meaningful we want to have meaningful
names like meaningful labels I've seen
developers using names like a or PE or a
one or I don't know X these variable
names do not give us any clue what is
the purpose of these variables what kind
of data are restoring at that memory
location so always use meaningful and
descriptive names okay now back to name
the third rule is that they cannot start
with a number so we cannot have a
variable like one name but again going
back to the second rule why would you
want to call it variable one name it's
meaningless right so always use
meaningful names the fourth rule is that
they cannot contain a space or - so if
you have multiple words you need to put
them together here is an example let's
imagine we want to declare a variable
called first name so first name and note
that here I'm using camel notation so
the first letter of the first word
should be lowercase and the first letter
of every word after should be uppercase
this is what we call camel notation
which is the convention we use in
JavaScript to name our variables another
thing you need to know about these
variable names is
they are case-sensitive so if I declare
another variable call it first name but
make the F uppercase these two variables
are different but as I told you before
if you stick to camel notation you
wouldn't end up with a variable name
like this and finally the last thing you
need to know about these variables is
that if you want to declare multiple
variables there are two ways to do this
you can declare them on one line and
separate them using a comma so first
name and then last name now in this case
I have not initialized either of these
variables they're both undefined I can
optionally initialize one or both of
them so I can set this to Marsh and I
can leave last name undefined or set it
to my last name Hammad on e but the
modern best practice is to declare each
variable on a single line so we
terminate this first declaration with a
semicolon and declare the second
variable on a new line that's the modern
best practice next we're going to look
at constants
alright now let's declare a variable
called interest rate so let interest
rate and we set this to 0.3 now this is
the initial value we can always change
that later so we can set interest rate
to let's say 1 now if you log this on
the console of course we're going to see
the new value right so save the changes
and here's one on the console however in
a real-world application there are
situations that we don't want the value
of a variable to change because
otherwise it's going to create all kinds
of bugs in our application in those
situations instead of a variable we use
a constant so the value of a variable as
the name implies can change but the
value of a constant cannot change so
here if we change let to Const now
interest rate will be a constant so when
I save the changes you're going to see
an error in the console on line 3 where
we reassign interest rate so let's have
a look
save the changes and here's the error
uncut type error assignment 2 constant
variable we can see this error happen in
index dot JSP
but if you click here you can see the
line in code where this error occurred
so we cannot reassign a constant all
right now back to the console so here's
the best practice if you don't need to
reassign constant should be your default
choice otherwise if you need to reassign
a variable use let
so you have learned how to declare and
initialize a variable now you might be
wondering what are the kind of values
that we can assign to a variable well
you have seen strings but we have more
types basically in JavaScript we have
two categories of types on one side we
have primitives also called value types
and the other types we have reference
types in this lecture we're going to
focus on primitives and you're going to
learn about reference types later in the
course now in the category of primitives
we have strings numbers bully ends
undefined and not let's look at each of
these in action so here we have a
variable called name which is set to
your string what we have here is what we
call a string literal that's just a
fancy name for a string now let's
declare a variable and set it to a
number so let H be set back to 30 and by
the way I'm not 30 years old but don't
tell anyone okay
so this is what we call a number litora
now let's declare a boolean a boolean
can be either true or false
so let is a proved to be true this is
what we call a boolean literal and we
use this in situations where we want to
have some logic for example if the order
is approved then it needs to be shipped
so the value of a boolean variable can
be true or false and by the way note
that both true and false are reserved
keywords so they cannot be variable
names ok now you have seen undefined
before so I can declare another variable
first name
if we don't initialize it by default its
value is undefined
but we can also explicitly set this to
undefined but that's not very common in
contrast we have another keyword that is
not so let me declare another variable
and set this to no we use null in
situations where we want to
please heed me clear the value of
variable for example you may want to
present the user with a list of colors
if the user has no selection you want to
set the selected color variable to know
in the future if the user selects a
color then we're going to reassign this
variable to a color like red and then if
they click red again perhaps we want to
remove the selection so we set this back
tool not so we use norm in situations
where we want to clear the value of a
variable so these are the examples of
primitives or value types we have
strings numbers boolean's undefined and
no now in es6 we have another primitive
that is symbol and you're going to learn
about that later in the course
one thing that separates JavaScript from
a lot of programming languages is that
javascript is a dynamic language what do
they mean by dynamic well we have two
types of programming languages
static languages or dynamic languages in
static languages when we declare a
variable the type of that variable is
set and it cannot be changed in the
future in a dynamic language like
JavaScript the type of a variable can
change at runtime let's see this in code
so back in the example from the last
lecture we have declared this name
variable and we have set that to your
string so the type of name is currently
a string but it can change in the future
let's take a look so here in the console
we can execute some JavaScript code we
have this type of operator and with that
we can check the type of a variable so
after that we add the name of the
variable in this case our name variable
so note that the type of name is a
string now if we reassign name to a
different value like a number and check
its type look the type is now changed to
a number this is what we call a dynamic
language so unlike static languages the
type of these variables will be
determined at runtime based on the
values that we assigned to them now
let's take a look at a few more examples
of the type of operator and by the way
note that type of is another reserved
keyword so you cannot have a variable
called type off so we can clear the
console by pressing ctrl + L so now
let's take a look at type of age it's a
number now if you change age to a
floating-point number and I know it
doesn't make sense but let's just stick
to this for this example thirty point
one and then look at type of age it's
still a number so in JavaScript unlike
other programming languages we don't
have two kinds of numbers we don't have
floating-point numbers and integers all
numbers are of type number now let's
look at the type of he's approved it's a
boolean as I told you before what about
the first name let's have a look type of
first name it's undefined and that's
funny because the value of this variable
is undefined
but this type is also undefined what
does this mean well earlier I told you
that we have two categories of types we
have primitives or value types and
reference types in the primitive types
category we have strings numbers boolean
undefined and no so undefined is
actually a type but is also a value in
this example because we have set
first-name to undefined as a value it's
type is also undefined okay now what
about selected color let's have a look
so type of selected color the type of
this variable is an object what is an
object that's the topic for the next
lecture
so you have seen all the primitive types
in JavaScript now let's take a look at
the reference types in the reference
types category we have objects arrays
and functions in this lecture we're
going to explore objects and you will
learn about arrays and functions later
in this section so what is an object an
object in JavaScript and other
programming languages is like an object
in real life think of a person a person
has name age address and so on these are
the properties of a person you have the
same concept in JavaScript so when we're
dealing with multiple related variables
we can put these variables inside of an
object for example here we have two
variables name and age they're highly
related they are part of the
representation of a person so instead of
declaring two variables we can declare a
person object and then instead of
referencing these two different
variables we can just reference the
person object
it makes our code cleaner so let's see
how we can declare a person object we
start with let or Const if we don't want
to reassign the person object and set it
to an object literal so this syntax we
have here these curly braces is what we
call an object literal now between these
curly braces we add one or more key
value pairs so the keys are what we call
the properties of this object in this
case we want this person object to have
two properties or two keys name and age
so we add name here that's the key then
we add a colon and after that we set the
value so maash now we add a comma and
add another key value pair age 30 so now
we have a person object with two
properties or two key value pairs name
and age and with that we don't need
these two variables now this lock person
on the console
so that log person save the changes so
here's our personal object again note
the object literal syntax so we have
curly braces and in between them we have
one or more key value pairs and these
are the properties of the personal
object now there are two ways to work
with these properties let's say we want
to change the name of this person so we
need to access the name property there
are two ways the first way is what we
call the dot notation so we add the name
of our object in this case person dot
now you can see its properties we have
age and name so we can change the value
of name to John now we can use the dot
notation to also read the value of a
property so here on line 10 instead of
login the person object we can log its
name property save the changes and in
the console we get John the other way to
access a property is using bracket
notation so bracket notation so instead
of dot we use square brackets and we
pass a string that determines the name
of the target property so single or
double quotes
but single quotes are more common the
name of the target property is name so
we can change that to a same Mary again
when reading that we can use the dot
notation or the bracket notation if we
save the changes now we get Mary on the
console now you might be asking which
approach is better dot notation or
bracket notation well as you can see dot
notation is a bit more concise it's
shorter so that should be your default
choice however bracket notation has its
own users sometimes you don't know the
name of the target property until the
runtime for example in our user
interface the user might be selecting
the name of the target property in that
case at the time of writing code we
don't know what
property we're going to access that is
going to be selected at runtime by the
user so we might have another variable
somewhere else like selection that
determines the name of the target
property that the user is selecting and
that can change at runtime with this we
can access that property using the
bracket notation in a dynamic way so we
pass selection here and we get the same
result okay now if this is confusing
don't worry you're going to see this
again in the future as you gain more
experience with JavaScript for now just
stick to the dot notation because that's
cleaner and easier next we're going to
look at arrays
sometimes in your applications you might
be dealing with a list of objects for
example the list of products in a
shopping cart or the list of colors the
user has selected in situations like
that you use an array to store that list
let me show you how so here I'm gonna
declare another variable called selected
colors note that I'm using a meaningful
name I don't have SC or some other weird
name selected colors now we can
initialize this and set it to an empty
array so these square brackets are what
we call array literal and they indicate
an empty array now we can initialize
this array and add a couple of items
like red and blue let's Lock this on the
console so console the log selected
colors save the changes so here's our
array with two elements we can expand
that note that each element has an index
and that determines the position of that
element in the array so the index of the
first element is zero and the index of
the second element is one so if you want
to access an element in an array we use
this index here's how for example let's
say you want to display the first
element in this array you use the square
brackets and then specify the index save
the changes and now we have red now
earlier I told you that JavaScript is a
dynamic language so the type of
variables can change at runtime the same
principle applies to our arrays so the
lengths of arrays as well as the type of
objects we have in an array are dynamic
they can change so aligned - we
initialize this array with two elements
right now on line 3 we can add another
element to this array so the array will
expand so let's say selected colors of 2
that means the third item in this array
is going to be green now let's display
this array on the console
so we have an array with three elements
so the length is dynamic it can change
also the type of objects we have in this
array is dynamic so unlike other
programming languages where every item
or every object in the array should have
the same type in JavaScript we can store
different types in an array so we can
make the last element a number save the
changes now we have two strings and a
number so the objects in the array as
well as the size of the array are
dynamic now technically an array is an
object so just like the personal object
we defined in the last lecture it has a
bunch of key value pairs or properties
that we can access using the dot
notation let me prove that to you so
here on the console let's look at the
type of selected colors so the type of
this array is an object so an array is
an object in JavaScript so here on line
4 we can look at the properties of this
array or this object using the dot
notation look these are all the
properties defined in arrays in
JavaScript so every time we declare an
array using square brackets that array
will automatically receive these
properties we didn't explicitly define
them they're just somehow magically
inherited from somewhere else we're
going to learn about that later when we
talk about prototypes now in this
lecture we're going to look at one of
these properties that is the length
property this property returns the
number of items or elements in an array
so save the changes you can see we have
three elements in this array now later
in the course we have a comprehensive
section about arrays you'll learn about
all kinds of operations we can perform
on arrays for now all I want you to take
away is that an array is a data
structure that we use to represent a
list of items
in the category of reference types you
have learned about objects and arrays
now let's take a look at functions
functions are one of the fundamental
building blocks in JavaScript a function
is basically a set of statements that
performs a task or calculates a value
let me show you a couple of examples so
I'm going to declare a function using
the function keyword now we need to give
it a name let's call that greet after
that we need to add parentheses that's
part of the syntax for declaring
functions and then curly braces now what
we have here inside the curly braces is
what we refer to as the body of this
function and this is where we add all
these statements to define some kind of
logic in our application for example the
logic for this function should be to
display a message on the console so here
we can add console the log hello world
now note that here we have a statement
so we terminated with a semicolon but
when we are declaring a function we
don't need to add semicolon at the end
because we are not declaring it like a
variable like this okay this is a
function declaration right so now we
have a function we can call this
function like this so we add the name of
the function and parentheses again and
then semicolon to indicate that this is
a statement save the changes now we have
hello world on the console but that's
pretty boring what would we do this let
me show you how to make this more
interesting our functions can have
inputs and these inputs can change how
the function behaves so let's say
instead of displaying hello world we
want to display the name of the person
here like hello John so we can add a
variable here in between parentheses we
refer to this variable as a parameter
so this greet function has one parameter
called name and essentially name is like
a variable that is only meaningful
inside
dysfunction so inside of this function
we can work with this name variable but
it will not be accessible outside of
this function the name is an input to
this function so instead of displaying
hello world we can display hello
then add a plus here to concatenate two
strings so we can add name after now
when calling the great function we need
to pass a value for the name variable or
name parameter more accurately so we can
pass John here now we refer to this as
an argument so John is an argument to
the greet function a name is a parameter
of the greet function it's one of the
things that a lot of programmers don't
know they don't know the difference
between a parameter and an argument so a
parameter is what we have here at the
time of declaration but the argument is
the actual value with supply for that
parameter okay
now let's save the changes so we have
hello John now we can reuse this
function but with a different input so
we can copy this line here and change on
to Mary save the changes now we have two
different messages on the console now a
function can have multiple parameters so
here we can separate parameters using a
comma so let's add another parameter
like last name now we can change our
console not blog add a space here and
then display the last name
now when calling this great function we
should pass another argument for the
last name right but let's see what
happens if we don't do this so I'm gonna
save the changes
see what we got hello John undefined
because as I told you before the default
value of variables in JavaScript is
undefined so because we did not pass a
value for the last name by default it's
undefined so I'm gonna pass another
argument here we separate them using a
comma John Smith
and we don't need the second call to the
greet function save the changes now we
have hello John Smith
now there is a cleaner way to write this
code on line three
all these concatenations are kind of
ugly they're getting in the way later in
the course I'll show you how to use
template literals to clean up this code
for now don't worry about it let's look
at another example of a function so this
function we have here is performing a
task so performing a task is task is to
display something on the console but
sometimes our functions might calculate
something so here is an example of a
function that calculates a value so
again function let's call this function
square this function should take a
parameter let's call that number now we
need to calculate the square of that
number that is number times number just
basic math right now we need to return
this value to whoever is calling this
function for that we use the return
keyword that's another reserved keyword
so you cannot have a variable called
return okay now instead of calling the
greet function let's call the square
function so square we pass two now this
returns a value so we can use that value
to initialize a variable for example we
can declare another variable called
number and set it to a square of 2 and
then we can display that on the console
save the changes so we get 4 now in this
particular example we don't necessarily
have to declare a separate variable if
all we want to do is to display the
square of 2 on the console we can
exclude this variable declaration and
simply pass square of 2 to console.log
so when the JavaScript engine execute
this code first is going to call this
function it would get a value and then
pass that value to console dot lock
let's save the changes and look we still
get 4 now I have a question for you how
many function calls do you think we have
in this code we have to function costs
square of two is one function call let
me delete this temporarily but consult
that lock is also another function call
right because here we have parentheses
so recalling the log function which is
defined somewhere and passing an
argument we can pass a simple string
like hello or we can pass an expression
that expression can be a call to another
function like square of two okay so this
is the basics of functions again later
in the course we have a comprehensive
section about functions for now all I
want you to take away is that a function
is a set of statements that either
performs a task or calculate and returns
a value a real world application is
essentially a collection of hundreds or
thousands of functions working together
to provide the functionality of that
application
hi there it's me mosh again you seem to
be very enthusiastic about learning
JavaScript so I want to congratulate you
for your determination for learning if
you want to learn more from me I highly
encourage you to enroll in my JavaScript
course you can watch this course online
or offline as many times as you want at
your own pace the course comes with
plenty of exercises and solutions and
you will also receive a certificate of
completion by the end of watching the
course in case you're interested the
link is in the video description have a
great day and I hope to see you in the
course