CourseCommunityPricingBoilerplates
Get Started

Products

CourseBoilerplatesPricing

Resources

CommunityGitHubYouTube

Contribute

Write for UsStyle Guide

Legals

Privacy PolicyTerms of ServiceContact Us
©2025TheDevSpace.io| All Rights Reserved
Table of Contents
  • Rest parameter
  • The spread syntax

Rest Parameter and Spread Syntax in JavaScript

<Variables & ScopePure Functions>

Before we move on to the more advanced topics regarding functions, we need to take another look at the function arguments. We demonstrated before that a function could accept a single input argument:

javascript
1function example(str) {
2  console.log(str);
3}

Multiple arguments:

javascript
1function example(str1, str2) {
2  console.log(str1 + " " + str2);
3}

Arguments with default values:

javascript
1function example(a, b = 0) {
2  return a ** b;
3}

Or no argument at all:

javascript
1function example() {
2  console.log("123");
3}

Rest parameter

Now, let's consider a more challenging scenario. What if you need a function that calculates the sum of an indefinite number of arguments? It could be 10, 100, or even 1000. Creating a function that accepts 1000 arguments is obviously impractical, so instead, you could define a rest parameter.

javascript
1function sumAll(...nums) {
2  let sum = 0;
3  for (let num of nums) {
4    sum += num;
5  }
6  return sum;
7}
8
9console.log(sumAll(1, 2, 3, 4));

A rest parameter is defined by placing ... before the parameter name. Values passed to that parameter will be saved in an array. You can then access individual elements inside that array using the for of loop we discussed before.

A rest parameter can work alongside regular parameters, but it must be placed at the end. For example, the following example will not work:

javascript
1function sumAll(a, ...nums, b) {
2  . . .
3}

The rest parameter will collect all remaining values passed to the function, hence the name, "rest" parameter.

The spread syntax

In some cases, you'll need to do the opposite. For instance, the built-in method Math.max() returns the greatest number from a list of values.

javascript
1let maxNumber = Math.max(5, 10, 15, 3);
2
3console.log(maxNumber); // -> 15

But if you are given an array of numbers, simply passing the array to the method is not going to work. You need to convert the array into a list of variables. Of course, you can do things the hard way and pass the array elements individually.

But when you have an array of 100 elements or more, that is not going to be practical. Instead, you should use the spread syntax.

javascript
1let numbers = [5, 10, 15, 3, 9, 16, 81, 32];
2let maxNumber = Math.max(...numbers);
3
4console.log(maxNumber); // -> 81

Notice that the spread syntax looks exactly like the rest parameter, by adding three dots (...) in front of the variable name, but it works the opposite. The spread syntax will convert an array into a list of variables so that the method Math.max() can work with them.

<Variables & ScopePure Functions>

Subscribe below to grab our free Full-Stack Web Developer Starter Kit 👇

Also follow us onorwhere we share coding tips daily.

Course Outline
Introduction+
  • 1.WebDev Fundamentals
HTML & CSS+
  • 1.Preparations
  • 2.HTML Elements
  • 3.Query Selectors
  • 4.Colors
  • 5.Typography
  • 6.Text Customization
  • 7.Text Spacing & Alignment
  • 8.Functions & At Rules
  • 9.Links
  • 10.Lists
  • 11.Tables
  • 12.Forms
  • 13.Media Files
  • 14.The Box Model
  • 15.Display Types
  • 16.Overflow
  • 17.Object Fit
  • 18.Aspect Ratio
  • 19.Float
  • 20.Position
  • 21.The Column Layout
  • 22.The Grid Layout
  • 23.The Flexbox Layout
  • 24.Justify & Align
  • 25.Z index
  • 26.Visibility & Opacity
  • 27.Box Shadow
  • 28.Backgrounds
  • 29.Gradient
  • 30.Blend Modes
  • 31.Filters
  • 32.Transforms
  • 33.Transitions
  • 34.Animations
  • 35.Cursor & Scroll Behavior
  • 36.Responsive Design
  • 37.Responsive Media & Text
  • 38.Responsive Layout
  • 39.Best Practices
  • 40.Project #1: Recreating YouTube
  • 41.Project #2: Calculator Part 1
