| 
									
										
										
										
											2018-10-12 04:30:38 +05:30
										 |  |  | --- | 
					
						
							|  |  |  | title: Spread Operator | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Spread Operator
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The spread operator (`...`), allows to get the elements of a collection. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | One of the most commom uses is for `Node` Objects, when using query selectors in the browser, in order to make them iterable Array Objects: | 
					
						
							|  |  |  | ```javascript | 
					
						
							|  |  |  | const paragraphs = document.querySelectorAll('p.paragraph'); | 
					
						
							|  |  |  | const arr = [...paragraphs]; | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Another use of the spread operator is for Array concatenation: | 
					
						
							|  |  |  | ```javascript | 
					
						
							|  |  |  | const arr_1 = [1, 2, 3, 4] | 
					
						
							|  |  |  | const arr_2 = [5, 6, 7, 8] | 
					
						
							|  |  |  | const arr_final = [...arr_1, ...arr_2] | 
					
						
							|  |  |  | // arr_final = [1, 2, 3, 4, 5, 6, 7, 8] | 
					
						
							| 
									
										
										
										
											2018-10-12 16:58:59 -03:00
										 |  |  | ``` | 
					
						
							| 
									
										
										
										
											2018-10-21 16:58:39 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | The spread operator can also copy enumerable properties from one or more objects onto a new object: | 
					
						
							|  |  |  | ```javascript | 
					
						
							|  |  |  | const obj1 = { | 
					
						
							|  |  |  |   a: 1, | 
					
						
							|  |  |  |   b: 2, | 
					
						
							|  |  |  |   c: 3 | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const obj2 = { | 
					
						
							|  |  |  |   d: 4,   | 
					
						
							|  |  |  |   e: 5, | 
					
						
							|  |  |  |   f: 6 | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const newObj = {...obj1, ...obj2); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | // newObj = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 } | 
					
						
							|  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2018-10-12 16:58:59 -03:00
										 |  |  | ### More Information:
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-15 20:59:34 +09:00
										 |  |  | - [MDN - Spread Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) |