JavaScript ES6 Rest And Spread Operators

What are the rest and spread operators in JavaScript?

The rest operator (...) is used to collect multiple elements into a single array, while the spread operator (...) is used to expand an array or object into individual elements. Both operators help with handling collections of data more effectively.

How do you use the rest operator?

The rest operator allows you to represent an indefinite number of arguments as an array. It is used in function parameters to collect all remaining arguments into a single array.

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

Can you give an example of using the rest operator with destructuring?

When destructuring, the rest operator can be used to collect the remaining properties into a new object.

const person = { name: 'Alice', age: 30, city: 'New York', country: 'USA' };
const { name, ...rest } = person;

console.log(name); // Alice
console.log(rest); // { age: 30, city: 'New York', country: 'USA' }

How do you use the spread operator?

The spread operator allows an iterable (like an array) to be expanded in places where zero or more arguments or elements are expected, such as in function calls or array literals.

// Spread operator in function calls
const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 3

// Spread operator in array literals
const moreNumbers = [4, 5, ...numbers];
console.log(moreNumbers); // [4, 5, 1, 2, 3]

Can you provide an example of using the spread operator with objects?

The spread operator can also be used to create shallow copies of objects or merge multiple objects into one.

const person = { name: 'Alice', age: 30 };
const updatedPerson = { ...person, city: 'New York' };

console.log(updatedPerson); // { name: 'Alice', age: 30, city: 'New York' }

What is the difference between the rest operator and the spread operator?

The main difference is that the rest operator is used to collect remaining elements into an array (in function parameters), while the spread operator is used to expand elements of an array or object into individual elements or properties.

// Rest operator
function logAll(...args) {
  console.log(args);
}

logAll(1, 2, 3); // [1, 2, 3]

// Spread operator
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

How can you use the spread operator to clone an array?

You can use the spread operator to create a shallow copy of an array, which is useful for avoiding mutation of the original array.

const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];

clonedArray[0] = 0;
console.log(originalArray); // [1, 2, 3] (original is unchanged)
console.log(clonedArray); // [0, 2, 3]

Can you use the rest operator with a function that has fixed parameters?

Yes, you can combine fixed parameters with the rest operator to capture any additional arguments passed to the function.

function concatStrings(separator, ...strings) {
  return strings.join(separator);
}

console.log(concatStrings(', ', 'Alice', 'Bob', 'Charlie')); // Alice, Bob, Charlie

What happens if you use the spread operator on a non-iterable object?

If you use the spread operator on a non-iterable object, JavaScript will throw a TypeError. The spread operator can only be used with iterable objects such as arrays, strings, or objects.

const obj = { a: 1, b: 2 };
// console.log({...obj, ...null}); // TypeError: Cannot read properties of null