ES6 Tutorials : SPREAD Operator with Fun

romeo11
1,162 views

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

ES6 Tutorials : SPREAD Operator with Fun

JavaScript ES6 (ECMAScript 6) introduced the spread operator. The syntax is three dots(...) followed by the array (or iterable*). It expands the array into individual elements. So, it can be used to expand the array in a places where zero or more elements are expected.

1. Copying an array

let fruits = ['Apple','Orange','Banana'];

let newFruitArray = [...fruits];

console.log(copiedList); // ['Apple','Orange','Banana']

2. Concatenating arrays

let arr1 = ['A', 'B', 'C'];

let arr2 = ['X', 'Y', 'Z'];

let result = [...arr1, ...arr2];

console.log(result); // ['A', 'B', 'C', 'X', 'Y', 'Z']

3. Spreading elements together with an individual element

let fruits = ['Apple','Orange','Banana'];

let newFruits = ['Cherry', ...names];

console.log(newFruits); // ['Cherry', 'Apple','Orange','Banana']

4. Spreading elements on function calls

let fruits = ['Apple','Orange','Banana'];

var getFruits = (f1, f2, f3) => {
console.log(Fruits: ${f1}, ${f2} and ${f3}); };

getFruits(...fruits); // Fruits: Apple, Orange and Banana

5. Spread syntax for object literals

var obj1 = { id: 101, name: 'Jhon Doe' }

var obj2 = { age: 25, country: 'USA'}

const employee = { ...obj1, ...obj2 }

console.log(employee); //{ "id": 101, "name": "Jhon Doe", "age": 25, "country": "USA" }

For more questions on ES6 please visit - https://rapides6.herokuapp.com

Solve, Learn and have Fun :)

1
2
3
var prices = [12, 20, 18];
var newPriceArray = [...prices];
console.log(newPriceArray);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
var alphabets = ["A", ..."BCD", "E"];
console.log(alphabets);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
var prices = [12, 20, 18];
var maxPrice = Math.max(...prices);
console.log(maxPrice);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
var max = Math.max(..."43210");
console.log(max);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
const fruits = ["apple", "orange"];
const vegetables = ["carrot", "potato"];
const result = ['bread', ...vegetables, 'chicken', ...fruits];
console.log(result);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
const country = "USA";
console.log([...country]);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
var newArray = Array(...[,,]);
console.log(newArray);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
var newArray = [...[,,]];
console.log(newArray);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

####Learn about ES6 - Default Parameters here - https://tech.io/playgrounds/7337/es6-tutorials---your-guide-for-quick-checks

Open Source Your Knowledge: become a Contributor and help others learn. Create New Content