5.1 basic notions

Earlier in the course, you saw what objects were in js, you learned that objects are collections of key-value pairs, so if you have properties that are strongly related, we want to encapsulate them inside an object. Here's an example. Let's say we're building an application to draw different types of shapes, like circles, rectangles, etc. So we could declare several variables, around the circles, for example, radius, which we will set to 1 So we'll make a let x and y which we then set to 1. But all these variables are very related, they represent the circle. A better approach is to place these variables inside an object. Now, we can send this object anywhere in our programs, we can pass it to all the functions, and all these variables would be available in this object. So I'm going to define an object, we could use let or const, in this case it doesn't really matter, so we define a circle object using the literal syntax of the object, we add these braces and inside we add one or more pairs of key values. So the first key is radius and its value is 1. Now, this value that we have here can be of any type in JavaScript, it can be a number, a string, a boolean, null, undefined, it can even be another object, an array, or a function. Let me show you that instead of defining two other pairs of key values like x and y, I'm going to add a key that we'll call location and set its value to another object. Now, in this object, we can have two pairs of key values or properties, the first one is x and the second one is y. We can also have another property here as Visible, and set it to a boolean, true or false. So the purpose of an object is to group related variables. But it's not just about grouping related variables, many times we have functions that should work on those variables. For example, we might have a function like draw, to draw a circle. Or, we might have another function to move a circle, Again, these functions are strongly related to these variables that we need to find here. So, instead of defining these functions, on their own, it's better to place these functions inside the circle object. Again with that, where we have the circle object in our program, we have access to all of its properties and functions. So let me show you how to add this Draw function inside 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. Draw log on the console. So now with this circle object, we don't need these independent variables, and all these functions are now part of a circle object. So we can access them using point notation, by making a circle point, and look, all the properties are here. We can just call this draw function like this. And if I save the changes, you see the draw message on the console. Now, what you see here is what we call object-oriented programming. So object-oriented programming, also abbreviated as OOP. Object-oriented programming is essentially a style of programming where we see a program as a collection of objects that talk to each other to perform certain functionality. So here we have a circle object, and this object has some properties and a function. In terms of object-oriented programming, if a function is part of an object, we call the function a method. So here, instead of saying that we call the draw function of the circle object, we say that we call the draw method of the circle object. So that's the difference between a function and a method if a function is part of an object, in terms of object-oriented programming, we call that function a method. Now, using this object literal syntax is an easy way to create an object, but as our applications become more complex, we need a different way to create objects. And that's what you'll learn in the next video.