5

List of uses of spread operator

 3 years ago
source link: https://dev.to/capscode/list-of-uses-of-spread-operator-gbb
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for List of uses of spread operator

List of uses of spread operator

Jan 18

・2 min read

Hello everyone,

In this tutorial we are going to explain all the uses of SPREAD OPERATOR in JavaScript.

So without wasting much time,, lets get started.
Below are the uses:

  • Copying an array
  • Concatenating or combining arrays
  • Using Math functions
  • Using an array as arguments
  • Adding elements in array from other array(or pushing array to an array)
  • Merging object
  • Copying an Object
  • Converting HTMLCollections to array
  • Converting string to character
  • Remove duplicates from an array and create an array of unique elements

1. Copying an array 

var arr = [1,2,3,4,5,6,7]
var copy_arr = arr
var copy_arr_spread = [...arr]

console.log(arr) //[1, 2, 3, 4, 5, 6, 7]
console.log(copy_arr) //[1, 2, 3, 4, 5, 6, 7]
console.log(copy_arr_spread) //[1, 2, 3, 4, 5, 6, 7]
arr.push(8)

console.log(arr) //[1, 2, 3, 4, 5, 6, 7, 8]
console.log(copy_arr) //[1, 2, 3, 4, 5, 6, 7, 8]
console.log(copy_arr_spread) //[1, 2, 3, 4, 5, 6, 7]
Enter fullscreen modeExit fullscreen mode

2. Concatenating or combining arrays 

var s1 = ['c','a','p','s']
var s2 = ['c','o','d','e']
var str = [...s1, ...s2]
console.log(str) //["c", "a", "p", "s", "c", "o", "d", "e"]
Enter fullscreen modeExit fullscreen mode

3. Using Math functions

How we ccan find min or max in array 
var find_max = [10,20,50, 90,12]
console.log(Math.max(find_max)) //NaN
console.log(Math.max(...find_max)) //90
Enter fullscreen modeExit fullscreen mode

4. Using an array as arguments 

function TopThree_Skills(a,b,c){
  console.log(`${a}, ${b}, ${c}`) //c, javascript, reatjs
}

var skills=["c", "javascript", "reatjs", "java", "python", "sql"]
TopThree_Skills(...skills)
Enter fullscreen modeExit fullscreen mode

5. Adding elements in array from other array 

var a1 = ['c','o','d','e']
var a2 = ['c','a','p','s', ...a1]
console.log(a2) //["c", "a", "p", "s", "c", "o", "d", "e"]

//some more uses - pushing array to an array
var todo = ["read", "write","learn"]
var my_todo_list = ["code","eat","sleep"]

my_todo_list.push(...todo)
console.log(my_todo_list) //["code", "eat", "sleep", "read", "write", "learn"]
Enter fullscreen modeExit fullscreen mode

6. Merging object 

var obj1 = {
  fname: "John",
  lname: "Doe",
}

var obj2 = {
  comp: "capscode",
  atm_pin: "0000"
}
var obj = {...obj1,...obj2}
console.log(obj) //{fname: "John", lname: "Doe", comp: "capscode", atm_pin: "0000"}
Enter fullscreen modeExit fullscreen mode

7. Copying an Object 

var person = {
  fname: "John",
  lname: "Doe",
}
var myobj_temp = person 
var myobj = {...person}

person.phone = "1234567890"

console.log(person) //{fname: "John",lname: "Doe", phone: "1234567890"}
console.log(myobj_temp) //{fname: "John",lname: "Doe", phone: "1234567890"}
console.log(myobj) //{fname: "John",lname: "Doe",}
Enter fullscreen modeExit fullscreen mode

8. Converiting HTMLCollections to array 

var doc_arr = [...document.querySelectorAll('div')] //try by writing this in your console
Enter fullscreen modeExit fullscreen mode

9. Converting string to character 

var comp = "capscode"
var t=[...comp]
console.log(t) // ["c", "a", "p", "s", "c", "o", "d", "e"]
console.log(...comp) //c a p s c o d e
Enter fullscreen modeExit fullscreen mode

10. Remove duplicates from an array and create an array of unique elements 

const list = [1, 3, 1, 3, 3, 2]
const unique = [...new Set(list)]
console.log(unique) //[1,3,2]
Enter fullscreen modeExit fullscreen mode

if we have missed any point then let us know in the comment.

Hope this post will be helpful for you.
if you liked it, please let us know in the comment and show us your love by hitting 👍

Thank you,
Team CapsCode


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK