Language: EN
LuisLlamas Logo
Search
⏲️ ~ 3 minutes Beginner
objetos-en-javascript

How to use objects in JavaScript

In JavaScript, an Object is a grouping of properties under a single variable. It is a much more convenient way to manage data than having it in separate variables.

Under the hood, a property is a combination of:

  • Key (the “name” of the internal variables)
  • Value (the “value” of the internal variables)

Let’s see it with an example. Imagine you wanted to represent a person in JavaScript, you could do it like this:

let person = {
    name: "Luis",
    age: 30,
    spouse: "Maripili"
};
  • name, age, and spouse are properties of the person object.
    • Each property has a Key (for example, name)
    • Each property has a Value (for example, Luis)

It is much more convenient to handle your person like this grouped than as loose variables.

How to create objects

There are several ways to create an object in JavaScript. The most common are:

Object literal syntax

The most common way to create an object in JavaScript is using object literal notation, or brace notation.

This syntax consists of defining the object within braces {}, where each property or method is declared as key: value.

let person = {
    name: "Luis",
    age: 30,
    spouse: "Maripili"
};

Or, you can also create an “empty” object like this:

let person = {};

Using the Object constructor

Another way to create objects is using the Object constructor (it is less common but equally valid).

let person = new Object();

// the object has no properties
// we can add them later
person.name = "Luis";
person.age = 30;
person.profession = "Maripili";

Using classes (ES6)

JavaScript is a prototype-oriented language, but ES6 introduced class syntax, which makes it easier to create objects using a structure more familiar to those coming from languages like Java or C++.

Accessing properties and methods

There are two main ways to access the properties of an object: dot notation and bracket notation.

The dot notation is the most common and readable way to access properties and methods.

console.log(person.name); // Prints: "Luis"

The bracket notation is useful when you want to access a property whose name may vary dynamically (like a variable). Or when the property name contains special characters or spaces.

console.log(person["age"]); // Prints: 30

We will see it in its own article.

Manipulating objects

In JavaScript, we can not only modify the values of the properties of objects. We can also add or remove them dynamically.

Adding properties

You can add new properties to an object at any time:

student.major = "Engineering";

Removing properties

To remove properties, use the delete operator:

delete student.major;

Checking the existence of properties

Use the in operator to check if a property exists in an object:

console.log("name" in student); // true
console.log("major" in student); // false

Functions in objects

Objects in JavaScript not only store data. They can also contain functions. When a function is part of an object, it is called a method.

let person = {
    name: "Luis",
    age: 30,
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

person.greet();
  • name, age, and profession are properties of the person object.
  • greet is a method, which is a function associated with the object.
  • To invoke the greet() method, we must use () after the property name.

This is because in JavaScript, functions are first-class citizens. That is, they can be stored in variables, just like any other value.

On this page