Spread Operator

Expands an array or object's elements individually, often used to copy or combine them.

Part of: JavaScript Coding without HTML and CSS — Module 37

Understanding Spread Operator in JavaScript

What it does: Spreading both arrays merges their elements together. Spreading inside a function call unpacks the array's values. The spread operator unpacks each element of the array. [...arr] creates a new array with the same elements. The spread operator always needs exactly three dots. {...obj} spreads an object's properties into a new object. Two dots isn't valid spread syntax in JavaScript. Expands an array or object's elements individually, often used to copy or combine them.

Common mistakes: The spread operator needs three dots, not two. The spread operator needs exactly three dots, not four.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Spread Operator to a class →

This module's key terms are also in a printable crossword (Modules 31–40) and word search (Modules 21–52).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Does ... expand an array's elements individually?

YesNo

Matches

let b = [..a];

↓

Wrong - the spread operator needs three dots, not two

Applying

Meanings

Term

...

Meaning

Expands an array or object's elements individually, often used to copy or combine them.

Practice

let nums = [1, 2, 3];

Testing

Gaps

let copy = [nums];

Check Answer

Spots

1let b = [..a];

2let a = [1, 2];

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Does ... expand an array's elements individually?

A. Yes ✓

B. No

The spread operator unpacks each element of the array.

2. Can the spread operator be used to copy an array?

A. No

B. Yes ✓

[...arr] creates a new array with the same elements.

3. Is '..' with two dots the same as the spread operator?

A. No ✓

B. Yes

The spread operator always needs exactly three dots.

4. Can the spread operator combine two arrays into one?

A. No

B. Yes ✓

[...arr1, ...arr2] merges both arrays into a new one.

5. Can the spread operator be used with objects too?

A. Yes ✓

B. No

{...obj} spreads an object's properties into a new object.

Match the Pairs

[...nums] → Creates a new array with a copy of nums' elements

{...obj} → Creates a new object with a copy of obj's properties

Combines two arrays into a single new array → [...arr1, ...arr2]

Passes each array element as a separate argument → console.log(...nums)

let b = [..a]; → Wrong - the spread operator needs three dots, not two

let d = [....c]; → Wrong - the spread operator needs exactly three dots

Key Term

...

Expands an array or object's elements individually, often used to copy or combine them.

Fill in the Blanks

1. let copy = [...nums];

Hint: Type the operator that expands the array's elements.

2. let arr2 = [...arr1];

Hint: Type the operator that expands the array's elements.

3. let objCopy = {...obj};

Hint: Type the operator that expands an object's properties.

4. console.log(...nums);

Hint: Type the operator that expands the array's elements.

5. let newArr = [...oldArr, 4];

Hint: Type the operator that expands the array's elements.

Spot the Error

Question 1

A let b = [..a];

B let a = [1, 2];

C console.log(b);

Line A — The spread operator needs three dots, not two.

Question 2

A let c = [3, 4];

B let d = [....c];

C console.log(d);

Line B — The spread operator needs exactly three dots, not four.

Question 3

A let e = {x: 1};

B console.log(f);

C let f = {..e};

Line C — The spread operator needs three dots, not two.

Question 4

A let g = [5, 6];

B console.log(h);

C let extra = 1;

D let h = [...g];

Line D — This line is actually correct - ...g copies the array.

Question 5

A let i = {y: 2};

B console.log(j);

C let filler1 = 1;

D let filler2 = 2;

E let j = {...i};

Line E — This line is actually correct - ...i copies the object.

Student with a class code? Join your class →