Spread Operator (...)
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>JavaScript spread Operator (...)</title>
</head>
<body>
<!--
Spread operator (...) : allows us to quickly copy all or part of an existing array or object into another array or object.
Spread syntax can be used when all elements from an object or array need to be included in a new array or object, or should be applied one-by-one in a function call's arguments list.
There are three distinct places that accept the spread syntax:
- Function arguments list (myFunction(a, ...iterableObj, b))
- Array literals ([1, ...iterableObj, '4', 'five', 6])
- Object literals ({ ...obj, key: 'value' })
-->
<h1>Demo : Spread Operator (...)</h1>
<div>
<h2>Spread operator (...) Example</h2>
<p id="para1"></p>
<p id="para2"></p>
</div>
<div>
<h2>Spread operator used in Array concatenation</h2>
<p id="para3"></p>
</div>
<div>
<h2>Spread operator in Objects will override the values of same keys</h2>
<p id="para4"></p>
</div>
<div>
<h2>Spread operator used in Objects for adding new key-value pairs</h2>
<p id="para5"></p>
</div>
<!-- JavaScript code Starts here -->
<script>
/************************************************/
// Spread Operator (...)
//
const runScored = [123,56,101,37,56,112,65,12,89,210];
document.getElementById('para1').innerHTML =
`${Math.max(runScored)}`; //NaN
document.getElementById('para2').innerHTML =
`${Math.max(...runScored)}`; //210
/************************************************/
// Spread Operator (...)
// Example : spread in Arrays concatenation
//
const flagIndia = ['Orange', 'White', 'Green'];
const flagGermany = ['Black', 'Red', 'Yellow'];
const twoFlagColors = [...flagIndia, ...flagGermany]; //Arrays concatenation
document.getElementById('para3').innerHTML =
`Two flag arrays concatenated resultant array = [${twoFlagColors}]`;
/************************************************/
// Spread operator (...)
// Example : Spread operator in Objects will override the values of same keys
//
const messi = { country: 'Argentina', club: 'PSG' };
const ronaldo = { country: 'Portugal', club: 'MANU' };
const goat = { ...ronaldo, ...messi }; // will override the values of same keys
document.getElementById('para4').innerHTML =
`The new object "goat" contains following values = country : ${goat['country']} , club: ${goat['club']} `;
/************************************************/
// Spread Operator (...)
// Example : Spread operator used in Objects for adding new key-value pairs
//
const registerUser = {
email: 'example@skillzam.com',
password: 'Pa$$w0rd',
username: 'example123'
}
const newUser = { ...registerUser, uid: 1234, isAdmin: false }
document.getElementById('para5').innerHTML =
`The new object "newUser" contains following key-value paris = <BR>
{ email : ${newUser['email']} , password: ${newUser['password']} , username : ${newUser['username']} , uid: ${newUser['uid']} , isAdmin : ${newUser['isAdmin']} } `;
</script>
<!-- JavaScript code Ends here -->
</body>
</html>