⬅ Back

SPREAD AND REST SYNTAX IN JAVASCRIPT

This note explains:

  1. the difference between spread and rest
  2. spread syntax in detail
  3. rest syntax in detail

Both use the same symbol:

...

But they do different jobs.

1. The difference between spread and rest

Simple rule

Spread = opens values out
Rest   = collects values in

That is the easiest way to remember it.

Very short meaning

Spread

Spread takes values from an array or object and puts them into another place.

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];

Here:

...numbers

means:

take values from numbers and place them here

So this is spread.

Rest

Rest takes many values and collects them into one variable.

const [first, ...rest] = [10, 20, 30, 40];

Here:

...rest

means:

collect the remaining values into rest

So this is rest.

Diagram 1. Spread vs rest

Spread:
one array/object
↓
open values out
↓
put them somewhere else

Rest:
many values
↓
collect what remains
↓
put them into one variable

Main difference

Spread

Spread is used when values need to be:

Rest

Rest is used when values need to be:

One-line memory trick

Spread copies out.
Rest collects what is left.

2. Spread syntax

Now let's explain spread precisely.

Spread means:

Take values from an array or object and expand them here.

Spread is often used with:

2.1 Spread with arrays

Example

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers); // [1, 2, 3, 4, 5]

Explanation

...numbers takes the values from numbers:

1, 2, 3

and places them into the new array.

So JavaScript builds:

[1, 2, 3, 4, 5]

Diagram 2. Array spread

numbers = [1, 2, 3]

newNumbers = [...numbers, 4, 5]

Step:
[ ...numbers, 4, 5 ]
↓
[ 1, 2, 3, 4, 5 ]

Another example

const a = [10, 20];
const b = [30, 40];

const result = [...a, ...b];
console.log(result); // [10, 20, 30, 40]

Here spread takes all values from a and b and combines them into one new array.

2.2 Spread with objects

Spread also works with objects.

Example

const objA = { x: 1, y: 2 };
const objB = { z: 3 };

const result = { ...objA, ...objB };

console.log(result); // { x: 1, y: 2, z: 3 }

Explanation

...objA copies:

x: 1,
y: 2

and ...objB copies:

z: 3

So the final object becomes:

{ x: 1, y: 2, z: 3 }

Diagram 3. Object spread

objA = { x: 1, y: 2 }
objB = { z: 3 }

result = { ...objA, ...objB }

Final:
{ x: 1, y: 2, z: 3 }

2.3 Spread with duplicate properties

This is the most important rule for object spread:

If the same property appears more than once,
the last value wins.

Example

const objA = { x: 1, y: 2 };
const objB = { y: 3 };

const result = { ...objA, ...objB };

console.log(result); // { x: 1, y: 3 }

Explanation

First, ...objA adds:

x: 1,
y: 2

Then ...objB adds:

y: 3

But y already exists.

So JavaScript replaces y: 2 with y: 3 because ...objB comes later.

Diagram 4. Last value wins

Start:
{}

Add ...objA:
{ x: 1, y: 2 }

Add ...objB:
{ y: 3 }

y already exists
replace y: 2 → y: 3

Final:
{ x: 1, y: 3 }

2.4 Spread with normal properties

Spread can be mixed with normal properties.

Example

const objA = { x: 1, y: 2 };
const objB = { y: 3 };

const result = {
  x: 5,
  ...objA,
  y: 10,
  ...objB,
  z: 15,
};

console.log(result); // { x: 1, y: 3, z: 15 }

Step-by-step explanation

Step 1

x: 5

Temporary object:

{ x: 5 }

Step 2

...objA

objA is:

{ x: 1, y: 2 }

Now object becomes:

{ x: 1, y: 2 }

Because x: 1 comes after x: 5, so it replaces it.

Step 3

y: 10

Now:

{ x: 1, y: 10 }

Step 4

...objB

objB is:

{ y: 3 }

Now:

{ x: 1, y: 3 }

Step 5

z: 15

Final:

{ x: 1, y: 3, z: 15 }

Diagram 5. Spread order

const result = {
  x: 5,
  ...objA,
  y: 10,
  ...objB,
  z: 15
}

Read from left to right.
If the same key appears again, the later value replaces the earlier one.

2.5 Spread for copying

Spread is also often used to copy arrays or objects.

Copy array

const numbers = [1, 2, 3];
const copy = [...numbers];

console.log(copy); // [1, 2, 3]

Copy object

const user = { name: "Nikita", age: 25 };
const copy = { ...user };

console.log(copy); // { name: "Nikita", age: 25 }

Spread creates a new array or object and copies the top-level values into it.

