You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -9,155 +9,179 @@ import SubHeading from "@site/src/components/SubHeading";
9
9
How to Use the Spread Operator (…) in JavaScript
10
10
</SubHeading>
11
11
12
-
The spread operator is a powerful JavaScript feature introduced in ECMAScript 6 (ES6) and denoted by three dots (`...`). It expands the values of an iterable (such as an array, string, or object) to enable you to access and manipulate the iterable.
12
+
The spread operator is a powerful JavaScript feature introduced in ECMAScript 6 (ES6) and denoted by three dots (`...`). It expands the values of an iterable (such as an array, string, or object) to enable you to access and manipulate the iterable.
13
13
14
14
Whether you're a beginner or an experienced JavaScript developer, learning how to use the spread operator is an essential skill that will take your coding to the next level.
15
15
In this article, we'll explore the ins and outs of the spread operator and show you how to use it to write cleaner, more efficient code. So, let's get started!
16
16
17
-
## Using the spread operator in JavaScript arrays
18
-
The spread operator is commonly used in JavaScript to expand the elements of an array. In this section, you'll learn how to concatenate and copy arrays using the spread operator.
17
+
## Using the spread operator in JavaScript arrays
19
18
20
-
```js
21
-
constarrValue= ['Hello', 'JavaScript'];
19
+
The spread operator is commonly used in JavaScript to expand the elements of an array. In this section, you'll learn how to concatenate and copy arrays using the spread operator.
With the spread operator, you can merge multiple arrays into a large one.
29
+
30
+
Concatenation is the process of joining two or more arrays to create a new large array. In JavaScript, you can concatenate arrays using the spread operator (`...`).
31
+
32
+
To concatenate two arrays using the spread operator, simply spread the arrays inside a new array, like this:
From the code snippet above, there are two arrays - `vowels` and `random`. They are merged into one, called `merged` - containing all the elements of the arrays.
From the code snippet above, there are two arrays - `vowels` and `random`. They are merged into one, called `merged` - containing all the elements of the arrays.
36
43
37
44
### Copying an array
38
-
The spread operator provides a convenient way to copy an array into another array.
45
+
46
+
The spread operator provides a convenient way to copy an array into another array. It is useful when you want to manipulate an array without affecting the original array.
47
+
48
+
To copy an array using the spread operator, spread the original array inside square brackets `[]`; like this:
The `newArray` variable creates a reference to the `vowels` variable instead of copying the entire array value.
61
73
62
-
## Using the spread operator in JavaScript functions
74
+
## Using the spread operator in JavaScript functions
75
+
63
76
The spread operator can be used to accept an array of parameters in JavaScript functions; in this case, it is called the Rest Operator. It captures any number of arguments passed to the function and groups them into an array.
64
77
65
-
> 💡 When you place the spread operator before the parameter name of a function declaration, it is called the Rest Operator.
78
+
> 💡 When you place the spread operator before the parameter name of a function declaration, it is called the Rest Operator.
In the example above, the function `sumNumbers` accepts an array of numbers with an undefined length using the rest operator, then loops through the arguments to add each number together and log the result to the console.
90
+
```
91
+
92
+
In the example above, the function `sumNumbers` accepts an array of numbers with an undefined length using the rest operator, then loops through the arguments to add each number together and log the result to the console.
79
93
80
94
## Using the spread operator in JavaScript objects
81
-
The spread operator isn't just limited to arrays in JavaScript; it can be used with objects to execute tasks such as copying, merging, and updating object properties.
82
95
83
-
### Copying object properties
84
-
Take a look at the example below:
96
+
The spread operator isn't just limited to arrays in JavaScript; it can be used with objects to execute tasks such as copying, merging, and updating object properties.
97
+
98
+
### Copying object properties
99
+
100
+
Take a look at the example below:
85
101
86
-
```js
102
+
```js
87
103
constbook= {
88
-
name:"Rich Dad Poor Dad",
89
-
author:"Robert Kiyosaki"
90
-
}
104
+
name:"Rich Dad Poor Dad",
105
+
author:"Robert Kiyosaki",
106
+
};
91
107
constbookInfo= {
92
-
...book,
93
-
pages:336,
94
-
year:1997
95
-
}
108
+
...book,
109
+
pages:336,
110
+
year:1997,
111
+
};
96
112
97
-
console.log(bookInfo)
113
+
console.log(bookInfo);
98
114
/* 👇🏻 Output: {
99
115
name: 'Rich Dad Poor Dad',
100
116
author: 'Robert Kiyosaki',
101
117
pages: 336,
102
118
year: 1997
103
119
} */
104
-
```
105
-
In the example above, the `bookInfo` object copies the properties of the `book` object.
120
+
```
106
121
107
-
### Merging objects properties
108
-
Consider the following example:
109
-
```js
110
-
constinfo1= {
111
-
name:"Rich Dad Poor Dad",
112
-
author:"Robert Kiyosaki"
113
-
}
114
-
constinfo2={
115
-
pages:336,
116
-
year:1997
117
-
}
122
+
In the example above, the `bookInfo` object copies the properties of the `book` object.
123
+
124
+
### Merging objects properties
125
+
126
+
Consider the following example:
118
127
119
-
constbookInfo= {...info1, ...info2 }
120
-
console.log(bookInfo)
128
+
```js
129
+
constinfo1= {
130
+
name:"Rich Dad Poor Dad",
131
+
author:"Robert Kiyosaki",
132
+
};
133
+
constinfo2= {
134
+
pages:336,
135
+
year:1997,
136
+
};
137
+
138
+
constbookInfo= { ...info1, ...info2 };
139
+
console.log(bookInfo);
121
140
/* 👇🏻 Output: {
122
141
name: 'Rich Dad Poor Dad',
123
142
author: 'Robert Kiyosaki',
124
143
pages: 336,
125
144
year: 1997
126
145
} */
127
-
```
128
-
In the example above, the two objects - `info1` and `info2` are merged into one using the spread operator.
146
+
```
147
+
148
+
In the example above, the two objects - `info1` and `info2` are merged into one using the spread operator.
149
+
150
+
### Updating object properties
151
+
152
+
You can also update the properties of an object with the JavaScript spread operator.
129
153
130
-
### Updating object properties
131
-
You can also update the properties of an object with the JavaScript spread operator.
The code snippet above updates the `year` property within the `bookInfo` object. In some cases, if you need the previous `year` property, you can create a nested object within the `bookInfo` object as shown below:
169
+
```
170
+
171
+
The code snippet above updates the `year` property within the `bookInfo` object. In some cases, if you need the previous `year` property, you can create a nested object within the `bookInfo` object as shown below:
0 commit comments