Shortest syntax to assign properties from function call to an existing object in JavaScript

Javascript Web Development Front End Technology

In JavaScript, objects can be created and assigned properties in a variety of ways. One popular approach is to use the shortest syntax to assign properties from a function call to an existing object. In this article, we will explore how to use this technique and discuss some considerations when using it.

An object in JavaScript is a separate entity having properties and a type. JavaScript objects can have properties that specify their attributes.

Spread syntax (…)

An iterable, such as an array or string, can be expanded in places where zero or more arguments or components are expected,using the spread (...) syntax. The spread syntax lists the properties of an object in an object literal and adds the key-value pairs to the newly generated object.

Spread syntax matches rest syntax exactly. Spread syntax can be thought of as the antithesis of rest syntax. While rest syntax gathers numerous elements and "condenses" them into a single element, spread syntax "expands" an array into its elements. see rest property and rest parameters.

Syntax

Following is the syntax for Spread syntax(..)

var variablename1 = [...value];

let’s look into the following example to understand more about shortest syntax to assign properties from function call to an existing object in JavaScript.

Example

In the following example, we are using running a script to assign properties using spread syntax.

<!DOCTYPE html>
<html>
<body>
   <p id= "tutorial" ></p>
   <script>
      function exist() {
         return {
            car1: "BMW",
            car2: "TESLA"
         }
      }
      let existingObject = { car3: "BENZ" }
      existingObject = { ...existingObject, ...exist() };
      document.getElementById("tutorial").innerHTML=JSON.stringify(existingObject);
   </script>
</body>
</html>

Example

Let’s consider the another example using the spread syntax.

<!DOCTYPE html>
<html>
<body>
   <p id= "tutorial" ></p>
   <script>
      function sum(a, b, c) {
         return a + b + c;
      }
      const numbers = [4, 8, 5];
      console.log(sum(...numbers));
      document.getElementById("tutorial").innerHTML=JSON.stringify(sum.apply(null, numbers));
   </script>
</body>
</html>

On running the above script, the web-browser will display the data used in the script on the webpage with the help of the event that was triggered, when the user ran the script.

We can also use the Object.assign() method

Object.assign()in JavaScript

The Object.assign() is a method in JavaScript that copies the values of all enumerable properties from one or more source objects to a target object. It returns the target object.

This method is used to merge two or more objects together into a single object, with each source overriding any conflicting key/value pairs in the target object.

Example

Consider the following example, where we are using the Object.assign().

<!DOCTYPE html>
<html>
<body>
   <p id= "tutorial" ></p>
   <script>
      function make()
      {
         return {
            num: 22,
            vehicle: "bike"
         };
      }
      let someObject = {
         num: 25,
         coffee: "black"
      };
      Object.assign(someObject, make());
      document.getElementById("tutorial").innerHTML=JSON.stringify(someObject);
   </script>
</body>
</html>

When the script gets executed, the event gets triggered and compares all the data, and along with the later added objects get printed on the webpage.