- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
JavaScript Spread Operator
The JavaScript spread operator allows us to expand an array into individual array elements. To use the spread operator three dots (…) should be preceded by the array name.
Following is the code for the JavaScript spread operator −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.result {
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript Spread Operator</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button combine the two arrays using spread operator
into a new one
</h3>
<script>
let resultEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let arr1 = [1, 2, 3, 4, 5];
let arr2 = ["A", "B", "C", "D", "E"];
sampleEle.innerHTML = "arr1 = " + arr1 + "<br> arr2 = " + arr2;
document.querySelector(".Btn").addEventListener("click", () => {
let arr3 = [...arr1, ...arr2];
resultEle.innerHTML = "arr3 = " + arr3;
});
</script>
</body>
</html>Output
On clicking the ‘CLICK HERE’ button −
Updated on 12-May-2020 06:01:16
- Related Questions & Answers
- What is spread Operator (...) in JavaScript?
- Spread operator for arrays in JavaScript
- Spread operator in function calls JavaScript
- Usage of rest parameter and spread operator in JavaScript?
- How to clone an array using spread operator in JavaScript?
- How to clone an object using spread operator in JavaScript?
- Using JSON.stringify() to display spread operator result?
- How to find maximum value in an array using spread operator in JavaScript?
- How to use spread operator to join two or more arrays in JavaScript?
- Rest and Spread operators in JavaScript
- How to use Spread Syntax with arguments in JavaScript functions?
- Types of Option Spread Strategies
- Instanceof operator in JavaScript
- Has intolerance really spread in India?
- Explain exponentiation operator in JavaScript?
Advertisements