{"id":5173,"date":"2023-05-27T13:36:00","date_gmt":"2023-05-27T18:36:00","guid":{"rendered":"https:\/\/www.incredigeek.com\/home\/?p=5173"},"modified":"2023-05-27T13:21:49","modified_gmt":"2023-05-27T18:21:49","slug":"javascript-basic-spread-and-rest-usage","status":"publish","type":"post","link":"https:\/\/www.incredigeek.com\/home\/javascript-basic-spread-and-rest-usage\/","title":{"rendered":"JavaScript Basic Spread and Rest (…) usage"},"content":{"rendered":"\n

The Spread and Rest operators i.e. the three dots (…) can be used to make code cleaner and more concise. <\/p>\n\n\n\n

Difference between Spread and Rest<\/p>\n\n\n\n

Spread: Works on elements on the right side of the = operator, and breaks them out into individual elements.<\/p>\n\n\n\n

Rest: Works on the left hand side of the = operator, and compresses them into an array.<\/p>\n\n\n\n

Using Spread to Iterate over Arrays<\/h2>\n\n\n\n

Spread works on iterables like strings, arrays, maps and sets.<\/em><\/p>\n\n\n\n

The spread operator operates similar to taking all the elements out of an array and operating on them or writing them to a new array. Say for instance we have an array of computers and we want to log each element to the console.<\/p>\n\n\n\n

const computersA = ['Acer', 'Apple', 'ASUS']<\/code><\/pre>\n\n\n\n
We can log each element by running<\/p>\n\n\n\n
console.log(computersA[0], computersA[1], computersA[2])<\/code><\/pre>\n\n\n\n
Or we can use the spread operator<\/p>\n\n\n\n
console.log(...computersA)<\/code><\/pre>\n\n\n\n
The output is the same.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Joining Arrays<\/h2>\n\n\n\n
We can also use the spread operator to join two arrays together.  Say we have two arrays<\/p>\n\n\n\n
const computersA = ['Acer', 'Apple', 'ASUS']\nconst computersB = ['HP', 'Dell', 'Lenovo']<\/code><\/pre>\n\n\n\n
And we want to concatenate them together.  We can do that simply by<\/p>\n\n\n\n
const computerAll = [...computersA, ...computersB]<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Rest Example<\/h2>\n\n\n\n
Rest is simply the opposite of spread.  Spread take an item like an array and expands it out into elements we can use.  Rest takes elements and packs them into an array.  This can be extremely helpful if we want to pass in an unknown amount of elements into a function for processing.<\/p>\n\n\n\n
const computersA = ['Acer', 'Apple', 'ASUS']<\/code><\/pre>\n\n\n\n
function writeToLog (...arr) {\n  for (const element of arr) {\n    console.log(element)\n  }\n}<\/code><\/pre>\n\n\n\n
Now we can call the function with as many elements in the array and they will all get logged to the console.<\/p>\n\n\n\n
writeToLog('Razer', 'Alienware', 'Legion')<\/code><\/pre>\n\n\n\n
We could also use both the Spread and Rest functions<\/p>\n\n\n\n
const gamingLaptops = ['Razer', 'Alienware', 'Legion']\nwriteToLog(...gamingLaptops)<\/code><\/pre>\n\n\n\n
Now as we add more laptops to the gamingLaptops array, the function will automatically process the line and write to console.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
https:\/\/www.freecodecamp.org\/news\/three-dots-operator-in-javascript\/<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
The Spread and Rest operators i.e. the three dots (…) can be used to make code cleaner and more concise. Difference between Spread and Rest Spread: Works on elements on the right side of the = operator, and breaks them … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1460,792],"tags":[1505,1437,1463,606],"class_list":["post-5173","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","tag-arrays","tag-javascript","tag-js","tag-programming"],"_links":{"self":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/comments?post=5173"}],"version-history":[{"count":8,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5173\/revisions"}],"predecessor-version":[{"id":5184,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5173\/revisions\/5184"}],"wp:attachment":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/media?parent=5173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/categories?post=5173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/tags?post=5173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}