1
00:00:04,689 --> 00:00:05,350
All right.

2
00:00:05,350 --> 00:00:06,970
So let's talk more.

3
00:00:07,000 --> 00:00:09,640
When we say data mutation.

4
00:00:09,760 --> 00:00:13,300
So back to Visual City code as usual.

5
00:00:13,330 --> 00:00:23,250
I have a folder called Array of Objects and inside I have two files, my HTML and my JavaScript file.

6
00:00:23,260 --> 00:00:29,890
And inside my HTML I have connected my JavaScript weight H1 tag.

7
00:00:29,980 --> 00:00:30,700
All right.

8
00:00:30,700 --> 00:00:37,680
So inside of JavaScript file, there is no code, but instead we have array of objects.

9
00:00:37,690 --> 00:00:43,750
So let's start with data mutation or mutation for short.

10
00:00:44,410 --> 00:00:49,310
So let's say that we have this array of data.

11
00:00:49,330 --> 00:00:51,330
Let's say my sample array.

12
00:00:51,370 --> 00:00:52,930
We're going to have these values.

13
00:00:52,930 --> 00:00:56,440
One, two, three, four, five.

14
00:00:56,740 --> 00:01:04,780
So on this array, we have all the array methods talking about push, shaved coin, card map.

15
00:01:04,810 --> 00:01:12,460
All are now available on the variable we assign to this array and we have those objects or properties

16
00:01:12,460 --> 00:01:16,000
because of what is called prototype inheritance.

17
00:01:16,090 --> 00:01:23,550
So here we are going to use an array method that we want to push a new record into the array of numbers,

18
00:01:23,560 --> 00:01:25,090
as you see on the screen.

19
00:01:25,240 --> 00:01:32,020
But I take away here is that some array methods cause change or mutate the original array.

20
00:01:32,050 --> 00:01:39,280
Before we get into that, lets list some methods that can cause changes to the original array and one

21
00:01:39,280 --> 00:01:41,080
of them is called Push.

22
00:01:41,110 --> 00:01:48,670
Remember, push is used to code change or mutate the original array apart from push to have pop.

23
00:01:48,700 --> 00:01:51,640
Pop also caused changes to the original array.

24
00:01:51,880 --> 00:01:55,930
We also have shaved and then on shaved and others.

25
00:01:55,930 --> 00:02:01,750
So maybe thinking that well, how will I know that a particular method caused change to my data?

26
00:02:01,750 --> 00:02:04,240
And I will show you in just a second.

27
00:02:04,240 --> 00:02:10,240
An example of methods that has not caused change to the original array is concatenate.

28
00:02:10,630 --> 00:02:17,110
And then apart from current card we have for each of which we cover it very soon and map for this one

29
00:02:17,110 --> 00:02:18,790
to we have covered before.

30
00:02:18,790 --> 00:02:21,730
But you want to use it with array of object.

31
00:02:21,730 --> 00:02:32,920
So here let's add new data into the original or original data here.

32
00:02:32,950 --> 00:02:33,610
So here we go.

33
00:02:33,610 --> 00:02:36,970
I'm going to use push so I will take my array.

34
00:02:37,000 --> 00:02:43,150
Dot push is a method that is used to add data at the end of the existing array.

35
00:02:43,150 --> 00:02:44,740
So I'm going to add six to it.

36
00:02:44,740 --> 00:02:51,760
So now if any way I make reference to array this one now instead of one, two, three, four, five,

37
00:02:51,760 --> 00:02:53,830
I'm going to see six inside it.

38
00:02:53,830 --> 00:02:58,330
So if I console.log the array, check out nine.

39
00:02:58,340 --> 00:03:01,390
We see that I have one, two, three, four, five, six.

40
00:03:01,390 --> 00:03:04,660
So anywhere in my code I make reference to array.

41
00:03:04,690 --> 00:03:07,180
I have this space being added.

42
00:03:07,180 --> 00:03:14,140
So for this one we have mutated this particular original array which is not ideal.

43
00:03:14,410 --> 00:03:20,760
So come to this question that how will I know that a certain method cause change my original array.

44
00:03:20,770 --> 00:03:29,220
So back to Google let's say let's search for I mean push method so our type in push and let's say MD

45
00:03:29,240 --> 00:03:34,600
and I want to look through the documentation and then let's see what it says about that.

46
00:03:34,720 --> 00:03:38,380
We see that we have array, dot, prototype, dot push.

47
00:03:38,380 --> 00:03:45,760
So click on that and now let's look at documentation about it so you can see this is a method array,

48
00:03:45,760 --> 00:03:47,830
dot prototype, dot push.

49
00:03:47,830 --> 00:03:55,240
Then let's read through about the description which says that the push method appends values to the

50
00:03:55,240 --> 00:03:57,850
array of which you talked about before.

51
00:03:57,850 --> 00:04:07,390
But coming down here, we see a sentence here that the push method is a mutating method.

52
00:04:07,420 --> 00:04:12,880
It changes the length and then content of this, meaning the particular array.

53
00:04:12,880 --> 00:04:17,140
So it shows that push cause change the original array.