React for JavaScript Programmers III: Spread them!

One thing we have talked several times before is the immutability of original data in functional programming. This is somewhat problematic in JavaScript.

One problem with JavaScript is when you assign an array, you actually copy the reference, not made a copy.

For example, if you have an array called myArray, and you want to make a copy, you would PROBABLY do...

var myArray=[1,2,3,4]
var myCopy = myArray

However, JavaScript did NOT create a new array here. Instead, both myArray and myCopy are pointing to the SAME array. So changing either myArray or myCopy will "mutate" the original array.

You can explicitly create a new array with an array construction array()

let myCopy = new Array()

 But how do you copy stuff over? You can copy it with the from() method

let myCopy = Array.from(myArray)

What if we want to copy from multiple arrays? We could use concat()

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2); // [a,b,c,d,e,f]

Gee, how many variations are there? Quite a few. 

But there's a much easier way... with the spread operator, that replaces all these, and can be used on arrays, objects, and more. 

So this:

var myArray=[1,2,3,4]
var myCopy = Array.from(myArray)

Becomes this instead:

var myArray=[1,2,3,4]
var myCopy = [...myArray]

 Concatenating arrays is now easy-peasy:

 const array3=[...array1,...array2]

 And you can insert arbitrary entries in there without problems. 

 const array3=[...array1,42,...array2,7]

This also works on objects (and other things)!  (And thus, React states!) 

 const activeUsers= [
  {user: "John", rank: "user"},
  {user: "Jean",rank:"admin"}
]

 function addUser(newUser) {
  return [...activeUsers, {...newUser}]
}

 newActiveUsers = addUser({user: "Joey",rank: "Intern"})

 And now we can setState with this newActiveUsers object! 

 There are obviously other uses for the spread operator, but it's mostly used in React to help you copy the existing state with new stuff added. 

 For a full explanation of spread operator, see Colt Steele's short video. 

But wait, we have much more about React to cover!  Next up... props and states and contexts and so on....

Comments

Post a Comment

Popular posts from this blog

Yet another take on recursion

Recursion is often one of the hardest things to "get" in programming, so when you have your "aha" moment, it's that much more amazing. Conceptually, it's not that hard to see, but how do you actually program one such?  First, realize that " recursion is a method of solving a problem where the solution depends on solutions to smaller instances of the same problem." Let us try something simple. Let's say... I want you to sum up the elements of an arbitrary array, let's call it arr. It can have any number of elements, and each element is an integer. For the purpose of this exercise, let's just say it's [1,2,3,4], but it can be any integer, and the array can be any valid size. And I want to you use recursion, not loop (no for or while or such statements).  Now, remember the definition: "solving a problem where the solution depends on the solutions to smaller instances of the same problem".  Let's call this function rsum (...
Read more

The Bare Essential Guide to Git

Image
One thing new programmers often see mentioned is "git", and a lot of jobs require you to know git or a similar version control tool. So what is it, and how do you learn it?  This is NOT a git tutorial. This is the "bare essential" guide to git, just enough to get you started. I'll guide you on how to  start a personal project repo on GitHub,  link it with your local git repo, then have you  make some changes,  commit that change,  push it to the remote repo (on GitHub),  revert that change locally.  This will NOT cover branches (and checkouts and pull requests and so on) and forks, or multiple contributors. You can read a more complete guide on that. This will, however, get you working with your own code repo.   Please keep in mind that this is JUST enough to get you started using git and GitHub. It BARELY scratches the surface of the power git offers when you have multiple contributors and their code starts to conflict, and the power of...
Read more

How to Solve a Problem 5: Horse-Racing Duals and HyperDuals

 Let us take a look at one of the competitors to HackerRank... CodeWars, and one of the puzzles on it. This one is called Horse-Racing Duals, and a harder version called HyperDuals. But one thing at a time.  You can access the problem here:  Link Read the problem very carefully. Noticed that it lists " external resources: Sorting, Lists "? Clearly, you will need to sort the solution.  I am going to do this in JavaScript, which is pretty universal.  First, they did NOT create any data structure(s) for you, so you have to create your own. I simply called mine horses . And I added a line in the readline loop to load the number into the array.  const   N  =  parseInt ( readline ()); var   horses = [] horses . length = N ; for  ( let   i  =  0 ;  i  <  N ;  i ++) {      const   pi  =  parseInt ( readline ());      horses [ i ]= pi } But...
Read more