learningBOX, Inc.

Hello! I'm Kamijo from Development Department🔋
In this article, we'll look at the JavaScriptThe "spread syntax" and the "rest syntax.The following is an introduction to the
I would like to summarize the article as clearly as possible. Thank you very much for your continued support.

Click here for table of contents

• 1. Introduction
• 2. What is spread syntax?
• 3. What is rest syntax?
• 4. Summary

first of all

The spread syntax and rest syntax are JavaScript constructs that have become available rather recently. The two syntaxes I'm going to explain have one thing in common. That similarity is that they both use the "..." operator.
These two constructs have the same operators, but the usage is the opposite of

I'm sorry.spread syntax」は「development」

I'm sorry.rest construction」は「aggregating」

Used for

What is Spread Syntax?

Using the spread syntax, iterable objects such as Arrays and Strings are expanded on-the-fly as zero or more arguments in function calls, as zero or more elements in Array literals, or as zero or more key-value pairs in Object literals.
MDN - Spread Syntax

This means that for every "argument, array literal, or object literal", an object can be added to thedevelopmentThat's what I'm saying.

Expand to argument

Example: Get the maximum value from an array

See the Pen
GRJYpmX by kamijodev (@kamijodev)
on CodePen.

Example: Get the maximum value from multiple arrays or numbers

See the Pen
Spread Example 2 by kamijodev (@kamijodev)
on CodePen.

Example: Arguments when creating an instance

See the Pen
ZEGqbXW by kamijodev (@kamijodev)
on CodePen.

Expanding to array literals

Example: Duplicating a sequence

See the Pen
Spread Example 4 by kamijodev (@kamijodev)
on CodePen.

Example: Joining sequences

See the Pen
Spread Example 5 by kamijodev (@kamijodev)
on CodePen.

Expanding to object literals

Example: Duplicating an object

See the Pen
Spread Example 6 by kamijodev (@kamijodev)
on CodePen.

If you've seen this far, you probably have a general understanding of the spread syntax.
Next is the rest construction. As mentioned at the beginning of this article, the rest construction is calledaggregatingIt is.

What is Rest Syntax (Residual Syntax)?

You can combine multiple elements into aaggregatingto combine them into a single object.
It can be used for function arguments (Rest Parameters) and the "Split Assignment Syntax" scheduled for the next article.

residual parameter syntax

Example: Receiving indefinite number of arguments as an array

See the Pen
Rest example 1 by kamijodev (@kamijodev)
on CodePen.

summary

In this article, I have explained the spread syntax and the rest syntax.
The Rest syntax may be used not only in the "Residual Argument Syntax" but also in the "Split Assignment Syntax".
For more information on how to use JavaScript's "split assignment syntax", see hereYou can read more about it in the article