Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Shortest syntax to assign properties from function call to an existing object in JavaScript
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.
63 Views
