Spread Operator tutorial in Advance JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Spread Operator tutorial Advance JavaScript</title>
<link rel="stylesheet" href="">
</head>
<body>
<script>
//"..." is Rest Operator and Rest Operator will convert values(Here below values are 20,30,40...) in Array.
//"..." is Spread Operator and Spread Operator will Spread Array Values .
//Rest Operator is used at the time of function declaration and Spread Operator is used at the time of function Calling.
//We can use Spread Operator "..." with Arrays as well as Object also.
//Example 1 :
function sum(name, ...args) {
console.log(arguments);
document.write(`Hello ${name} : `);
let sum = 0;
for (let i in args) {
sum += args[i];
}
document.write(sum);
}
var arr = [10, 20, 30, 40];
sum("World", ...arr);
document.write("<br><br><br>");
//Example 2 :
var arrTwo = [10, 20, 30, 40];
console.log(...arrTwo);
console.log([...arrTwo]);
var arrThree = [...arrTwo];
arrTwo.push(50);
console.log(arrTwo);
console.log(arrThree);
//Example 3 :
var arr1 = [10, 20, 30, 40];
var arr2 = [50, 60];
var arr3 = arr1.concat(arr2); //concat Without Spread Operator
document.write(arr3 + "<br><br>");
var arr3 = [...arr1, ...arr2]; //concat with Spread Operator
document.write(arr3 + "<br><br>");
var arr3 = [...arr2, ...arr1]; //concat with Spread Operator Sequence Change
document.write(arr3 + "<br><br>");
var arr3 = [5, ...arr1, ...arr2, 65]; //concat with Spread Operator and add Values simultaneously
document.write(arr3 + "<br><br><br><br>");
//Example 4 :
var obj1 = {
name: "Hello World",
course: "BTech"
};
var obj2 = {
age: 25
};
var obj3 = { ...obj1, ...obj2 };
document.write(obj3);
console.log(obj3);
</script>
</body>
</html>.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment