This article will cover the and how you can use them in your day-to-day JavaScript programming. This article assumes you have some familiarity with coding in the JavaScript ecosystem. spread operator Prerequisites We will be using a code example from a previous post - . Since the spread operator does the opposite thing of what do, a good understanding of would be helpful here. However, as a brief introduction, using the three periods syntax , rest parameters allow us to capture an indefinite number of function arguments as an array. It is kind of similar to or . How to Use Rest Parameters in JavaScript rest parameters rest parameters (…) Java Varargs C# parameter arrays In this code example, the log function takes the and parameters then outputs them to the console. level args { ( i = ; i < args.length; i++) { .log(level, , args[i]); } } // ------------------ 👇 a rest parameter ( ) function log level, ...args for var 0 console `{$i}` The Spread Operator or Spread Syntax Basically, the spread operator converts an array to a list of comma-separated values (CSV), contrasting rest parameters, where it takes a CSV and converts it into an array. We have below a logging function similar to the one above (but without using rest parameters). Let us assume that the variable value comes from an external API that returns a list with varying types and values, and we want to log each element to the console. We can see from the output that while the function is expecting four arguments, we’ve only given it two. Hence the being shown twice for variables and . responseBody undefined arg2 arg3 { .log(level, , arg1); .log(level, , arg2); .log(level, , arg3); } responseBody = [ { : }, , ]; log( , responseBody); ( ) function log level, arg1, arg2, arg3 console '{0}' console '{1}' console '{2}' var name 'Non-Master Anakin Skywalker' 1 false 'DEBUG' // expected output: // DEBUG {0} [ { name: 'Non-Master Anakin Skywalker' }, 1, false ] // DEBUG {1} undefined // DEBUG {2} undefined This can be resolved by providing the correct arguments to the function. This can be done by getting each element by index and pass each to the function. log( , responseBody[ ], responseBody[ ], responseBody[ ]); 'DEBUG' 0 1 2 // expected output: // DEBUG {0} { name: 'Non-Master Anakin Skywalker' } // DEBUG {1} 1 // DEBUG {2} false That should be good, our logging function is working as expected, but this can be improved. The desired output can be done with less code using the . We don’t need to access each list element by index. We can use the three periods syntax again here and prepend it to the list variable. Converting it to a comma-separated values that the logging function is expecting. spread operator (…) log( , ...responseBody); // --------- 👇 spread operator 'DEBUG' // expected output: // DEBUG {0} { name: 'Non-Master Anakin Skywalker' } // DEBUG {1} 1 // DEBUG {2} false What was done by using the spread syntax was taking a list and converting it to a CSV. When we used the logging function at first, we missed providing the remaining two arguments. As if we were calling the function like this: log( , [{ : }, , ], , ); 'DEBUG' name 'Non-Master Anakin Skywalker' 1 false undefined undefined Using the spread operator, we have correctly provided the logging function’s arguments. the value of the list into an actual CSV that is accepted by the function. As if we were calling the function like this, which is the correct usage: Spreading log( , { : }, , ); 'DEBUG' name 'Non-Master Anakin Skywalker' 1 false Spread Operator and Rest Parameters If you’re already comfortable with the concept of the spread operator, let us go back to my previous point where it is conceptually the opposite of rest parameters. Let’s use the first logging function from above that uses and use it together with the spread operator. rest parameters When directly passing the list variable, it shows only one debug output to the console. This is expected behavior since what rest parameters do is capture an indefinite number of arguments supplied to a function. In this case, we’ve only given it one argument, thus logging only once. { ( i = ; i < args.length; i++) { .log(level, , args[i]); } } responseBody = [ { : }, , ]; log( , responseBody); ( ) function log level, ...args for var 0 console `{ }` ${i} var name 'Non-Master Anakin Skywalker' 1 false 'DEBUG' // expected output: // DEBUG {0} [{ name: 'Non-Master Anakin Skywalker' }, 1, false] When passing the list variable using the spread syntax to the function, it shows three debug console outputs, which is the expected output, matching the number of elements from the list. log( , ...responseBody); 'DEBUG' // expected output: // DEBUG {0} { name: 'Non-Master Anakin Skywalker' } // DEBUG {1} 1 // DEBUG {2} false This shows how rest parameters and the spread operator are opposite of each other and how the two can be used together. Let us look at another example of the spread operator but with a list with four elements. This time it will output to the console four times. responseBody = [ { : }, , , [ , ] ]; log( , ...responseBody); var name 'Non-Master Anakin Skywalker' 1 false 'Tatooine' 'Coruscant' 'DEBUG' // expected output: // DEBUG {0} { name: 'Non-Master Anakin Skywalker' } // DEBUG {1} 1 // DEBUG {2} false // DEBUG {3} [ 'Tatooine', 'Coruscant' ] Adding Element to a List There is also another use for the spread operator aside from passing them as function arguments. Here we have a list variable that has two elements. If we want to add a new element at the end of the list, that should be straightforward. tail head = { : }; tail = [{ : }, { : }]; .log(tail); tail.push(head); .log(tail); const value 'A' const value 'B' value 'C' console // expected output: // [ { value: 'B' }, { value: 'C' } ] console // expected output: // [ { value: 'B' }, { value: 'C' }, { value: 'A' } ] When adding a new element at the front of the list, we can use the spread operator. head = { : }; tail = [{ : }, { : }]; newList = [head, ...tail] .log(newList); const value 'A' const value 'B' value 'C' // -------------------- 👇 spread operator const console // expected output: // [ { value: 'A' }, { value: 'B' }, { value: 'C' } ] End In this post, we looked at the spread operator in order to convert a list into a CSV. We learned how the spread operator is the opposite of the rest parameters and how they can be used together. Then, we concluded by using the spread operator to append elements at the front of a list. Also Published On: https://micogongob.com/how-to-use-the-spread-operator-in-javascript
