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