Coding Newbie

javascript objects

What are JavaScript Objects and How to Use Them

JavaScript is an object oriented language. In order to fully comprehend the language, it is extremely important to understand how JavaScript Objects work.

What are JavaScript Objects?

Objects are complex, non-primitive data types. They represent a collection of data, a way to store multiple values, and more importantly the relations between data.

The data memorized inside an object is organized with key-value pairs. Each key-value pair is called a property. Key is always a string, as it is actually a property name, while value (property value) can be any data type.

javascript objects syntax

Set of these properties represents an object.

But why do we use objects at all? What is the meaning of storing data inside an object?

Declaring JavaScript Objects

We create an object by declaring a variable, followed by key-value pairs, organized inside the curly brackets.

let objectName = {
    key1: value1,
    key2: value2
}

Let’s say we are creating a game. Our game has a hero, and that hero has some skills, attributes, characteristics. He is a mage, known by the name Vasirius (some name, I know), age 33, and he throws fireballs on his enemies. Well, we would organize all this data in the form of object:

let hero = {
    name: "Vasirius",
    type: "Mage",
    age: 33,
    attack: "fireballs"
}

Editing JavaScript Objects

Object data can be modified whenever needed, or we can add new properties when it is necessary.

How can we do it?

If our hero celebrates his 34th birthday, it is easy to edit data:

hero.age = 34;

If we need to add some new data:

hero.level = 5;

Now, when we console.log our ‘hero’ object, we see that properties dataset is updated:

javascript objects console.log

When needed to delete some property, we use delete operator:

delete hero.age

JavaScript Objects Methods

Objects also have inbuilt functions, which we call methods.

JavaScript methods are actions that can be declared and performed on objects. Methods represent functions stored as the property.

In our example, let’s say our hero needs to have some moving ability. We can create a function that will allow him to move forward when called. There are several ways to create a method:

hero.move = function(){
    console.log("Move forward!");
}

We can also first define function, and then assign it to an object:

function move(){
    console.log("Move forward!");
}

hero.move = move;

Mostly used way is to create a method right inside an object:

let hero = {
    name: "Vasirius",
    type: "Mage",
    age: 33,
    attack: "fireballs",
    move: function() {
        console.log("Move forward!");
    }
}

ES6 allows us to create it with a shorter syntax:

let hero = {
    name: "Vasirius",
    type: "Mage",
    age: 33,
    attack: "fireballs",
    move() {
        console.log("Move forward!");
    }
}

Methods are called like any other function, with object name appended:

hero.move();

The use of Objects

Because of objects’ attributes to store data, it is possible to use them for some automation of our code.

Let’s say we need to create additional heroes. That would require creating new objects, with their own name, age, type, etc. This is opposed to the general rule of coding “do not repeat yourself”. Thanks to objects, we can make it much easier and faster.

How can we make our code more effective with objects?

First we create a function, with properties. Inside the function, we define instructions for setting object’s properties:

function hero(name, type, age, attack) {
    this.name = name;
    this.type = type;
    this.age = age;
    this.attack = attack;
}

We use this value, which will reference our object when we call the function.

Now we can create objects using object constructor syntax new Object(), or in our case new hero(). Inside the brackets, we define values for listed property names:

let vasirius = new hero("Vasirius", "Mage", 33, "Fireballs");
let gaya = new hero("Gaya", "Hunter", 25, "Arrows");
let havron = new hero("Havron", "Tank", 37, "Axe");

If we console.log our heroes, we can see the result:

javascript objects function console.log

This is a great example of how using objects can facilitate our work and make our code more effective.

Conclusion

JavaScript Objects are one of the most important features of JavaScript for storing data and to create relations between the data. Unlike arrays, objects allow more complex code operations.

Learning JavaScript Objects is a great way to begin thinking in terms of object-oriented programming.

Knowing objects, arrays, and methods, allows you to manipulate the data and create complex relations.

Leave a Comment

Your email address will not be published.

%d bloggers like this: