What is an Object Literals in JavaScript? Usage and Examples

In this article, you’ll learn about object literals in JavaScript, including their definition, usage, and examples.

You’ll understand the distinction between objects and object literals, and grasp the versatility they offer in JavaScript for creating, structuring, and manipulating data.

So what are you waiting for, let’s dive in to enhance your JavaScript skills!

What is an object literal in JavaScript

An object literals is a data type that is utilized for defining objects in JavaScript.

It is a way to create an object in JavaScript using a comma-separated list of key-value pairs enclosed in curly braces.

The keys, also known as properties, can be strings or identifiers, while the values can be any valid expression.

Additionally, object literals are a common way to store data and they can also represent more complicated things like objects, arrays, functions, and regular expressions.

They’re also handy for keeping details about a specific example of something, like its characteristics and what it can do.

Usage and Examples of object literal in JavaScript

For instance, let’s consider the following object literal that contains details about an employee:

let employee = {
    firstName: "Anne",
    lastName: "Smith",
    age: 18,
};

Object literals have the capability to include nested object literals and functions.

For instance, the following object literal holds data about an employee and incorporates a function to display a greeting message:

let employee = {
    firstName: "Anne",
    lastName: "Smith",
    age: 18,
    greet: function() {
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);
    }
};

You can utilize the dot notation to reach its properties and methods, like this:

 this.firstName 

and

this.lastName

By this moment, we are almost done, and if you want to see the output, we are going to use the following:

employee.greet();

And that’s it we’re finally done!

Here’s the complete code:

let employee = {
    firstName: "Anne",
    lastName: "Smith",
    age: 18,
    greet: function() {
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);
    }
};

employee.greet(); // This line calls the greet method and produces the output

In this example, we create an object person with four properties: firstName, lastName, age, and greet.

The first three properties have string and number values, while the last property has a function value.

This function can be called using the dot notation like this:

employees.greet();

Output:

Hello, my name is Anne Smith

Object literals are commonly used in JavaScript for various purposes such as creating objects, passing options to functions, returning multiple values from functions, and defining data structures.

They provide a concise and readable way to create objects with pre-defined properties and methods.

Difference between object and object literal in JavaScript

An object in JavaScript is a group of properties, wherein each property is a key-value pair.

A key can be a string or a symbol, and a value can be any valid JavaScript value.

Objects can be created using the new Object() constructor or the object literal notation {}.

On the other hand, an object literal is a way to create an object using a comma-separated list of key-value pairs enclosed with curly braces {}.

The keys, also known as properties, can be strings or identifiers, while the values can be any valid JavaScript expression.

So, in a simple understanding, an object is a collection of properties, while an object literal is a specific way to create an object using the literal notation {}.

Conclusion

To sum up, object literals are a fundamental way to define and create objects in JavaScript by using key-value pairs enclosed in curly braces {}.

They are versatile and can store various types of data, including nested objects and functions. Object literals are commonly used for creating objects, passing options to functions, and defining data structures in a concise and readable manner.

It’s important to note that while an object is a general collection of properties, an object literal is a specific notation for creating objects in JavaScript.

We are hoping that this article provides you with enough information. That will help you understand the object literals in JavaScript.

If you want to dive into more JavaScript topics, check out the following articles:

• Primitive data types in JavaScript
• Data types in JavaScript
• some() method in JavaScript

Thank you for reading Itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →