Objects

An object is a datatype which stores various key-value pairs and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.

const person = {
    firstName : 'John',
    lastName : 'Doe',
    age : 30
};

Above code snippet shows an object named 'person' having 3 key-value pairs created using literal syntax.

Enhanced Object Literals

ES6 has introduced three new features which enhance object literals.

Including object inside object

Let's consider two objects - pet and person. If we want to include object pert inside object person, we used to store it in a variable. With new ES6 feature, we can just write name of the object.

const pet = {
    animal : 'Dog',
    name : 'Oreo'
};

const person = {
    firstName : 'John',
    lastName : 'Doe',
    age : 30

    pet : pet, // Before ES6
    pet,       // After ES6
}

Writing methods in object

In ES6, we longer have to create a property and then set it to a function expression. We can directly create a property and wite function body.

const person = {
    firstName : 'John',
    lastName : 'Doe',
    birthYear : 1995,

    calcAge : function () {
        return 2023 - this.birthYear;
    } // Before ES6

    calcAge () {
        return 2023 - this.birthYear;
    } // After ES6
}

Array values as properties in object

In ES6, we can use array values as properties in an object. Let's see an example.

const days = [1, 2, 3];

const obj = {
    [days[0]] : 'Monday',
    [days[1]] : 'Tuesday', 
    [days[2]] : 'Wednesday' 
};

Sets

Sets is a built-in data structure of JavaScript, introduced in ES6. It is a collection of unique values. It cannot contain any duplicates.

const numSet = new Set([1, 4, 3, 4, 2, 1, 7]);
console.log(numSet); // { 1, 4, 3, 2, 7 }

const nameSet = new Set('William');
console.log(nameSet); // { 'W' 'i' 'l' 'l' i' 'a' 'm' }

Set methods

size

This method returns the length of the set. Note that it is size and not length.

const numSet = new Set([1, 2, 3, 2, 1]);
console.log(numSet.size); // 3

has

This method checks if the set contains a given value. It return a boolean value.

const numSet = new Set([1, 2, 3, 2, 1]);
console.log(numSet.has(4)); // false
console.log(numSet.has(3)); // true

add

This method adds a new value to the set.

const friends = new Set(['David', 'Winona', 'Ray']);
friends.add('Millie');
console.log(friends); // {David, Winona, Ray, Millie}

delete

This method removes a value from the set.

const friends = new Set(['David', 'Winona', 'Ray']);
friends.delete('Winona');
console.log(friends); // {David, Ray}

clear

This method removes all the elements present in the set

const friends = new Set(['David', 'Winona', 'Ray']);
friends.clear;
console.log(friends); {}

We can also get each element of the set by using for-of loop

const friends = new Set(["David", "Winona", "Ray"]);
console.log(friends);
for (const friend of friends) {
  console.log(friend);
}
// David
// Winona
// Ray

Maps

Maps is a built-in data structure of JavaScript, introduced in ES6. It is a collection of key-value pairs just like an object. It can have any type of keys like arrays, objects or even other maps.

The easiest way to create maps is to create an empty map and then fill it in using set method.

Map methods

set

This method adds new key-value pair into maps.

const person = new Map();
person.set('firstName', 'John');
person.set('lastName', 'Doe');
person.set('friends', '['David', 'Ray']');
console.log(person);
// 'firstName' => 'John', 'lastName' => 'Doe', 'friends' => ['David', 'Ray']

get

This method returns the value of property asked by user.

const person = new Map();
console.log(person.get('firstName')); // John
console.log(person.set('lastName')) // Doe

has

This methods checks if the map contains given key and returns a boolean value.

const person = new Map();
console.log(person.has('petName')); // false

delete

This method deletes the key-value pair of given key name.

const person = new Map();
person.delete('friends'));
console.log(person); // 'firstName' => 'John', 'lastName' => 'Doe'

size

This method returns the number of key-value pairs present in the map.

const person = new Map();
console.log(person.size); // 2

clear

This method removes all the key-value pairs in the map.

const person = new Map();
person.clear;
console.log(person); // {}

---

This was all about ES6 features. Let's learn about arrays in depth, in the upcoming blog. Stay tuned! 😄