QJavaScript · Interview preparation
What is the difference between spread and rest syntax?
Spread expands an iterable or object's fields into a new context, while rest collects remaining function arguments or destructured values.
The idea to remember.
Spread expands an iterable or object's fields into a new context, while rest collects remaining function arguments or destructured values. Their notation is similar, but their roles depend on position.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: transform a list
01 / BEGINNERMap builds a new array without changing the original.
const prices = [5, 10, 15];
const discounted = prices.map(price => price * 0.9);Intermediate: group with reduce
02 / INTERMEDIATEReduce can create a lookup keyed by a stable ID.
const usersById = users.reduce((map, user) => {
map[user.id] = user;
return map;
}, {});Real scenario: efficient list filtering
03 / REAL SCENARIODerive results without mutating your source collection.
function visibleProducts(products, query, category) {
const term = query.trim().toLowerCase();
return products.filter(item =>
(!category || item.category === category) &&
item.name.toLowerCase().includes(term)
);
}02Check your understanding
Try it in your own words.
Explain what is the difference between spread and rest syntax without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse JavaScript study guides ↗