declare

21: What Are Objects in JavaScript | How to Create an Object in JavaScript | JavaScript Tutorial



Sharing buttons:

today going to learn something very

exciting when it comes to JavaScript

which is about objects now JavaScript is

actually what we call an object oriented

programming language even though coming

from another object oriented programming

besides JavaScript you might think that

JavaScript is very lazy about the way

that it does it but you need to know

that this is a feature of JavaScript so

it's not a flaw the way that Yahoo likes

to do it so what exactly are objects in

such JavaScript

well we can see it as a type of

blueprint where we put together similar

properties and methods inside an object

in order to group together and organize

our code in a much better way than using

variables and functions and even though

we might not have noticed it we did

actually use objects in the previous

episode in our properties methods lesson

as well as in the previous project we

created one episode ago so I just really

briefly want to talk about what exactly

I mean when I say we've actually used

objects in previous episodes so as you

can see in front of me here do have a

variable called name set equal to a

string called Daniel and underneath that

I simply console.log name dot length now

the dot length is a built-in property in

Santiago script which we talked about in

the properties methods episodes that

this shouldn't be anything new and when

we talk about built-in properties and

methods we're actually also talking

about built-ins objects because when it

comes to job if you have a bunch of

objects that are built into the

JavaScript language that contains all

these properties and methods we can use

inside our code so dud length is a

property that belongs to the string

global object that we have inside

JavaScript you also have a method called

to string where we convert any sort of

data to a string data type that is also

a JavaScript global object that has this

method inside of it so we have a bunch

of these objects inside JavaScript and I

will leave a link the description we can

check out all the different objects you

have inside JavaScript in case you want

to see it so what I'm going to do now is

I'm going to stop talking about building

objects inside JavaScript because it's

only going to confuse even more and

instead we're gonna switch it over and

start talking about how we can create

our own objects inside JavaScript

because hopefully after you have learned

how to create one yourself you're gonna

make a lot more sense about when I

talked about built-in objects inside

JavaScript so as you can see in front of

me here do have another example that I

want to use

you want to probably explain what

exactly an optic can do inside

javascript so as you can see I did

create a variable called name one equal

to Daniel I color one equal to blue age

1 equal to 27 and that is just some

basic information about a person which

in this case is me at the bottom also

created a function we can use in order

to update the age at the end of the year

if you want to so what we have here is a

bunch of variables and a function that

all belong to sort of the same category

what we have here is a bunch of people

with information about them and as you

can see this very quickly becomes very

messy because we have a bunch of

variables and a lot of them actually

repeated because we have name 1 2 & 3

and so on and if I were to create a

hundred people this would not be ideal

if you had to create a hundred different

instances of this specific information

here so this is going to be very

confusing and time-consuming to create

without using objects so what I want to

do is I want to delete all of this and

instead I'm going to create an object

that has the exact same information

inside of it now just for now we're

going to create one object of one of

these people and then in the next

episode I'm going to show you how we can

actually draw out the true power of

optics and create something called

constructors that's going to make it

easier for us to create many different

people or many people with information

inside of them inside our code here just

like I try to do with variables so the

way we create an object is by first of

all creating a variable so we're going

to say we have a let's type variable

that is called person and I'm going to

set it equal to and new objects now what

you're going to notice here is that when

we use objects inside JavaScript whether

it being a built-in object they want to

create a new instance of or a new object

that we create ourselves is that we

always use the new keyword here so when

I want to create an optic I want to say

new and then the type of object I want

to create afterwards so in this case

just a regular object so now that we

create a doctor you can go underneath

here and we can assign values to this

specific object called person so what I

can do is I can say we have a person dot

name I set it equal to

called Daniel and this is how we assign

values to an object so if I also want to

have the most of the eye color I can say

we have person dot eye color equal to

blue and then we can also add the age so

we can say person dot age is equal to 27

now just to mention it when we create

variables and functions in the global

scope of our file you know just by

creating a variable we call them

variables and functions but when we

create variables and functions inside an

object which change the name to

properties and methods and knowing this

you're probably gonna go like whoa and

get like an epiphany or something

because what that means is that the

building properties and methods like dot

length and dot two string are actually

very similar to what we're doing here

they're just basically an object that

has dot length and to string inside of

it that we call on in order to do

something with some of the information

we have inside JavaScript so if I want

to go down here and I want to actually

console.log some of the information from

this object I can say console dot log

parentheses and just simply refer to

person dot name or person dot length ah

see what we're doing that we using

global objects and I make sort of

references to how they're similar to

what we're doing here so we can actually

call on the properties and methods

inside an object by simply calling on

the object name and then saying which

property or method we want to access

from inside the property and also just

to show that we can create methods

inside the objects here I'm just going

to create one so going say person dot

update

age is going to be equal to an anonymous

function curly brackets and then inside

the function we can do something like

return plus plus by adding one to the

person dot age which is when we refer to

the person age inside the object here

which is up here so now we simply have a

method inside the object that we can

refer to when we want to update the ade

inside what we have here

so if I were to actually run this inside

the browser and do something like

console log console dot log and get the

age so we're going to refer to person

dot age then we'd actually get 27 and

then ever were to go below here and say

I want to refer to the person dot update

age method by saying parentheses and

then again console log what we had there

person age then it's going to update to

28 the next time because we just ran a

method that we created ourselves that

wasn't built into JavaScript which is

kind of cool I think in order to update

the age of this person here so this is

the long way of creating and objects now

we do have a short on simpler ways to

create objects inside our code so I'm

just going to leave what we have here

and create it in the second way which is

the shorthand way by saying we have a

let's call person instead of equal to

curly brackets and then inside the curly

brackets we can just simply refer to the

properties and then assign values to it

so I'm going to say we have name call

one a string called Daniel then I'm

gonna say comma afterwards because we're

creating a small list here just like if

you had parentheses and would have to

insert values we had one value comma the

next value comma the next value and then

the last value is not going to have a

comment if that makes sense so I'm going

to say if you have a second property

called eye color Kol one is going to be

blue comma and then the next one is

going to be the age is going to be 27

and then we can also create a method by

saying we have an update age Kol one and

then set it equal to a anonymous

function parentheses curly brackets and

then we can do the same thing in here we

can simply return plus plus person dot

age so even though we create the

shorthand version of it we'll still need

to refer to the data in the same way by

saying we have the object name and then

afterwards the prophecy or the method

name coming afterwards after a

punctuation so this is how we can create

the shorthand for a object inside

JavaScript

now just to demonstrate this if I were

to go inside the console and create the

object and run it and then afterwards

say I want to console dot log and then

console log person which is the name of

the object then you can see we do

actually get the optic down here we get

the name I color age and then we get the

function inside of it so we can actually

extend it then you can see if you have

all the information in here even the

properties and the method so we can

actually see all the information here so

this is how we can create objects inside

JavaScript and again like I said this is

how we can create one object I did show

you an example where I had a bunch of

variables inside the code where we can

have one person and a second person and

a third person and you might look at

this and say well don't we need to

create a new object for each person so

we would say this is person 1 then we

need to create person 2 and then teams

all the information inside of it and

create the second object because that is

not very short compared to what I just

showed you using variables so even

though this might be a much better way

of organizing all the information inside

your JavaScript

rather than creating all these variables

it's not really shorter than what we did

with variables so in the next episode

we're going to take objects step further

and create something called optic

constructors which is a way for us to

create a blueprint based off an optic

that we created in this episode and

create a bunch of instances or a bunch

of people based off that one blueprint

which is a much better way to do it

rather than creating a bunch of objects

or creating a bunch of variables that

are actually going to be set equal to

information based on a person so I hope

you enjoyed this lesson and learn

something about objects if you didn't

then I do recommend you go back and

watch it again because objects is very

important to learn about when it comes

to JavaScript if you have trouble with

the video I do also have my lesson fast

and also describe objects in a very

detailed way so if you are willing to do

it you can go to my patreon and get all

the lesson files for this episode with

notes and everything and examples in the

lesson files so if that's the thing you

want to do then you can go and do that

now in the next episode we're going to

talk about something called constructors

which is something that is a key feature

when it comes to creating objects inside

JavaScript constructors is going to

really bring out this strength when it

comes to using objects inside your

program

so I do hope that you get to the next

episode and get to play around with

constructors so I hope to see you in the

next episode

[Music]

[Music]