| CARVIEW |
Select Language
HTTP/2 307
date: Sat, 11 Oct 2025 19:57:41 GMT
content-type: text/html
content-length: 76
location: https://how.dev/answers/what-are-the-spread-and-rest-operators-in-javascript
cf-ray: 98d0ed8cf960c1bf-BLR
cache-control: public, max-age=300, stale-while-revalidate=604800
referrer-policy: strict-origin-when-cross-origin
x-app-version: v251008-h-251010-1202
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-app-type: Learn
x-robots-tag: all
x-nextjs-cache: MISS
x-cloud-trace-context: f0ed815349b3cc6b124612a230892b3f
via: 1.1 google
alt-svc: h3=":443"; ma=86400
cf-cache-status: EXPIRED
set-cookie: __cf_bm=TQEtqO.ADZ2iTX8Axj3aEhCTsUVo119.1KIZJTcj91k-1760212661-1.0.1.1-vuDUZri62upJxznswcFHCclNhxMNSGJVR6HHUNBEK_vfYHFyz7lGtixRBmmVvT5ZfIhpblZH7UQQSTrR1sWUKazIm3ikujX2En05HAaHhyM; path=/; expires=Sat, 11-Oct-25 20:27:41 GMT; domain=.educative.io; HttpOnly; Secure; SameSite=None
vary: Accept-Encoding
strict-transport-security: max-age=31536000; includeSubDomains; preload
server: cloudflare
HTTP/2 200
referrer-policy: strict-origin-when-cross-origin
x-app-version: v251008-h-251010-1202
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-app-type: Learn
x-middleware-rewrite: /answers/howdev/what-are-the-spread-and-rest-operators-in-javascript
x-nextjs-cache: MISS
x-cloud-trace-context: 36228a71a9ba809637ca91afd746eed9
server: Google Frontend
via: 1.1 google
content-encoding: gzip
date: Sat, 11 Oct 2025 13:58:22 GMT
cache-control: public, max-age=300, stale-while-revalidate=604800
etag: W/"bebrmmqzcy6tkp"
content-type: text/html; charset=utf-8
vary: Accept-Encoding
content-length: 59334
age: 21559
x-cache-status: stale
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
What are the spread and rest operators in javascript?
What are the spread and rest operators in javascript?
Overview: spread
In Javascript, we use the spread operator to split up array elements or object properties.
Hence, the name spread, i.e., “spread the elements of an array/objects in a new array/objects”.
Example 1
An example of a spread operator with arrays is as follows:
const numbers = [1, 2, 3, 4]const numbers_with_spread = [...numbers, 5, 6]const numbers_without_spread = [numbers, 5, 6]console.log(numbers_with_spread)console.log(numbers_without_spread)
Explanation
- Line 1: We will initiate the
numbersarray. - Line 3: We create a new array
numbers_with_spreadusing the spread operator. - Line 5: We create another array
numbers_without_spreadwithout using the spread operator. - Line 7–9: We will print the new arrays to the console.
Example 2
An example of spread operator using objects is as follows:
const human = {name : "Kedar"}const human_age_with_spread = {...human,age : '24'}const human_age_without_spread = {human,age : '24'}console.log(human_age_with_spread)console.log(human_age_without_spread)
Explanation
- Line 1-3: We will initiate the
humanobject. - Line 5-8: We create a new object
human_age_with_spreadusing the spread operator. - Line 10-13: We start another object
human_age_without_spread, without using the spread operator. - Line 16 –17: We will print the new arrays to the console.
Overview: rest
It's a collection of remaining elements. We use it for merging a list of functional arguments into an array, i.e., we can use this when we don't know how many arguments are passed to our method.
Hence, the name rest, i.e., “the rest of the elements”.
Example
const more_than_three = (...args) => {console.log(args) /* lets see what's in args */return console.log(args.filter((x) => x > 3))}more_than_three(1,2,3,4,5,6,7,8)
Explanation
- Line 1: We define a function
more_than_three()using the rest operator in the arguments. - Line 2: We will print the received arguments.
- Line 3: We will return the numbers that are greater than
3. - Line 6: We will make a function call.
Note: The syntax for spread and rest is the same (`
...`), but use-cases differ.
Relevant Answers
Explore Courses
Free Resources
Attributions:
- undefined by undefined