TailwindCSS+
  • 1.Introducing TailwindCSS
JavaScript+
  • 1.Introduction
  • 2.Setting Up a Dev Environment
  • 3.Basic Syntax
  • 4.Data Types
  • 5.Numbers & BigInt
  • 6.Strings
  • 7.Boolean Values
  • 8.Undefined & Null
  • 9.Type Conversion
  • 10.Arrays
  • 11.Objects
  • 12.Maps & Sets
  • 13.If Statements
  • 14.Switch Statements
  • 15.While Loops
  • 16.For Loops
  • 17.Functions
  • 18.Variables & Scope
  • 19.Rest Parameter & Spread Syntax
  • 20.Pure Functions
  • 21.Higher Order Functions
  • 22.Recursion
  • 23.Methods
  • 24.Constructor Functions
  • 25.Getters & Setters
  • 26.Prototypes
  • 27.The Class Notation
  • 28.Class Inheritance
  • 29.Static Properties
  • 30.Private Properties
  • 31.Object Oriented Programming
  • 32.Error Handling
  • 33.Asynchronous Programming
  • 34.Promise
  • 35.Async & Wait
  • 36.JavaScript Modules
  • 37.The DOM Tree
  • 38.Manipulation the DOM
  • 39.Event Handling
  • 40.Some Common Events
  • 41.Canvas
  • 42.Project #3: Image Slider
  • 43.Project #4: Drawing Board
  • 44.Working with Date
  • 45.The Math Object
  • 46.JSON
  • 47.Regular Expressions
  • 48.Define Patterns with Regex
  • 49.Regex Related Methods
  • 50.Project #5: Calculator Part 2
Express.js+
  • 1.Network & HTTP
  • 2.A Basic Web App
  • 3.Express.js
  • 4.Model Layer
  • 5.View Layer
  • 6.Controller Layer
  • 7.Form Handling
  • 8.Uploading Files
  • 9.Project #6: Blog
  • 10.Loading Static Files
  • 11.ORM Integration
  • 12.Adding Relations
  • 13.Middleware
  • 14.Browser Data Storage
  • 15.User Authentication
  • 16.REST API
  • 17.Best Practices
  • 18.Going to Production
React.js+
  • 1.Fundamentals
  • 2.JSX
  • 3.Conditional Rendering
  • 4.List Rendering
  • 5.Components
  • 6.Props
  • 7.Adding Styles
  • 8.Event Handling
  • 9.Introducing State
  • 10.State Management
  • 11.Form Handling
  • 12.Reducer
  • 13.Context
  • 14.Refs
  • 15.Effects
  • 16.Hooks
  • 17.Rules of React
  • 18.Project #7: Todo List
  • 19.Project #8: Weather App
  • 20.Project #9: Blog
  • 21.React.js Optimization
Next.js+
  • 1.Next.js Basics
  • 2.Routing
  • 3.Pages & Layout
  • 4.Server vs. Client Components
  • 5.API Routes
  • 6.Server Actions
  • 7.Database Integration
  • 8.Data Fetching
  • 9.Error Handling
  • 10.Middleware
  • 11.Links, Navigation & Redirection
  • 12.Images
  • 13.Scripts
  • 14.Fonts
  • 15.Lazy Loading
  • 16.Caching
  • 17.Loading UI
  • 18.Project #10: SaaS
  • 19.User Authentication
  • 20.Magic Link
  • 21.Custom Emails
  • 22.Protecting Routes
  • 23.OAuth Providers
  • 24.Dashboard
  • 25.Role Based Access Control
  • 26.Payment Integration
  • 27.Pricing Page
  • 28.Stripe Checkout
  • 29.Payment Webhook
Miscellaneous+
  • 1.Optimize Your Web App
Recent Community Articles
  • How to Build Interactive Forms Using HTML and CSS
  • How to Create a Modern App with Django and Vue
  • How to Send HTTP Requests Using JavaScript
  • Vue.js Fundamentals
  • How to Reverse a String in JavaScript
  • How to Reverse an Array in JavaScript
  • JavaScript Fundamentals 2025
  • How to Implement Pagination with JavaScript
  • Laravel Fundamentals
  • Django Fundamentals