Introduction to JavaSript Objects.

Overview

Javascript object is a generic container which contains keys and associated values. Object data type can be used to model a real world entity which can have multiple properties and its values.

In this article we will learn how to create an object, assign, access, delete and update object properties.

1. Object Property and methods

Object can have methods and properties. Properties are key:value pair, where key is the name of the property and value is the value of property, which can be of any data type.

Object properties name can be either string or Symbol, however property value can be any data type available in javascript, for eg. Number, Boolean and function etc.

In below code snippets, we have a person object, which has two properties.

let person = {
  name: "Ben Affleck",
  introduce: function() {
    console.log("I'm batman")
  },
}

The first property has the key name and value "Ben Affleck".
The second property has the key introduce and its value is an method.

Each value is associated with a unique key, so it's very easy and efficient to access and delete object properties using its keys.

2: Object Creation

There are two ways to create a JavaScript object.

Using literal syntax.
Using Object Constructor and new Keyword.

let person = {} //literal syntax
let person = new Object() //using Object Constructor

In both case you have created an empty object called person.

The main difference between these two objects is that object created by Object constructor can be used to instantiated multiple instances of it using new keyword while literal syntax creates just a singleton object.

I will be using literal syntax to create objects in this article because it more common and preferred method to create an object.

3: Add and Access Object Properties

There are mainly three ways to add properties to an javascript object.

At Object creation.
Using dot notation.
Using Square brackets notation.

3.a: While Creating an Object

You can create a object with some existing property by adding key and associating it with a value.

let person = {
  name: "Ben Affleck",
  "super hero name": "Batman", //multi-word property name
}

Here we created person Object using literal syntax, it has 2 properties (keys)named "name", and "super hero name".

Multi-word property name must be wrapped in quotes (either single or double).

3.b: Using `.` dot notation

dot . notation can be used to add properties to an existing object.

let person = {} //create empty object
person.name = "Ben Affleck"
person.gender = "Male"

You can also access properties using . notation.

console.log(person.name) // 'Ben Affleck

Un assigned property of an object is undefined.

console.log(person.age) //undefined

Multi-word properties can not be added or accessed using . notation.

let person = {};
let person."super hero name" = "Batman"; //error

3.c: Using Square Bracket `[]` notation

Square bracket notation is very useful when you are trying to add or access multi-word property. for eg.

let person = {};
person.super hero name = "Batman"; //error
person["super hero name"] = "Batman"; //correct way

Square bracket [] notation can be used to create and access dynamic keys name. for eg.

let heroName = "super hero name"
let person = {
  [heroName]: "Batman", //heroName will replaced by "super hero name";
}
//same as person["super hero name"]
person[heroName] //Batman

Internally all keys in [] notation are converted into string (except Symbol) using toString() function. In above eg. heroName.toString() was converted into "super hero name".

4. Updating Properties

Updating Object properties is as simple as assigning a new value to an existing property, both . (dot) and [] (Square bracket) can be used to update object properties;

let person = {
  name: "Ben Affleck",
}
person.name = "Christian Bale" //name updated
//or
person["name"] = "Christian Bale" //name updated

5. Removing Object Properties

Obect property can be removed using delete operator. like so

delete person.name //returns true

delete Operator returns true if object property was successfully removed, or property didn't exist on the object.

Conclusion

JavaScript objects are the main building blocks of a application. In this article we barely scratch the surface of JavaScript Objects. There is a lot more to know about this topic. To know more about JavaScript object , read Mozilla Developer Network Object Documentation.