Learn React #6: Spread Syntax + Spreading in React

hey everyone in today's video we are going to be going over the spread operator and how it works in javascript and how you're going to use it in react and if you're from my last two videos where i talked about destructuring and mapping you'll know that i'm doing this video because in one of my props videos i used uh spread syntax and it confused a couple of people and i thought it would be really nice to just have a video solely dedicated to how the spread operator works that way for the further videos in our tutorials when we start doing projects we can use the spread operator and not have to worry too much about not understanding it so hopefully by the end of this video you walk away with a really good uh explanation of how this works and just a quick reminder if you like and find value in this video please consider liking leaving a comment i try to read every single comment and subscribing it really helps with the youtube algorithm and it helps get this video out to more people so let's jump into it funnily enough the mozilla documentation on the spread syntax isn't the best in my opinion um i personally was a bit confused when i was first trying to learn this a little bit ago um and i looked at this documentation i sort of had no idea what was going on but i think there's one good example if we scroll down a bit uh down here you can see here uh in this example i really like this example so the spread operator is essentially just having an ellipses which are three dots right before either an array or an object and what that will do is sort of different depending on the situation you're using it so let's take a look at this first example in this first example we have two different arrays each with three numbers inside of them and we essentially want to create one array um that is the join uh the concatenation of both of them so one method to do it is with the concat uh method and you can see here what they're doing here is they're saying array one is now equal to whatever array 1 was concatenated with array 2. and what this will do is just join the two together but another way to do it is using the spread syntax so what the spread syntax will do is whenever you write dot dot dot before an array it will essentially say okay i want to take all of those elements from whatever you know that array was and individually insert them into the data structure that is calling us so let's go ahead and make our own example here so you know let's say cons r1 is equal to you know zero we'll make it sort of the same way uh cons r2 equals you know uh let's say three four and five okay uh what did i mess up here i forgot a comma so if let's console so now let's say you know const r3 is equal to let's see what happens if we just put r1 and r2 and let's console.log r3 you can see here if i were to console.log it it would just be an array of arrays because we are straight up just passing obviously the arrays into this third array and if we were to open it up you would see the first element is one array our first array and the second element is our second array but let's say i wanted to actually get all the elements from here into here and not have it nested that's where the spread operator comes in if you were to put that dot dot dot it will spread everything from array 1 into this new array instead of having it as a nested object and as you can see here um if we were to clear the console and let's go ahead and refresh we can see here this is what our new array looks like it is pretty much just a sing a 1d array that has all the elements flattened inside of it now um you know if you wanted to add let's say you know i wanted to add other elements before this you can see it works just fine and adding these in here will pretty much just straight up just flatten whatever data you are passing in now let's go to another example and this example i think you're going to use a lot more and it actually comes from our destructuring uh funny enough the destructoring documentation so over here you can see that um if you watch our destructuring video you can see essentially what they're doing is they um are assigning um you know they have an array of five numbers and they are assigning the first number to a the second number to b and then they are using the spread operator to assign the rest of the numbers into this variable called rest now this is probably one of the coolest examples of spreading when it comes to array spreading that there is because what this allows you to do is um if you for example want to if you have an array like this and you want to pluck out you know just a couple of indexes the first two or three indexes and then after that um take out the entire uh store the rest of the array somewhere else well you can just use the spread operator um and essentially what it will do is it will assign these three elements so everything that we didn't destructure ourselves into an array itself and i find that to be a really cool example now let's talk about how you are going to use the spread operator when it comes to you know things like objects so let's create a simple object we'll use our trusty employee object so employees equals an array of objects so let's say you know the first employee his name is going to be anthony and his id is going to be no abc and our second employee his name is going to be um let's say george and his id is going to be like uh uh i don't know like q-w-e or something um and let's get rid of this and let's get rid of this now if we wanted to use the structuring here or sorry the spread operator there are a couple of different ways but let's first just create you know um a basic a basic example let's even just start with one employee so we have over here a very basic employee component and what this will do is it will take in the name and the id of the employee and then just display it so it'll say you know name and then whatever the employee's name is so like anthony and then id and it'll be abc so it's a very basic component that we have here now one of the things we can do is we can simply call employee our employee um component let's make sure we spell that right and we can say you don't name we can pass in the props just like we did in the props video and say name equals you know employ uh let's say employee zero or let's you know consulate first employee is equal to employee of zero and we could say you know first employee dot name and then id is equal to first employee dot id okay so we can go ahead and save that let's get rid of this text over here and as you can see we have it um where it will pass in you know the name and the id just from that variable now what we could do to simplify this is simply use the spread operator with our object so we can go ahead and instead of passing you know what if for example instead of just name and id we had name we had address we had salary we had you know a lot of different variables we wouldn't want to you know one by one say like you know salary equals life first employee.salary and like um you know for example address equals like first employee.address as you can see it starts to you know um really uh sort of make our code a lot more unreadable and it gets longer and longer depending on how much you have here and you will see that in a lot of real real world applications um this can get pretty big so um instead what you can do is you can go ahead and delete all of this and you can actually take our first instead of writing all of the stuff where we do you know first employee.address first employee.name you can go ahead and just do dot dot in a map employee first employee just like that and what that will actually do is it will spread all of these parameters all of these attributes of your object as attributes themself into our props object which gets passed into here and you'll probably be wondering like okay why can't i just pass in first employee just like that and the reason is when you pass in just first employee that will just pass in if i were to console.log my props here that will straight up just pass in the entire object itself the same way in our array example it would have just passed in the entire array itself but when we actually wrap it around in our wrap it around in another map and destructure it it will pass in as you can see here from the props now instead of what it was doing above which was passing in uh you know the actual object itself it is passing in all the attributes um from that object itself into the actual employee component itself so this is probably going to be you know uh the most uh the most um use case the the most common use case of this destructuring uh method that you are going to get another cool use case that i like to do sometimes let's get rid of all of this stuff is for example um if i am trying to create you can do the same thing as what we did with arrays as objects so for example if i have you know like um let's say a base object so like you know base employee object and let's you know maybe throw some attributes in there um that is common to all employees so for example um let's say roll is let's you know make something random up like roll is employee and let's say the company since all the employees are going to be from the same company let's say the company is you know like a code sandbox or something well if we wanted to add this to our first employee object what we could do here is we can make this first employee object an object and we can go ahead and spread all the um spread our uh all the attributes from our base employee object and then also spread all the attributes from our employee zero object and now you can see here if i were to console let's get rid of this console log just so it doesn't confuse anyone if i were to go ahead and console.log first employee and let's go ahead and clear this and refresh you can see here that it has all the same attributes that you know um the employee actually had plus our base attributes like what company they work for and what their role is in that company um so this is a pretty cool application of the spread operator it's sort of a basic and 99 of the time you're going to be using it with basic use cases like that but i'm really uh just excited uh now that we got the sort of spread operator down and you know how the spread works um going forward and showing you some of even the more complex cases of using the spread operator in you know projects we are going to do in the future but just so you guys know what the spreader operator does and how it works i feel like these examples are um good enough to the point where if you see someone else's code or you look on stack overflow and you see it being used it'll give you an understanding of what they're using it for and how they are using it so if you found value in this video like i said before i love if you consider subscribing leaving a comment really helps with the youtube algorithm even liking the video and i hope you're all staying safe and i will see you guys in the next video

Channel: Anthony Sistilli

Views: 25,546

Keywords: React Material UI, React Material UI Tutorial, React MUI, React, Tutorial, Material UI, react tutorial, reactjs tutorial, spread operator in react js, react spread operator, react spreading, react spread syntax, react spread, react spreading props, javascript spread operator, javascript spread operator vs object.assign, js spread operator, js spread syntax, javascript object spread, js array spreading, js spreading object, react tutorial project, react tutorial for beginners

Id: L7o0wKjjFi4

Length: 12min 13sec (733 seconds)

Published: Mon Sep 28 2020