9.1 Spread (unpacking operator)
The rest and spread operations in JavaScript offer great capabilities for working with arrays, objects, and functions.
These operations help simplify code, making it more expressive and flexible. In this lecture, we'll dive into
the main concepts of rest and spread, along with some examples of how to use them.
The spread (...) operator lets you "unpack" arrays and objects in places where zero or more elements are expected.
This can be handy when copying, merging arrays or objects, and when passing arguments to functions.
Example 1: Copying an array
In this example, copiedArray is a copy of originalArray.
Here the ... operator unpacks the array as a list of variables, and the [] operator packs
the set of variables into a new array:
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // Outputs: [1, 2, 3]
Example 2: Merging arrays
In this example, two arrays array1 and array2 are merged into one array combinedArray.
Here the ... operator unpacks both arrays as a list of variables, and the [] operator packs
the set of variables into a new array:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // Outputs: [1, 2, 3, 4, 5, 6]
Example 3: Passing arguments to a function
In this example, the array numbers is unpacked into three arguments for the function sum():
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Outputs: 6
Example 4: Copying an object
In this example, copiedObject is a copy of originalObject:
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // Outputs: { a: 1, b: 2 }
Example 5: Merging objects
In this example, two objects obj1 and obj2 are merged into one object combinedObject:
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // Outputs: { a: 1, b: 2, c: 3, d: 4 }
9.2 Rest (rest parameters operator)
The rest (...) operator allows gathering multiple elements into an array.
This is especially useful when working with functions that accept a variable number of arguments, as well as
when destructuring arrays and objects.
Example 1: Rest parameters in functions
In this example, the sum() function accepts any number of arguments and sums them up:
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // Outputs: 6
console.log(sum(4, 5, 6, 7)); // Outputs: 22
Example 2: Destructuring arrays with rest
In this example, the first two elements of the array are assigned to variables first and second,
while the remaining elements are gathered into an array rest:
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // Outputs: 1
console.log(second); // Outputs: 2
console.log(rest); // Outputs: [3, 4, 5]
Example 3: Destructuring objects with rest
In this example, properties a and b are extracted into separate variables, while the remaining properties
are gathered into the rest object:
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // Outputs: 1
console.log(b); // Outputs: 2
console.log(rest); // Outputs: { c: 3, d: 4 }
9.3 Applying rest and spread in real-world tasks
Example 1: Merging arrays with conditions
In this example, user settings userSettings override default settings defaultSettings:
const defaultSettings = { theme: 'dark', showNotifications: true };
const userSettings = { showNotifications: false, fontSize: 14 };
const settings = { ...defaultSettings, ...userSettings };
console.log(settings); // Outputs: { theme: 'dark', showNotifications: false, fontSize: 14 }
Example 2: Splitting an array into parts
In this example, the array numbers is split into two parts after extracting the first two elements:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [first, second, ...rest] = numbers;
const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
const secondHalf = rest.slice(Math.floor(rest.length / 2));
console.log(firstHalf); // Outputs: [3, 4, 5, 6]
console.log(secondHalf); // Outputs: [7, 8, 9, 10]
GO TO FULL VERSION