Perfecting JavaScript's Spread, Rest, and Default Parameters

Written by
Chris K.
12 mins
Nov 26, 2024
Subscribe for more insights
Thank you for your interest in the syllabus.

We'll be in touch soon with more information!

In the meantime, if you have any questions, don’t hesitate to reach out to our team.

Oops! Something went wrong while submitting the form.

TLDR - Perfecting JavaScript's Spread, Rest, and Default Parameters

  • Spread Operator: Expands iterables (arrays, strings, sets) into individual elements for function calls, arrays, or objects.
  • Rest Parameters: Allows a function to accept a variable number of arguments, gathering them into an array.
  • Default Parameters: Set default values for function parameters if no value is provided or if undefined is passed.
  • Benefits: These features enhance code readability, simplify function definitions, and provide more expressive ways to handle arrays and parameters.
  • We at Codesmith cultivate technologists who are at the intersection of society and tech, able to meet this moment and thrive in an ever-changing world. Ready to become a modern software engineer?

    As a JavaScript developer, working with arrays and functions is a daily task. Over the years, the TC39 committee has introduced several enhancements that expand our capabilities in handling these aspects. In this article, we'll explore three powerful features: the spread operator, rest parameters, and default parameters.  Each of these features can help us to write cleaner, more efficient, and more elegant code.

    • Spread Operator – How does it work?
    • Examples of using the Spread Operator
    • Rest Parameters – How do they work?
    • Examples of using Rest Parameters
    • Default Parameters
    • Examples of using Default Parameters

    Spread Syntax – How Does It Work?

    The spread syntax (...) allows us to expand elements of an iterable (like arrays, strings, or sets) into places where zero or more elements are expected. This can be particularly useful in function calls, array literals, or even object literals (since ES2018).

    The syntax consists of an ellipsis (...), followed by a reference to an identifier or literal.

    An iterable is a data type that can be iterated over, meaning we can loop over its values in sequence. Common iterables include arrays, strings, maps, and sets.

    Depending on the context, the spread syntax expands the elements of an iterable into individual arguments for a function or elements in a new array or object.

    Examples of using the Spread Syntax

    Function Calls with Variable Number of Arguments

    The spread syntax is widely used in functions that accept a variable number of arguments. For example, the Math.max() function returns the largest of the given numbers but doesn't accept an array directly.

    Combining Multiple Arrays

    We can pass multiple arrays to a function by spreading them:

    Mixing Values and Arrays

    Combine arrays and individual values seamlessly:

    Copying Arrays

    Traditionally, the most common way to create a shallow copy of an array was to use the Array.prototype.slice method:

    With the spread syntax, we can achieve the same result in a more concise and readable way:

    Note:  Both methods create a shallow copy. If the array contains objects, the references to those objects are copied, so the objects themselves are not duplicated.

    Merging Arrays

    Instead of using Array.prototype.concat, we can merge arrays using spread syntax:

    Pushing Elements into an Array

    We can use spread syntax with push to add multiple elements:

    Using Spread with Constructors

    Spread syntax can be used when calling constructors that accept multiple arguments:

    Converting Iterables to Arrays

    We can easily convert a Set or a NodeList to an array:

    Removing Duplicates

    By combining Set and spread syntax, we can remove duplicates from an array:

    Spreading Strings into Arrays

    Strings are iterable, so we can spread them into arrays of characters:

    Rest Parameters – How Do They Work?

    Rest parameters allow us to represent an indefinite number of arguments as an array. This is useful when we want a function to accept any number of arguments without having to use the arguments object.

    The rest parameter ...restParams must be the last parameter in the function definition.

    It gathers all remaining arguments into an array.

    Examples of using Rest Parameters

    Replacing the arguments Object

    Using arguments:

    Using Rest Parameters:

    Simplifying Function Definitions

    Rest parameters make it clear what arguments the function expects:

    Differences Between rest parameters and arguments Object

    • Array vs. Object: Rest parameters are true arrays, allowing us to use array methods directly. The arguments object is array-like but not an actual array.
    • Explicit Parameters: Rest parameters only include arguments that haven't been given explicit names. The arguments object includes all arguments.

    Using Rest Parameters with Destructuring

    We can combine rest parameters with array destructuring:

    Collecting Remaining Properties

    Rest syntax can be used to collect remaining properties in object destructuring.

    Practical Example: Multiplying Arguments

    Using rest parameters to create a function that multiplies a list of numbers:

    Rest parameters are ideal for functions that work with a variable number of arguments, enhancing readability and reducing complexity.

    Default Parameters

    Default parameters allow us to set default values for function parameters, so if no value or undefined is passed, the default value is used.

    Syntax:

    Examples of using default parameters

    Behaviour with undefined and null

    • Passing undefined triggers the default value.
    • Passing null does not trigger the default, null is treated as a valid value.

    Using Expressions as Default Values

    Default parameters can be set using expressions or even function calls:

    Caution with Scope and Reference Errors

    Be careful when default parameters depend on each other or external variables. The following example runs successfully:

    However, referencing a parameter that hasn't been initialized yet results in a ReferenceError:

    Summary

    We've explored the spread syntax, rest parameters, and default parameters - powerful features that have become essential in modern JavaScript development. They enhance code readability, reduce complexity, and provide more expressive ways to handle arrays and function parameters.

    By incorporating these tools into our coding practices, we can write cleaner, more efficient code. Whether we're merging arrays, collecting function arguments, or setting default parameter values, these features offer elegant solutions to common programming tasks.

    Next Steps:

    Find out how we cover AI/ML in our updated curriculum
    Get your Syllabus
    Special blog guest offer!

    Explore CS Prep further in our beginner-friendly program.

    Get 50% Off CS Prep
    Learning code on your own?

    Get more free resources and access to coding events every 2 weeks.

    Thank you for your interest in the syllabus.

    We'll be in touch soon with more information!

    In the meantime, if you have any questions, don’t hesitate to reach out to our team.

    Oops! Something went wrong while submitting the form.
    Want to learn more about advancing your career in tech?

    Connect with one of our graduates/recruiters.

    Schedule a Call

    Our graduates/recruiters work at:

    ABOUT THE AUTHOR

    Related Articles

    Understanding the basics of CSS Flexbox

    Tutorial
    JavaScript
    by
    Alex Stewart
    Jun 6, 2025
    |
    8 mins

    How to Design a Typeahead Search System for a Seamless UX

    Tutorial
    by
    Iván Ovejero
    Dec 6, 2024
    |
    13 mins

    Meta Llama 2 vs. GPT-4: Which AI Model Comes Out on Top?

    Tutorial
    AI/ML
    by
    Diana Cheung
    Nov 9, 2024
    |
    14 mins

    Start your journey to a coding career.

    Thank you for your interest in the syllabus.

    We'll be in touch soon with more information!

    In the meantime, if you have any questions, don’t hesitate to reach out to our team.

    Oops! Something went wrong while submitting the form.
    Want to learn more about advancing your career in tech?

    Connect with one of our recruiters to learn about their journeys.

    Schedule a Call

    Our graduates/recruiters work at: