Objects in Javascript

The Object is the most fundamental data type and also complex data structure in JavaScript. Understanding Objects is crucial in learning and programming in JavaScript. In this tutorial, we will learn what are objects in JavaScript and how to create objects 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 property, where the key is the name of the property and value its value

Objects provide a way to group several values into a single value. You can group any values of other types like string, number, booleans, dates, arrays, etc. An object can also contain other objects. We can easily 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 can also be a symbol type). No two properties can have the same 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 Accessor Property color. We do not map color to a value, but to get & set JavaScript functions.

The color behaves likes a Data Property, but behind the scene, JavaScript executes the get method when we access the property and the set method when we assign a value to it.

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 declaring the properties using the object literal syntax

In the ES6, we can also use an expression inside the brackets. Refer to the Computed Property name article to learn more about it.

Accessing the Property

There are two ways in which you can access the Property of a JavaScript Object

  1. Dot notation
  2. Bracket notation

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

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

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

Adding or deleting Properties

The JavaScript allows us to add or remove Property to an already existing object anytime

The following code creates a new object person. Later it will add a fullName property, which is actually 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 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, arrays are all Objects.

Leave a Comment

Your email address will not be published.

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

Scroll to Top