Object in ES6

Object in ES6

The term object can be defined as an instance that contains the group of key-value pairs. We can modify it using the life cycle of an object in the same way as a dictionary and hash map. The object helps us to determine the procedure of the data types in JavaScript. We can easily present the complex or more than one value with the help of objects. It is not possible with primitive data types.

We can define various types of values, such as scalar value or array of objects or functions. The object contains the unordered data and stores of values. An object can be defined with the help of curly braces ({…}) associated with the properties list (It is optional).

The property is a “key: value” pair in which the key is a property name or string, and the value can be anything.

Syntax

There are following two ways to create an object(empty).

• With the help of object constructor
• With the help of object Literal

var name = new Object();                        // Syntax with object constructor
var person = {};                                     // Syntax with object Literal

Object Literal Syntax Extension in ES6

The Object also has a literal syntax like primitive data types. The Object literal is the most common way to make an object in JavaScript programming language. ES6 provides various ways of expanding syntax, which makes the object literal more precise and robust.

Object Property Initializer

In ES5, the object literal is considered as the set of name­-value pairs.

Syntax in ES5

function person(name, age)
{
          return
{
          name: name,
          age: age
};
}

In the above syntax, we have created a function person () having two arguments name and age.  It returns a new object literal that contains two properties name and age. These two properties hold the values of function parameters.

 There is a drawback in the above syntax. The property’s name and age are repeated twice in keys and values. The ES6 removes the imitation if the object property and local variable have the same name.

We will try to illustrate the same syntax in ES6.

Syntax in ES6

function person (name, age)
{
          return
{
          name,
          age
};      
}

In the above syntax code, the JavaScript engine refers to the value of arguments (name and age) to properties (name and age).

 Example

Here, we have an example of creating the object literal with the help of a local variable.

Let pname = ‘Jack’,
       page = ‘23’;
let person = {
     pname,
     page      
};
console.log(person.pname);
console.log(person.page);

Output

After the successful execution of the example, we got the following output:

Concise Method Syntax

Before ES6, when we use to define a method for an object, we must have to mention the name and definition of the complete function.

Example1

Here, we have an example to understand the concise syntax method.

let person =
{
          fname: “Robin”,
          lname: “Watson”
          fullname: function()
{
          return this.fname + “ ” + this.lname;
}
};

In ES6, we can use short syntax, which is also known as concise method syntax. It helps us to make object literal method concise by discarding the colons (:) and the function keyword.

Here, we have another example to implement the same-

Example2

let person =
{
          fname: “Robin”,
          lname: “Watson”
          fullname()
{
          return this.fname + “ ” + this.lname;
}
};

Object Cloning

The term ‘cloning’ can be defined as a mechanism of rewriting the object from one variable to another variable. We can use object.assign() method to clone an object.

Example

Here, we have an example to understand the object cloning.

let object1 =
{
          name: ‘Methew’,
          age: 32
};
let cloneobject.age = Object.assign({}, object1);
cloneobject.age = 42;
console.log(Object1);
console.log(cloneobject);

Output

Computed Property Name

Before ES6, the square brackets [] were used to use computed property method for the object properties. We used string literals and variables as the property name. ES6 provides a new feature “Computed property name,” which is a part of object literal syntax. This feature is used to insert the expression into the square brackets for computationand later used as the computed property name.

Example (In ES5)

Here, we have an example to understand the computed property name.

var employee =
{
          id: 001,
          name: ‘Jackson’,
}
var section = ‘sec_name’;
employee[section] = ‘Production’;
console.log(employee);

Output

After the execution of the above code, we got the following output:

Example (In ES6)

var section = ‘sec-name’;
var employee =
{
          id: 002,
          name: ‘Williams’;
          [section]: ‘Security’;
}
console.log(employee);

Output

After the execution of the above example, we got the following output:

Merge Objects in ES6

We can merge two objects in ES6 with the help of following two ways-

• Object spread syntax method
• Object.assign() method

Now, we are going to describe the above two methods in detail.

Object spread syntax method

This method is mostly used in a variable array where we need to store multiple values. In ES6, the object can be considered as the key-value pair entities.They can easily combine into a single entity with the help of the spread operator.

Syntax

var new_object = […object1, …object2]

Example

var object1 = {01: “Hello”, 02: “ES6”};
var object2 = {03: “Welcome”, 04: “to the world”};
var object3 = {05: “of”, 06: “ES6”};
var final_object = {…object1, …object2, …object3};
console.log(final_object);

Output

After the successful execution of the above code, we got the following output:

Object.assign() method

This method is used to merge multiple objects. Object.assign() method is used for copying the properties and values from one object to another target object. This method returns the target object associated with the copied properties and values.

Syntax

Object.assign(target_obj, source_obj)

Example

var object1 = {01: “Hello”, 02: “ES6”};
var object2 = {03: “Welcome”, 04: “to the world”};
var object3 = {05: “of ES6”};
// Using Object.assign()
var final_object = Object.assign(object1, object2, object3);     
console.log(final_object);

 Output

After the execution of the above example, we got the following output:

Delete Properties

We can easily delete or remove the object properties. It can be done by using the delete operator.

Example

Here, we have an example to delete the property of an object with the help of delete operator.

var object = new Object;
Object.p = 100;
Object.q = 200;
delete object.p;
console.log(object.p);

Output

After the execution of the above program code, we got the following output: