1 00:00:00,120 --> 00:00:04,650 You might get a question like this, an interview regarding adding elements to their right. 2 00:00:05,040 --> 00:00:10,710 As you can see here, we must try to function, which gets in the way and an element and returns in 3 00:00:10,710 --> 00:00:12,510 the grave with this element at the end. 4 00:00:15,840 --> 00:00:20,310 And actually, it sounds really easy, but you can solve it in different ways. 5 00:00:20,550 --> 00:00:25,440 This is why you must solve it correctly and at least tell interviewer the correct way. 6 00:00:25,680 --> 00:00:30,730 So typically beginners will use here as a push and then we're building something like this. 7 00:00:30,730 --> 00:00:36,870 So we have a function, for example, happened and we get into arguments how Ray and our new element 8 00:00:37,140 --> 00:00:41,940 and what we're doing here, we're using a report and we're passing inside our L.. 9 00:00:42,060 --> 00:00:47,220 And after this were written in this new array, then we just right here console.log append. 10 00:00:47,460 --> 00:00:48,800 And here we're checking, okay. 11 00:00:48,810 --> 00:00:53,100 For example, we have our array one tool and here our third element three. 12 00:00:53,250 --> 00:00:57,450 Now let's check if it's working where the light in the page and where get in one two three. 13 00:00:57,690 --> 00:01:00,240 And you think that you build this function correctly? 14 00:01:00,450 --> 00:01:01,680 But here's the problem. 15 00:01:01,950 --> 00:01:04,560 Actually, I want to write here our right. 16 00:01:04,770 --> 00:01:08,790 So let's name it, for example, numbers and we haven't saved one and two. 17 00:01:09,120 --> 00:01:12,930 And now here inside depend-, I want to just pass our numbers. 18 00:01:13,230 --> 00:01:19,110 But after this, I want to console.log numbers where reloading the page and we're getting one two three 19 00:01:19,110 --> 00:01:19,890 one two three. 20 00:01:20,160 --> 00:01:20,850 What does it mean? 21 00:01:20,860 --> 00:01:23,730 We have this append function and we're written here. 22 00:01:23,730 --> 00:01:24,360 They are, right? 23 00:01:24,690 --> 00:01:29,370 And most people will think that when we're using this function, we're creating new array. 24 00:01:29,580 --> 00:01:33,180 This is when normally they might write new numbers. 25 00:01:33,450 --> 00:01:40,020 And here we're calling our append function and we think, OK, we didn't modify our old today, but 26 00:01:40,020 --> 00:01:44,530 we just get new numbers because append function returns faster the rate. 27 00:01:44,850 --> 00:01:51,710 But as you can see, the stories are completely equal because actually every push modifies the old array 28 00:01:51,900 --> 00:01:53,790 and it doesn't create an Uri. 29 00:01:54,090 --> 00:01:57,960 And this is typically a good example of bad code in the application. 30 00:01:57,990 --> 00:01:58,770 Why is that? 31 00:01:58,980 --> 00:02:03,930 Just imagine you have one part of your application and you have the this numbers array. 32 00:02:04,200 --> 00:02:08,430 Then at some point your column this append function to get new numbers. 33 00:02:08,640 --> 00:02:14,370 But then out of the blue, you modified your old numbers, which you didn't intend to do. 34 00:02:14,700 --> 00:02:19,980 This is why you think that in your application, some magic can happen just because the colon of this 35 00:02:19,980 --> 00:02:23,520 function modifies some data outside of this function. 36 00:02:23,790 --> 00:02:27,270 This is a bad approach how we can fix it and make it better. 37 00:02:27,570 --> 00:02:30,780 We should not use here as a push, put it, is not safe. 38 00:02:30,990 --> 00:02:36,720 What we want to use here instead, for example, Spread Operator began right here that we want to return 39 00:02:36,720 --> 00:02:42,330 in in your right and we want to spread all elements of our array that we're getting as an argument. 40 00:02:42,630 --> 00:02:46,870 And if you don't know what is spread, this is a the script six operator. 41 00:02:46,890 --> 00:02:48,000 These are three dots. 42 00:02:48,150 --> 00:02:54,720 And what we are doing here were spreading all elements of this array inside on your right, which essentially 43 00:02:54,720 --> 00:02:57,270 means that we are creating a copy of this array. 44 00:02:57,540 --> 00:02:59,250 No one to add this element. 45 00:02:59,250 --> 00:03:00,990 And then the following you are right. 46 00:03:01,170 --> 00:03:03,480 This is why we were just right comma element. 47 00:03:03,690 --> 00:03:04,980 Let's check this out now. 48 00:03:05,190 --> 00:03:08,400 I am allowed in the page and here we're getting another response. 49 00:03:08,580 --> 00:03:14,880 We're getting here one, two three and here one two, which actually means this single line will return 50 00:03:14,880 --> 00:03:16,140 for us new array. 51 00:03:16,320 --> 00:03:22,320 And the function is completely safe because we're not modifying any data outside of this function. 52 00:03:22,620 --> 00:03:25,200 This is why this implementation is much better. 53 00:03:25,350 --> 00:03:31,470 If you're asked even something that trivial, like pushing elements to the array also behave exactly 54 00:03:31,470 --> 00:03:33,300 the same behavior with objects. 55 00:03:33,450 --> 00:03:39,630 If we're passing inside our function and object and when mutated there, then when mutate an object 56 00:03:39,630 --> 00:03:42,180 outside of our function and this is bad. 57 00:03:42,360 --> 00:03:46,350 And you can also use spread with an object to create a new object. 58 00:03:46,530 --> 00:03:48,510 In this case, we're on the safe side. 59 00:03:48,750 --> 00:03:54,000 And if you didn't know this function like here is called pure, because first of all, this function 60 00:03:54,000 --> 00:03:59,160 will return the same result every single time when were calling it with the same arguments. 61 00:03:59,430 --> 00:04:04,020 And secondly, it doesn't modify any variables outside of our function. 62 00:04:04,260 --> 00:04:06,690 This is why this is safe, pure function.