Objects in Javascript

The object is JavaScript’s most fundamental data type and complex data structure. Understanding them is crucial in learning and programming in JavaScript, and Hence in this tutorial, we will explore what a JavaScript object is. We will also learn how to create and use them.

What is an object in Javascript?

An object is a collection of key-value pairs. Each key-value pair is known as a property. The key is the property’s name, and the value is its value.

Objects provide a way to group several values into a single value. You can group values of other types like strings, numbers, booleans, dates, arrays, etc. An object can also contain other objects. We can quickly build a more complex structure using them.

Object Property

Each key-value pair in the key-value collection is a property of the object.

The Javascript objects can have any number of properties. You can also create an empty object without any properties.

The key or name of the property must be unique. The property name is string (But it can also be a symbol type). Each property must have a unique name.

We store or retrieve the value of an object using its property name (key). Value can be any valid Javascript value. For example, string, number, date, function, or another object.

Types of Properties

There are two kinds of properties in JavaScript. Data Properties & Accessor Properties.

The Data Property maps to a value. The value can be a primitive value, object, or function.

The Accessor property does not map to a value but to one or two accessor functions. The accessor functions (known as getter & setter functions) contain the logic to store or retrieve the value.

How to Create Objects in Javascript

There are several different ways to create new objects in Javascript

  1. Using Object Literal
  2. Using a new keyword with a constructor function
  3. Object.create method
  4. Using ES6 Class Statement
  5. Object.assign() method

Creating a Data Property

The following examples use the object literal syntax to create an object in JavaScript.

An object literal is a list of key-value pairs, each separated by a comma and wrapped inside curly braces. Using it is the easiest way to create an object.

In the example above firstName, lastName, & age are property names and Allie, Grater, & 50 are values.

JavaScript Object Using Object Literal

You can refer to the tutorial object literal.

Creating a Accessor Property

The following example shows how to create an object with an Accessor Property color. We do not map color to a value but to get & set JavaScript functions.

The color behaves like a Data Property, but behind the scenes, JavaScript executes the get method when we access the property and the set method when we assign a value.

Refer to Getters & Setters in JavaScript for more on accessor properties

Object Methods

Methods are like verbs. They perform actions.

Unlike the programming languages like C# & Java, Javascript allows us to store the function in a variable and use it later.

When we assign a function to a property, we call that property a method.

In the following example, we assign a function to the Property fullName

Property Names

We can use any string as Property Name.

But if the Property name does not follow the JavaScript identifier rules, then we will have to use the square brackets( [ ] ) while declaring them or accessing them. We can also use the quotes while accessing the properties using the object literal syntax

The ES6 allows us to use an expression inside the brackets. Refer to the Computed Property name article to learn more about it.

Accessing the Property

You can access the Property of a JavaScript Object in two ways.

  1. Dot notation
  2. Bracket notation

In dot notation, we use the object’s name followed by a dot and the property’s name. In the following example, we access the firstName and lastName properties using the dot notation.

The dot notation works if the property names follow the JavaScript rules for identifiers. We will have to use the [] bracket notation if they don’t.

In the example below, the full name contains a space, which is not a valid JavaScript identifier. To access it, we need to use the [] bracket notation

Adding or deleting Properties

JavaScript allows us to add or remove Properties to an existing object at any time.

The following code creates a new object person. Later it will add a fullName property, which is a function.

Similarly, you can remove a property using the delete statement. In the following example, we delete the age property of the person object.

Everything is an Object in JavaScript

Javascript has seven primitive data types string, number, bigint, boolean, undefined, symbol, and null

Everything else is an object. For example Dates, Functions and arrays are all Objects.


Objects Reference

1 thought on “Objects in Javascript”

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top