All language subtitles for 1- Basics

Earlier in the course

you learned a little bit about objects, you learned

objects are collections of key value pairs, so if you have

properties that are highly related, we want to encapsulate them

inside of an object. Here's an example. Let's say we are building

an application for drawing different kinds of shapes, like circles,

rectangles and so on. So we could declare multiple variables,

around circles for example radius we set that to 1,

let x and y

we're defining multiple variables, but all these variables are highly

related, they represent the circle. A better approach is to

put these variables inside of an object. Now we can

send that object anywhere in our programs, we can pass that to any functions,

and all these variables would be available in that object. So,

I'm going to define an object, we could use let

or const, in this case it doesn't really matter, so let's define a

circle object using the object literal syntax, so

we add these curly braces, and inside them we add

1 or more key value pairs. So, the first key

is radius, and the value is 1. Now this value we have

here can be any type in JavaScript, it can be a number,

a string, a boolean, null, undefined, it can

even be another object. or an array, or a function. Let me show you

so instead of defining two other key value pairs

as x and y, I'm going to add a key called location, and

set it's value to another object. Now in this object we can

have two key value pairs or properties

the first one is x and the second one is y.

We can also have another property here like isVisible,

and set that to a boolean, true or false, okay?

So the purpose of an object is to group

related variables. But it's not just grouping related variables,

quite often we have functions that should operate

on these variables. For example, we can have

a function like draw, for drawing a circle. Or,

we could have another function for moving a circle, right?

So again these functions are highly related to these

variables we have to find here. So instead of defining these functions,

in a stand alone way, it's better to put these functions,

inside of the circle object. Again with this, where we

have the circle object in our program, we have access to all

of it's properties and functions. So let me show you how to add

this draw function inside of the circle object. We add

another key value pair, the key is draw, and the value

is a function, so I told you that the value of a key value pair

can be anything in JavaScript, here the value is a function.

Now for simplicity I just want to do a console.log

here, let's log draw on the console.

So now with this circle object, we no longer need

these independent variables, and

functions, all of these are now part of a

circle object. So we can access them using the dot notation,

circle. look, all of them are here. We can simply call

this draw function like this. And if I save the changes, you see

the draw message here. Now what you see here,

is what we refer to as object oriented

style programming. So object

oriented Programming, also abbreviated as OOP.

Object oriented programming is basically a style of programming

where we see a program as a collection of

objects that talk to each other to perform some functionality.

So here we have a circle object, and this object has a few properties

and a function. In object oriented programming terms,

if a function is part of an object, we call

the function a method. So here more accurately instead of saying

we're calling the draw function of the circle object, we

say we're calling the draw method of the circle object. So draw

method. So that's the difference between a function and a method

if a function is part of an object, in object oriented programming

terms, we refer to that function as a method. Now,

using this object literal syntax, is an easy way to

create an object, but as our applications get more complex we need a

different way to create objects. And that's what you're going to learn next.