JavaScript Rest Parameters - Exercise 3
A default parameter supplies a value when its argument is undefined, while a rest parameter collects all later arguments. Put the defaulted named parameter before the rest parameter.
// How can you combine rest parameters with default parameters?
function repeat(value = 'x', ...counts) {
return counts.map(count => value.repeat(count));
}
console.log(repeat(undefined, 1, 3)); // ['x', 'xxx']Spread syntax expands an array into individual call arguments, and the rest parameter gathers those arguments back into a new array. This lets one function bridge array data and a flexible parameter list.
// What happens when a rest parameter receives spread arguments?
function total(...numbers) {
return numbers.reduce((sum, number) => sum + number, 0);
}
const values = [2, 4, 6];
console.log(total(...values)); // 12A function parameter can destructure an array and use rest to collect the values after a named first item. The caller must provide an iterable value such as an array.
// How can rest destructuring work inside a function parameter?
function splitFirst([first, ...remaining]) {
return { first, remaining };
}
console.log(splitFirst(['a', 'b', 'c']));Array rest creates a new array containing the remaining elements, so changing that result does not change the source array’s length or elements. This is a shallow copy: nested objects inside it are still shared.
// Why is the rest result independent from the original array?
const source = [1, 2, 3];
const [, ...rest] = source;
rest.push(4);
console.log(source, rest); // [1, 2, 3] [2, 3, 4]Use typeof with filter to keep only arguments whose type is number. This counts numeric values but still includes NaN, because JavaScript reports its type as number.
// How can you count only numeric rest arguments?
function countNumbers(...values) {
return values.filter(value => typeof value === 'number').length;
}
console.log(countNumbers(1, '2', 3, true)); // 2Object rest is useful when known settings should be handled separately and optional settings should be forwarded together. The collected object contains the remaining enumerable properties.
// How can object rest collect optional settings?
function configure({ port = 3000, ...optional }) {
return { port, optional };
}
console.log(configure({ port: 8080, debug: true }));Object rest also copies own enumerable symbol-keyed properties that were not selected. This is different from JSON serialization, which ignores symbol keys.
// What does rest syntax do with symbol-keyed object properties?
const token = Symbol('token');
const source = { id: 1, [token]: 'value' };
const { id, ...remaining } = source;
console.log(remaining[token]); // 'value'Because rest parameters produce arrays, array methods such as reduce can combine their values directly. Supply an initial value when the function should also handle an empty call safely.
// How can a rest parameter support a reduce operation?
function multiply(...numbers) {
return numbers.reduce((product, number) => product * number, 1);
}
console.log(multiply(2, 3, 4)); // 24Array rest collects the remaining values into a fresh array. The copy is shallow, so primitive values are independent while nested object references still point to the same objects.
// How can rest destructuring make a copy of remaining values?
const values = ['first', 'second', 'third'];
const [first, ...remaining] = values;
remaining.push('fourth');
console.log(values, remaining); // ['first', 'second', 'third'] and ['second', 'third', 'fourth']Rest parameters declare the values a function expects to collect, give that collection a meaningful name, and create a real array. Manual arguments indexing is less explicit and is not available in arrow functions.
// Why is rest syntax clearer than manually reading arguments?
const sum = (...numbers) => numbers.reduce((total, number) => total + number, 0);
console.log(sum(3, 5, 7)); // 15