Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Thomas Graf
Thomas Graf

Posted on

     

#"/t/javascript">#javascript#rest#spread

Do you know all use cases for the three dots in JavaScript?

Little History:

First, they added this syntax for arrays and parameters in ES6 (spread and rest elements).
In 2018, they added it for objects (spread and rest properties).

And all features share the same syntax

...

That can be pretty confusing if you see that syntax for the first time.
This post is a collection of examples how you can use them in your code.

Let's start with: Spread Elements

Want to copy all elements from an array to another array?
Use... (spread elements) to shallow(!) copy an array.

constfruits=["apple","banana","coconut"];constfruitsCopied=[...fruits];// fruitsCopied: ["apple", "banana", "coconut"]

You can adds another element on the fly.

constfruits=["apple","banana","coconut"];constmoreFruits=[...fruits,"pear"];// moreFruits: ["apple", "banana", "coconut", "pear"]

Let's imagine that we have this stupidprint function.
With... we can simply spread elements of an array as arguments to a function.

constprint=(first,second,third)=>console.log(`first: "${first}" second: "${second}" third: "${third}"`);constfruits=["apple","banana","coconut"];print(...fruits);// first: "apple" second: "banana" third: "coconut"

We can also spread an array of numbers into the Math.max method. Isn't that neat?

constnumbers=[1,5,23,-5,2,42];Math.max(...numbers);

Next: Rest Elements

Want to split an array into head and tail?
Here we are destructuing an array and use... (rest element) to collect all elements which are not already picked by the destructuring pattern intotail.

const[head,...tail]=[1,2,3];// head: 1// tail: [2, 3]

Before, we already used... to spread elements as arguments to a function on the call-site. Now we use... (rest parameter) to collect all passed parameter intoargs.

functiongetNumberOfPassedArguments(...args){returnargs.length;}getNumberOfPassedArguments("apple","banana","coconut");// 3

Do you knowcompose from Ramda or Underscore? Look how short the implementation is:

constcompose=(...fns)=>x=>fns.reduceRight((acc,cur)=>cur(acc),x);constfivePercentDiscount=price=>price*0.95;constgermanTax=price=>price*1.19;constgetProductPrice=compose(germanTax,fivePercentDiscount);getProductPrice(10);

Let's get to objects. Here we can do pretty much the same: Spread Properties

With... (spread properties) we can shallow copy all (own enumerable) properties (key and value) of an object.

constperson={name:"Thomas",age:28};constcopiedPerson={...person};

We can spread the properties and immediately overwrite properties during creation.

constthomas={name:"Thomas",age:28};constpeter={...thomas,name:"Peter"};

We can overwrite an arbitrary number of properties if we already defined some properties and then spread properties of another object.

functioninitConfig(overwrites){constdefaults={useSSL:true/*,  ... */};return{...defaults,...overwrites};}

Want to have optinal properties on an object, but don't want to mutate the object after creation?
Here are to ways:

constshouldAddB=true;letobj1={a:1,...(shouldAddB&&{b:2})};// orletobj2={a:1,...(shouldAddB?{b:2}:{})};

Rest Properties

We can also use... (rest properties) to copy a subset of properties into an object. In the destructuring pattern we list the properties, which we don't want to have in the new object, and collect the remaining properties with the... rest properties intopersonWithoutAge.

const{age,...personWithoutAge}={name:"Thomas",age:28,country:"Germany"};// personWithoutAge: {name: "Thomas", country: "Germany"}

Which one do you use in your code and do you have more use cases? Please let us know!

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Thomas Graf
{...❤}, Likes sport and coding. Organizer of Tü.λ
  • Location
    Tübingen - Germany
  • Joined

Trending onDEV CommunityHot

Tala Amm profile image
Why I Started Blogging?
#programming#rust#beginners#javascript
david duymelinck profile image
Can we have feed word filtering?
#discuss#devto
Ali Farhat profile image
Instantly Discover AI & Automation Opportunities on Any Website
#ai#automation#gtp#productivity
DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp