Modern JavaScript Foundations

Spread and Rest Operators

0:00

0% complete

LearnStep 1 of 3

The Power of Three Dots

Learning Objectives

•Differentiate between spread syntax and rest parameters.
•Perform shallow copies and merges of arrays and objects using spread.
•Utilize rest parameters to handle indefinite function arguments.
•Apply spread syntax to expand arrays into function arguments.

Lesson Outline

LearnStep 1/3

The Power of Three Dots

JavaScript's ... operator performs two distinct but related tasks depending on context: Spread expands iterables into individual elements, while Rest collects multiple elements into a single array.

1. Spread Syntax (...)

Spread allows an iterable (like an array or string) to be expanded in places where zero or more arguments or elements are expected.

Copying and Merging Arrays

Spread provides a concise way to create shallow copies of arrays or merge them.

javascript

Object Literals

Spread properties can be used to shallow copy or merge objects. Properties later in the spread overwrite earlier ones with the same key.

javascript

Note: Spread performs a shallow copy. Nested objects are still referenced, not duplicated.

Function Calls

Spread can pass elements of an array as arguments to a function.

javascript

2. Rest Parameters (...)

Rest syntax looks the same but appears in function definitions or destructuring assignments. It collects the "rest" of the elements into an array.

javascript

Rest in Destructuring

You can extract specific items and collect the rest.

javascript