2.6 Important note: spread makes a shallow copy

Spread does not make a deep copy.

It makes a shallow copy.

That means:

Example

const user = {
  name: "Nikita",
  address: {
    city: "Berlin",
  },
};

const copy = { ...user };

copy.address.city = "Hamburg";

console.log(user.address.city); // "Hamburg"

Explanation

copy is a new object, but copy.address and user.address still point to the same inner object.

2.7 When spread is used

Spread is commonly used to:

Example: update one property

const user = { name: "Nikita", age: 25 };

const updatedUser = {
  ...user,
  age: 26,
};

console.log(updatedUser); // { name: "Nikita", age: 26 }

3. Rest syntax

Now let's explain rest precisely.

Rest means:

Collect the remaining values into one variable.

Rest is commonly used in:

3.1 Rest with objects

Example

const user = {
  name: "Nikita",
  age: 25,
  country: "Germany",
};

const { name, ...rest } = user;

console.log(name); // "Nikita"
console.log(rest); // { age: 25, country: "Germany" }

Explanation

This line:

const { name, ...rest } = user;

means:

So:

name = "Nikita"

and:

rest = { age: 25, country: "Germany" }

Diagram 6. Object rest

user = {
  name: "Nikita",
  age: 25,
  country: "Germany"
}

const { name, ...rest } = user

Take:
name

Collect remaining:
age
country

Final:
name = "Nikita"
rest = { age: 25, country: "Germany" }

3.2 Rest must be last

This is correct:

const { name, ...rest } = user;

This is wrong:

const { ...rest, name } = user;

Why?

Because rest means:

collect everything that remains

So it must come at the end.

3.3 Rest with arrays

Rest can also collect remaining array values.

Example

const numbers = [10, 20, 30, 40];

const [first, ...rest] = numbers;

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

Explanation

This means:

So:

first = 10
rest = [20, 30, 40]

Diagram 7. Array rest

numbers = [10, 20, 30, 40]

const [first, ...rest] = numbers

first = 10
rest = [20, 30, 40]

3.4 Rest in function parameters

Rest is very useful in functions.

Example

function sum(...numbers) {
  let total = 0;

  for (const number of numbers) {
    total += number;
  }

  return total;
}

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

Explanation

Here:

...numbers

means:

collect all function arguments into an array called numbers

So when we call:

sum(1, 2, 3)

JavaScript creates:

numbers = [1, 2, 3]

Then the loop adds them together.

Diagram 8. Rest in function parameters

sum(1, 2, 3)

...numbers
↓
collects all arguments
↓
numbers = [1, 2, 3]

3.5 When rest is used

Rest is commonly used to:

4. Spread vs rest again

Now let's compare them clearly.

Spread

Spread expands values outward.

const arr = [1, 2, 3];
const result = [...arr, 4];

Meaning:

take values from arr and place them here

Rest

Rest collects values inward.

const [first, ...rest] = [1, 2, 3, 4];

Meaning:

take first separately
collect the remaining values into rest

Diagram 9. Biggest difference

Spread:
one thing
↓
open it
↓
many values

Rest:
many values
↓
collect them
↓
one variable

5. Common beginner mistakes

Mistake 1. Thinking spread and rest always mean the same thing

They use the same symbol:

...

But the meaning depends on where it is used.

Mistake 2. Forgetting that order matters with object spread

Later properties replace earlier ones.

Mistake 3. Putting rest in the wrong place

Rest must be last.

Wrong:

const { ...rest, name } = user;

Correct:

const { name, ...rest } = user;

Mistake 4. Thinking spread makes a deep copy

Spread makes a shallow copy, not a deep one.

6. Final summary

Spread

Spread means:

copy / expand values out

Examples:

const result = { ...objA, ...objB };
const newNumbers = [...numbers, 100];

Rest

Rest means:

collect remaining values

Examples:

const { name, ...rest } = user;
const [first, ...rest] = numbers;
function sum(...args) {}

Final memory rule

Spread = copy out
Rest   = collect what remains

7. Revision block

1. Spread and rest use the same symbol: ...
2. Spread expands values into a new place
3. Rest collects remaining values into one variable
4. Object spread copies properties
5. Array spread copies values
6. With object spread, the last duplicate property wins
7. Object rest collects remaining properties
8. Array rest collects remaining elements
9. Function rest collects all arguments into an array
10. Rest must be last
11. Spread creates a shallow copy, not a deep copy

8. Final conclusion

Spread and rest look the same, but they do opposite kinds of work.

If you understand this difference first, the rest of the topic becomes much easier.

I can also turn this into a website-style version with more numbered diagrams and practice exercises.

⬅ Back