Javascript - Object Literals

Enhanced object literals was introduced in Javascript ES6.

What is an Object Literal ?

An Object is a special type of value in javascript that can have connections with other values. It is an object value that you literally write in your program/app.

An Object Literal usually consists of a list of comma-seperated name-value pairs (property:value), wrapped inside curly braces {}.

Object Literal example:

const dog = {
	name: 'Naya',
	age: 2,
	breed: 'Rottweiler mix'
}

JavaScript

When I say usually, I mean that an object literal could also be empty of contain a single name-value pair:

// Empty
const dog = {};

// Single
const dog = {
	name: 'Naya'
}

JavaScript

With ES6, we can destructure variables into keys and values.

With ES5 (before)

var name = "Sujay Kundu";
var age = 24;
var nationality = "Indian";
var designation = "Software Engineer"

var user = {
	name: name,
	age: age,
	nationality: nationality,
	designation: designation
}

console.log(user);
// {name: "Sujay Kundu", age: 24, nationality: "Indian", designation: "Software Engineer"}

JavaScript

With ES6 (After)

var name = "Sujay Kundu",
var age = 24;
var nationality = "Indian";
var designation = "Software Engineer";

var user = {
	name,
	age,
	nationality,
	designation
}
console.log(user);
// {name: "Sujay Kundu", age: 24, nationality: "Indian", designation: "Software Engineer"}

JavaScript

If variable names are same as the properties name then we can skip the assigning the values to the properties and use the above syntax to declare objects.

Declaring functions inside objects

With ES5 (before)

var name = 'Sujay Kundu';
var age = 24;
var nationality = 'Indian';
var designation = 'Software Engineer';

var user = {
	name: name,
	age: age,
	nationality: nationality,
	designation: designation,
	detail: function() {
		return this.name + 'is an' + this.nationality + ", working as " + this.designation;
	}
}
console.log(user.detail());
// Sujay Kundu is an Indian working as Software Engineer

JavaScript

With ES6 (after)

var name = 'Sujay Kundu';
var age = 24;
var nationality = 'Indian';
var designation = 'Software Engineer';

var user = {
	name,
	age,
	nationality,
	designation,
	detail() {
		return this.name + 'is an' + this.nationality + ", working as " + this.designation;
	}
}
console.log(user.detail());
// Sujay Kundu is an Indian working as a Software Engineer

JavaScript

We no longer need to declare function keyword, we can declare the function directly with above syntax.

We can also declare the => fat arrow function.

const math = {
	add: (a, b) => a + b;
	mul: (a, b) => a * b;
	sub: (a, b) => a - b;
	div: (a, b) => a / b;
}
console.log(math.add(1, 1)); // 2
console.log(math.mul(1, 1)); // 1
console.log(math.sub(1, 1)); // 0
console.log(math.div(1, 1)); // 1

JavaScript

Dynamically define properties of an Object

Before ES6

To dynamically define properties of the objects in ES5 or earlier we used to first create the object and then modify it.

var name = "name";

// create empty object
var user = {}

// update the object
user[name] = "Sujay Kundu"

console.log(user.name);

JavaScript

After ES6

With ES6 we can do both the things same time. Computed property names are part of the object literal syntax.

var name = "first";
var suffix = "name";

// create an empty object and assigning the value
var user = {
	[name]: 'Sujay',
	['last' + suffix]: 'Kundu'
}
console.log(user.first + ' ' + user['last name']);
// Sujay Kundu

JavaScript

Declaring duplicate properties

In ES5 and earlier declaring duplicate property names inside object literals in strict mode would throw error.

'use strict'
var user = {
	name: 'sujay',
	name: 'sanket'
}
// syntax error

JavaScript

With ES6:

In ES6, we can declare duplicate property names inside object literals in strict as well as nonstrict mode. It will just overwrite the existing value.

'use strict'
const user = {
	name: 'sujay',
	name: 'sanket'
}
console.log(user.name); // sanket

JavaScript

Hope you understood the topic, for any queries please comment.

Javascript – Object Literals

What is an Object Literal ?

Declaring functions inside objects

Dynamically define properties of an Object

Declaring duplicate properties

1 Comment

Leave a Reply Cancel reply