LuisLlamas Logo
objetos-en-javascript

How to use objects in JavaScript

  • 4 min
  • Beginner

In JavaScript, an Object is a grouping of properties under a single variable. It’s 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"
};
Copied!
  • 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’s much more convenient to handle your person grouped like this than as separate variables.

How to Create Objects

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

Literal Object Syntax

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

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

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

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

let person = {};
Copied!

Using the Object Constructor

Another way to create objects is by using the Object constructor (it’s 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";
Copied!

Using Classes (ES6)

JavaScript is a prototype-based language, but in ES6 class syntax was introduced, 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.

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

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

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
Copied!

We will cover this in its own article.

Object Manipulation

In JavaScript we can not only modify the values of an object’s properties. We can also add or delete them dynamically.

Adding Properties

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

student.major = "Engineering";
Copied!

Deleting Properties

To delete properties, use the delete operator:

delete student.major;
Copied!

Checking for Property Existence

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

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

Functions in Objects

Objects in JavaScript don’t just store data. They can also contain functions. When a function is part of an object, it’s called a method.

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

person.greet();
Copied!
  • 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