Blog for Learning

This blog contains lesson material, material summary, questions and answers, definitions, types and examples, and others.

Advertisement

Powered by Blogger.

Visitors

Flag Counter

Pages

Learning Javascript: What are Objects? and How to Make It?

Javascript Object Tutorial
In real life, we often encounter objects. Object is everything that exists in this world.
Whether it's inanimate objects or living things. All objects.
We can model these objects in programming.
Usually using the OOP (Object Oriented Programming) paradigm or object oriented programming.
Now this OOP paradigm is a technique or method in programming where everything is viewed as an object.
These objects can interact so that they form a program.

What are Objects in Javascript and How do I make them?

The object is actually a variable that stores the value (property) and function (method) .
Examples of car objects: 1
Example Object
How do we model this car in the program code?
It can be like this:
var car = "Mobil Fiat";
But variables carwill only store the name of the car. Therefore, we must use objects.
Objects in javascript, can be made with curly brackets with contents in the form of keys and values .
Example:
Objects in Javascript
The code above can also be written like this:
var car = {
    type:"Fiat", 
    model:"500", 
    color:"white"
};

What are Property Differences and Methods?

In the example above, we only make property.
Property is a characteristic of an object (variable). While the method is the behavior of the object (function).
Then how do you make metohd in the object?
Methods can be created by filling in a value with a function.
Example:
var car = {
    // properti
    type: "Fiat", 
    model: "500", 
    color: "white",

    // method
    start: function(){
        console.log("ini method start");
    },
    drive: function(){
        console.log("ini method drive");
    },
    brake: function(){
        console.log("ini method brake");
    },
    stop: function(){
        console.log("ini method stop");
    }
    
};

How to Access Properties and Object Methods

We already know how to make objects ...
Then the question:
How do I access properties and methods of an object?
The method is using a dot or dot ( .), then followed by the name of the property or method.
Example:
console.log(car.type);
console.log(car.color);

car.start();
car.drive();
note car.typecar.colorcar.start(), and car.drive()!
How to access object properties and methods
To access properties, we just use the name objek.propertiAs for the method, we must use parentheses. This states if we want to execute the function.

Using Keyword this

Keywords are thisused to access properties and methods from within the method.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar Objek Javascript</title>

    <script>
        var person = {
            firstName: "Muhar",
            lastName: "Dian",
            showName: function(){
                alert(`Nama: ${this.firstName} ${this.lastName}`);
            }
        };

        person.showName();
    </script>
</head>
<body>
The result:
Example of using this on objects
The keyword thisin the example above will refer to the object person.

Create an Object Class with this

In object oriented programming, we usually create objects by creating instances of classes .
But in the examples above, we make the object directly.
Then what if we want to create another object with the same property.
You can make two like this:
var person = {
    firstName: "Muhar",
    lastName: "Dian",
    showName: function(){
        alert(`Nama: ${this.firstName} ${this.lastName}`);
    }
};

var person2 = {
    firstName: "Petani",
    lastName: "Kode",
    showName: function(){
        alert(`Nama: ${this.firstName} ${this.lastName}`);
    }
};
This is certainly not effective, if we want to make many objects. Because we have to rewrite the same code.
The solution we can use class.
Oh yeah, I want to let you know:
In the ES5 version of JavaScript, it classdoesn't exist yet. This feature has just been added to the ES6 version of JavaScript.
In ES5, we can create classes with functions. Then in it use the keyword this.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar Objek Javascript</title>

    <script>
        function Person(firstName, lastName){
            // properti
            this.firstName = firstName;
            this.lastName = lastName;

            // method
            this.fullName = function(){
                return `${this.firstName} ${this.lastName}`
            }
            this.showName = function(){
                document.write(this.fullName());
            }
        }

        var person1 = new Person("Muhar", "Dian");
        var person2 = new Person("Petani", "Kode");

        person1.showName();
        document.write("<br>");
        person2.showName();
    </script>
</head>
<body>
The result:
Class on ES5
Consider the example above!
We create new objects with keywords new, then give the parameter values firstNameand lastName.
var person1 = new Person("Muhar", "Dian");
So, whatever object we want to make ...
... just use keywords new.

0 Komentar untuk "Learning Javascript: What are Objects? and How to Make It?"

Silahkan berkomentar sesuai artikel

 
Template By Kunci Dunia
Back To Top