3.7 Spread Operator¶

Concat()¶

Task 1: Create an array containing numbers from 1 to 4.

var arr1 = [1, 2, 3, 4];

console.log(arr1);

The result is: (4) [1, 2, 3, 4]

Task 2: Create another array containing numbers from 5 to 10.

var arr2 = [5, 6, 7, 8, 9, 10];

console.log(arr2);

The result is: (6) [5, 6, 7, 8, 9, 10]

Task 3: Add the task 2 array to the task 1 array.

var arr1 = [1, 2, 3, 4];
var arr2 = [5, 6, 7, 8, 9, 10];

arr1.push(arr2);

console.log(arr1);

The result is: (5) [1, 2, 3, 4, Array(6)]

Well! this is not what we expected. We want the result to be: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Task 4: Check the following code, and understand the result.

var arr1 = [1, 2, 3, 4];
var arr2 = [5, 6, 7, 8, 9, 10];

arr1 =  arr1.concat(arr2);

console.log(arr1);

The result is: (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Task 5: Merge the following arrays together using concat().

var students1 = ["Ali", "Ola"];
var students2 = ["Sami", "Sanad", "Jojo"];

students1 = students1.concat(students2);

console.log(students1);

The result is: (5) ["Ali", "Ola", "Sami", "Sanad", "Jojo"]

Task 6: Merge the following arrays together using concat().

var salaries1 = [100, 500, 2000];
var salaries2 = [2000, 4000, 700];

salaries1 = salaries1.concat(salaries2);

console.log(salaries1);

The result is: (6) [100, 500, 2000, 2000, 4000, 700]

Spread Operator¶

Task 7: Check the following code, and compare it with task 6.

var salaries1 = [100, 500, 2000];
var salaries2 = [2000, 4000, 700];

salaries1 = [...salaries1, ...salaries2];

console.log(salaries1);

The result is: (6) [100, 500, 2000, 2000, 4000, 700]

Task 8: Check the following code, and compare it with task 5.

var students1 = ["Ali", "Ola"];
var students2 = ["Sami", "Sanad", "Jojo"];

students1 = [...students1, ...students2];

console.log(students1);

The result is: (5) ["Ali", "Ola", "Sami", "Sanad", "Jojo"]

Task 9: Add arr2 and arr3 to arr1 using spread operator.

var arr1 = ["a", "b", "c", "d"];
var arr2 = ["e", "f", "g"];
var arr3 = ["I"];

arr1 = [...arr1, ...arr2, ...arr3];

console.log(arr1);

The result is: (8) ["a", "b", "c", "d", "e", "f", "g", "I"]

Task 10: Get a copy of arr1, and store it in arr2. Use the spread operator.

var arr1 = [10, 20, 30, 40, 50];
var arr2 = [...arr1];

console.log(arr2);

The result is: (5) [10, 20, 30, 40, 50]

Task 11: Get a copy of salaries, and store it in salariesCopy. Use the spread operator.

var salaries = [500, 600, 800, 700];
var salariesCopy = [...salaries];

console.log(salariesCopy);

The result is: (4) [500, 600, 800, 700]

Task 12: Read the following code, and understand the result.

var numbers = [5, 7, 99, 10, 0, 17];
var minValue = Math.min(...numbers);

console.log(minValue);

The result is: 0

Task 13: Read the following code, and understand the result.

var numbers = [5, 7, 99, 10, 0, 17];
var maxValue = Math.max(...numbers);

console.log(maxValue);

The result is: 99

Task 14: Remove the values less than or equal to 30 from the following array. Then, multiply every value by 2. Find the maximum and minimum values of the resultant array. Find the average of maximum and minimum values (min + max) / 2.

var myArray = [5, 10, 60, 7, 8, 80, 100, 8, 9, 10, 20, 30, 40];

var newArray = myArray.filter(value=>value > 30).map(val=>val*2);
var minValue = Math.min(...newArray);
var maxValue = Math.max(...newArray);
var result = (minValue + maxValue) / 2;

console.log(result);

The result is: 140

Task 15: Add 5 to every element of the following array. Then, find the maximum value of the resultant array.

var arr = [7, 9, 0, 50, 8];

var maxValue = Math.max(...arr.map(value=>value+5));

console.log(maxValue);

The result is: 55

Task 16: If all the elements of the following array are less than 5, find the minimum value of the array. Otherwise; find the maximum value.

var arr = [3, 4, 2, 0, 1];

var result = arr.every(value => value < 5) ? Math.min(...arr) : Math.max(...arr);

console.log(result);

The result is: 0

Task 17: Re-do task 16 for the following array.

var arr = [35, 40, 20, 80, 70];

var result = arr.every(value => value < 5) ? Math.min(...arr) : Math.max(...arr);

console.log(result);

The result is: 80

Task 18: If some of the elements in the array below are less than zero, display the array elements. Hint: use the spread operator.

var arr = [-1, 8, -4, 0, 5];

if(arr.some(value=>value<0)){
  console.log(...arr)
};

The result is: -1 8 -4 0 5

Task 19: Combine the following two arrays. Find the average of their values.

var arr1 = [1, 5, 9, 10, 7];
var arr2 = [8, 7, 10, 14, 11, 15];

var result = ([...arr1, ...arr2].reduce((sum, value) => sum + value)) / (arr1.length + arr2.length);

console.log(result);

The result is: 8.818181818181818