Transcripts
1. Welcome: Welcome to this course,
javascript, the fundamentals. Javascript is one of the most in-demand programming
languages today, and it's a great language to start off your
programming journey. One of the difficulties
when learning to code is finding the best
resources for beginners. This course will introduce
you to all the key topics like the primitive datatypes
and then objects and arrays. This short and concise
course will give you a solid foundation of
all the basics and provide you with enough
information through examples so that you can go
off and practice on your own. I'm Emma and I have been working as a programmer for seven years. Most of that time,
I've been using JavaScript and I
loved the language. I've also helped
enough people along the way to know which topics
beginners should know. I hope you learned to love
JavaScript as much as I do and that you
enjoy the course.
2. Introduction to Objects: Hi, welcome back. So the next data
structure we're going to look at objects. Objects are also
a data structure in JavaScript like arrays. But the difference is that objects are useful when we
want to store data which is unordered or where preserving the order does not
matter. So e.g. if you wanted to store
details about dog, whilst we could use an array, using an object would be more ideal because we are
more interested in the details about the dog than preserving any
order of the details. Objects also enable us to extend the object to include data
about another object. A dog object could store
data about multiple dogs. An object is a container for
sets of key value pairs. So going back to
the dog example, if I wanted to store details
about a dog called Ted, than in the object, I may want to store the
dog's name, age, and breed. And we would call
these properties. So for the name, property, name would be the key, and the value would
be the string ted. There are two ways
in which we can access individual
object properties. Firstly, we have dot notation. If you know the name
of the property key for the value that
you wish to access. The key doesn't contain
any special characters. So e.g. it wasn't created using a numerical value or it
doesn't have a space in it, then you can use dot notation to access the value of the key. To do this, we write
the object's name, followed by a dot, followed
by the name of the property. If we tried to access a property which doesn't exist within the object than undefined
will be returned. So going back to our dog object, let's try to access
the dog's name. So we'll say dog dot name. There we get Fred. If we tried to look for a
key which doesn't exist. So let's say dog dot legs. You can see we get undefined. If you create a
new object here in the console which
uses a number for K, Let's just call this
one test object. And we'll set a key, one with the value of two. Now if we tried to access
this using dot notation, so we say test object dot one. You can see we get an error. But what if we did need
to access this property? We can use the second approach for accessing the property, which is called
bracket notation. This is very similar to how you access an element in a string. Except instead of passing in
the index of the property, you pass in the key
of the property. So we'll try this again. We'll say test object, square brackets with the key of the property which is one. And press Enter. And
there we get to. If we need to access a property where the key is a string, then we should pass a string
into the square brackets. So if we wanted to access the dog's name using
this approach, what we can't do is dog square brackets
and just say name. You can see we get undefined, but we can do this. So we can say dog
square brackets with a string name.
There we get Fred.
3. Adding and updating object properties: To add a property to an object, you can use dot
notation or bracket notation and then the
assignment operator, the return value,
will be the value of the property which you
add to the object. So let's go back to our
dog object and we'll use dot notation to add a new
property for the dogs color. So we'll say dog dark color, and we'll set this
equal to brown. Now let's recall the dog object. And you can see the color
property has been added. Let's do another example, but this time we'll
use bracket notation and add a property
for the dogs size. So we'll say dog
square brackets. And we'll add the string size. We'll set this equal to small. Now let's recall the
dog object again. You can see the size
property has been added. To delete a property
from an object, we can use the delete
operator followed by the object's name and the name of the property
we wish to delete. We can use either adopt
or bracket notation. And the return value
will always be true unless the property as a value
which cannot be deleted. Now let's delete the color
property we just added. We'll do this using
dot notation. So we'll say delete
dog dark color. Now let's recall the dog object. And you can see the color
property has been deleted.
4. Creating objects: As with arrays, objects
are reference types. So the same rules apply when it comes to using letter const. We can change the object if
it was created with const, but we can't reassign it
to a different object entirely once it's been created. So let's have a go now
creating an object, and we'll do this
using the syntax for creating an object literal. We'll start by creating
an empty object, which we'll call empty object. We use two curly braces
to create the object. And we'll add a
console log and we can see the object in the console. Let's save this and
go to the console. And we'll press refresh. And there we can see
our empty object. This isn't going
to do much though. So let's create a new object
with some properties. We'll go back to the text
editor and delete our code. Now let's create a dog
object we discussed earlier. So let's call this one dog. Now we want to store data about the dog's age, name, and breed. So starting with age will
use the word age is the key. We need to add a colon. And let's say our dog
is five years old. We'll say five is the value. Now is we want to add
another property. We need to add a comma. Okay, so let's move
on to the dog's name. Let's say our dog
is called Fred. So now we set name as the key. And we'll set the string
thread is the value. Lastly, we want to set
the breed property. We set the key breed. And Fred's a Labrador. So we'll set Labrador
as the value. Will add a console log so we can see the object
in the console. And then let's save this
and go back to the console. We'll press Refresh. And now we can see
our dog object. So if we click here, we can
see all our key value pairs. You can see when the
object was saved, the order of properties has changed and now they're
in alphabetical order. This is because ordering
doesn't matter for objects. And if it did matter to us, we should use an array. One side note about object keys. These keys get converted to strings when the
object is saved. So you can use a
number for a key, but it will be
saved as a string. The only exception here
is if you use a symbol, and that's out of the
scope of this course.
5. Introducing functions: When we're writing programs, will come to a point
where we want to have some reusable code for
performing a task. This can be achieved
by using a function. Functions are a
massive topic and will be worthy of a course
all to themselves. But let's wrap up
this course with an introduction to
what a function is. A function is a
block of code that does something and then
return some value. It's a bit like having
some bundled up functionality which we can
use in multiple places. So e.g. if we knew we
wanted to add two values, we can have a simple
function that does this and then returns the total. Then every time we wanted
to do this calculation with a cool the function to do
the calculation for us. When we create a function, we define it first. And by this we
mean we create it. Like when you make a meal, you pair it and you cook it before it's saved and consumed. Later, you call or
run the function. So this is a bit like
saying the serving and consuming part of
the meal example. We've looked at methods
in this course, such as the toUpperCase method or the trim method on strings. These are actually
examples of functions. The only reason they're called
methods is this is what we call functions when they
are stored inside an object. But they are still functions. But we haven't done yet is creating or defining a function. We have a few ways we can
create functions in JavaScript. But we'll look at the
approach which is called a function declaration, and it uses the
function keyword. So let's start by creating a function called
basic function, which will just print
a console log out. So we use the function keyword. We add the function's name. So basic function. We have a set of parentheses
and some curly braces. Inside the curly braces, we'll just add a console log, which we'll just say hello. Once this is saved, is defined in stored in memory, but nothing will ever happen
unless we use this function. To use the function
we need to run it. And we do this by using the function name
followed by parentheses, just like we did with
the method examples earlier in this course. So we'll say basic function. And we'll add the parentheses. We'll save this and go back to the console and
we'll press refresh. Now you can see the
function runs and we get our console log hello
printed out. Functions. Let us pass into them some inputs which we can
use within the function. Call these arguments. If we wanted to write a function
which added two numbers, the numbers we wanted
to add would be passed into the function
when we call it. These are what we
call the arguments. We have used arguments before when we pass a value
into a method. As with when we created an
end quote The function, there are also two
steps to follow when you want to use arguments. The first step is in
the function creation. So this section here. Here we add in the
variable name inside the parentheses for the
inputs for the function. So for our example,
we'll use num one and num two. Let's add them in. Now. These parameters will
hold the value of whatever is passed in when
the function is called. So we're going to want to
sum num one and num two. So let's delete the console log. And we'll say num
one plus num two. Now for the second step, when we call the function, we want to add the
specific values that we want to be used
inside of the function, inside of the parentheses,
these parentheses here. So let's say we want
to use five for num, 1.1 for num two will
add a console log. So we can see the
value returned. We'll save this. And we'll go back to the console
and we'll press refresh. This doesn't work. The reason why is that we're not returning anything
from the function. Unless you use the return
keyword and a function, it will never return any
value other than undefined. So let's go back to the code. And we'll add the
return keyword here. We'll save this and
we'll go back to the console and
we'll press Refresh. And then we get our two
values added together by the function and the
new total is returned.
Emma Williams
