{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/spread-operator-and-rest-parameter-in-javascript/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n

The spread operator was introduced in ES6. We are going to understand the benefits of this operator by analyzing a few use cases.

\n

Before we straightaway start with examples, we need to be aware of the following JavaScript concepts:

\n\n

Now, let's get started.

\n

Copying an array

\n
const carBrand = ["kia", "toyota’, ‘hyundai"]\n\nconst carBrandCopy = carBrand\n\nconsole.log(carBrand) // ["kia", "toyota", "hyundai"]\n\nconsole.log(carBrandCopy) // ["kia", "toyota", "hyundai"]
\n

On line 3, we have created a copy of the carBrand array. The problem in creating a copy of an array with this approach is that any changes made to the original array will reflect in the copy of the array as well. This is because objects in JavaScript are copied by reference.

\n

Let’s prove this by pushing a new element to the carBrand array.

\n
const carBrand = ["kia", "toyota", "hyundai"]\n\nconst carBrandCopy = carBrand\n\ncarBrand.push("honda")\n\nconsole.log(carBrand) // ["kia", "toyota", "hyundai", "honda"]\n\nconsole.log(carBrandCopy) // ["kia", "toyota", "hyundai", "honda"]
\n

As you can see above, we have the honda element in both carBrand and carBrandCopy arrays.

\n

Creating a copy with spread operator however solves this problem. Let’s take a look at an example.

\n
const carBrand = ["kia", "toyota", "hyundai"]\n\nconst carBrandCopy = [...carBrand]\n\ncarBrand.push("honda")\n\nconsole.log(carBrand) // ["kia", "toyota", "hyundai", "honda"]\n\nconsole.log(carBrandCopy) // ["kia", "toyota", "hyundai"]
\n

On line 3, we have used the spread operator syntax: three dots followed by the name of the array we want to extract the elements from.

\n

Combining arrays

\n

We can combine two arrays by concatenating them to an empty array. Take a look at the code snippet below:

\n
const modelsOne = ["corolla", "yaris", "camry"]\n\nconst modelsTwo = ["vellfire", "glanza"]\n\nconst modelsCombined = [].concat(modelsOne, modelsTwo)\n\nconsole.log(modelsCombined) // ["corolla", "yaris", "camry", "vellfire", "glanza"];
\n

Now If we need to insert new elements at the start, end or in between the arrays then we will have to use the push method. Take a look at the code sample below:

\n
const modelsOne = ["corolla", "yaris", "camry"]\n\nconst modelsTwo = ["vellfire", "glanza"]\n\nmodelsOne.push("crysta")\n\nconst modelsCombined = [].concat(modelsOne, modelsTwo)\n\nconsole.log(modelsCombined) // ["corolla", "yaris", "camry", "crysta", "vellfire", "glanza"];
\n

With spread operator, we can combine arrays with a more concise syntax though. Take a look:

\n
const modelsOne = ["corolla", "yaris", "camry"]\n\nconst modelsTwo = ["vellfire", "glanza"]\n\nconst modelsCombined = [...modelsOne, ...modelsTwo]\n\nconsole.log(modelsCombined) // ["corolla", "yaris", "camry", "vellfire", "glanza"];
\n

We can also easily add new elements at the start, at the end or in between the arrays we are combining by simply adding the elements in the desired position and adding a comma after them. Consider the following:

\n
const modelsOne = ["corolla", "yaris", "camry"]\n\nconst modelsTwo = ["vellfire", "glanza"]\n\nconst modelsCombined = ["innova", ...modelsOne, "crysta", ...modelsTwo]\n\nconsole.log(modelsCombined) // ["innova", "corolla", "yaris", "camry", "crysta", "vellfire", "glanza"];
\n

Above, we have added innova and crysta elements to the array without much hassle.

\n

Passing an array as an argument to a function

\n
function sum(x, y, z) {\n  const sum = x + y + z\n  console.log(sum)\n}
\n

Above, we have a function named sum that takes in three numbers as parameters and logs their sum to the console.

\n
const nums = [12, 34, 68]
\n

Above we have three numbers in the nums array. If we need to pass these numbers as arguments to the sum function, then we will have to pass each number using the bracket notation and its respective index number like the following:

\n
const result = sum(nums[0], nums[1], nums[2])\n\nconsole.log(result) //114
\n

As you can see, it’s cumbersome and not at all efficient. With spread operatior, things become much more easier. All we need is three dots and the name of the array inside the parentheses.

\n
const result = sum(...nums)\n\nconsole.log(result) //114
\n

...nums will extract the elements from the nums array into the parentheses as function arguments.

\n

Rest parameter

\n

The rest parameter syntax allows functions to accept an indefinite number of arguments as an array.

\n

The ...restParam bundles all the extra parameters into a single array.

\n

A function definition can have only one ...restParam.

\n

The rest parameter must be the last parameter in the function definition.

\n
function rest(a, b, ...moreArgs) {\n  console.log(‘a:’, a);\n  console.log(‘b:’, b);\n  console.log(‘moreArgs:’, moreArgs);\n}\n\nrest(1, 2, 3, 4, 5);\n\n// Console output:\n// a: 1\n// b: 2\n// moreArgs: [3, 4, 5]
\n","frontmatter":{"title":"Spread Operator & Rest Parameter in JavaScript","date":"2021-05-15"}}},"pageContext":{"slug":"/spread-operator-and-rest-parameter-in-javascript/","prev":{"fields":{"slug":"/scope-scope-chain-lexical-scoping-and-closure-in-javascript/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/understanding-this-keyword-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}