1
00:00:02,220 --> 00:00:08,420
Now I already mentioned the splice method that would help us insert elements between two elements,

2
00:00:08,450 --> 00:00:10,790
so between sports and cooking for example.

3
00:00:10,830 --> 00:00:16,020
Now actually the splice method is an extremely useful method that allows us to do all kinds of things

4
00:00:16,110 --> 00:00:17,130
with arrays.

5
00:00:17,130 --> 00:00:21,080
Now let's start with that use case of adding something between two elements.

6
00:00:21,300 --> 00:00:24,690
For that, you use your array and then you call splice on it,

7
00:00:24,690 --> 00:00:31,140
that by the way is one of the methods which is only available on real arrays, not on iterables, not on

8
00:00:31,140 --> 00:00:37,890
array-like objects. That might be one reason why you convert an array-like or iterable object to a real

9
00:00:37,890 --> 00:00:43,970
array with array.from because then on that real array, you can use splice.

10
00:00:43,980 --> 00:00:46,210
Now how does splice work?

11
00:00:46,260 --> 00:00:47,960
It takes at least two arguments there

12
00:00:47,970 --> 00:00:49,360
but there also is another version

13
00:00:49,380 --> 00:00:52,650
if you click on that down arrow here which takes more arguments.

14
00:00:52,650 --> 00:00:55,320
So there are two different versions of that function.

15
00:00:55,320 --> 00:00:59,400
Now in that version here, you specify a start index

16
00:00:59,430 --> 00:01:01,470
so that's zero based

17
00:01:01,470 --> 00:01:06,300
and then the amount of items you want to delete from that index on.

18
00:01:06,380 --> 00:01:07,780
Now we don't want to delete anything here

19
00:01:07,800 --> 00:01:08,300
right,

20
00:01:08,310 --> 00:01:14,640
so maybe we start with index zero for item 1 and then we add zero because I don't want to delete anything,

21
00:01:15,300 --> 00:01:18,390
instead and that's now where the second version comes into play,

22
00:01:18,390 --> 00:01:23,130
we can add more arguments and as soon as you add another comma, this automatically jumps to that other

23
00:01:23,130 --> 00:01:24,060
definition,

24
00:01:24,060 --> 00:01:30,570
now you can add as many other arguments as you want which will be items that are inserted in the place

25
00:01:30,600 --> 00:01:33,480
of these deleted values here.

26
00:01:33,490 --> 00:01:39,090
So now here, let's maybe add good food to mix it up and then console log

27
00:01:41,640 --> 00:01:45,890
hobbies to have a look at that, save that

28
00:01:46,070 --> 00:01:49,510
and if you reload, you now see good food is actually the first element.

29
00:01:50,430 --> 00:01:56,040
Well that happens because here I chose to start at index 0 which is the first element,

30
00:01:56,040 --> 00:02:03,800
let's switch that to one to start at the second element. If we now reload, now good food is inserted between

31
00:02:03,800 --> 00:02:09,620
sports and coding. So the way splice works is that you tell it the index where it should start looking

32
00:02:09,710 --> 00:02:12,290
including that index and that's index one,

33
00:02:12,290 --> 00:02:18,710
so start looking at the second element, then delete as many elements as I specify here, zero and then

34
00:02:18,710 --> 00:02:24,230
insert this in place of that element where you start looking, so in the second elements place in this

35
00:02:24,230 --> 00:02:29,450
case. Now the current second element is not deleted because we didn't specify it here,

36
00:02:29,540 --> 00:02:34,530
so therefore it's just shifted after our newly added element here

37
00:02:34,580 --> 00:02:38,360
and as I explained, you can add more than one hobby here,

38
00:02:38,420 --> 00:02:40,700
you could also add coding here again or whatever you want.

39
00:02:41,630 --> 00:02:46,090
So this is how splice works and how you can use it to insert elements inside of an array.

40
00:02:46,400 --> 00:02:52,160
Of course since you can specify that you want to delete items, you can also use it for deleting.

41
00:02:52,160 --> 00:03:02,430
So here we can also call splice again and then for example say that we want to start at index 0 and

42
00:03:02,430 --> 00:03:07,600
remove one element and this should remove exactly the first element of our hobbies array.

43
00:03:07,650 --> 00:03:13,600
So if we now output hobbies here and we save that, previously we got sports, good food, coding,

44
00:03:13,710 --> 00:03:20,360
now if I reload, we get good food and coding so sports is deleted which makes sense because we tell splice

45
00:03:20,400 --> 00:03:26,430
to start at the first element and remove exactly one element, so therefore remove exactly the first element

46
00:03:27,060 --> 00:03:28,390
and then be done.

47
00:03:28,440 --> 00:03:30,480
Of course you could remove more than one element,

48
00:03:30,480 --> 00:03:37,350
you can remove as many elements as you want, if you just specify splice like this by the way here, you

49
00:03:37,350 --> 00:03:40,200
will see that if I reload, the array is empty.

50
00:03:40,290 --> 00:03:45,770
So splice without an item count will delete all items from that index on,

51
00:03:45,760 --> 00:03:50,100
so for index 0, it will delete all items in the array, for index 1

52
00:03:50,100 --> 00:03:56,310
it would spare the first item but delete all other items and therefore typically of course you do specify

53
00:03:56,310 --> 00:03:56,990
a delete count

54
00:03:57,030 --> 00:03:58,860
but it really depends on what you want to do,

55
00:03:58,950 --> 00:04:04,590
if you want to clear an array you can use splice 0, if you want to delete everything up from a specific

56
00:04:04,620 --> 00:04:09,770
element, you would take that index of that specific element and therefore now delete everything past

57
00:04:09,780 --> 00:04:10,850
that element,

58
00:04:10,890 --> 00:04:13,660
so that's how you can use splice as well.

59
00:04:13,770 --> 00:04:16,020
Now splice will also return something,

60
00:04:16,200 --> 00:04:20,400
it returns the removed elements so that they're not lost.

61
00:04:20,400 --> 00:04:25,170
So if your app needs it, you can now do something with these elements that were removed from the hobbies

62
00:04:25,170 --> 00:04:26,530
array. Now

63
00:04:26,580 --> 00:04:30,270
also nice to know, splice also works with a negative index here,

64
00:04:30,270 --> 00:04:37,200
you can specify a -1 or -2 and what it will then do is it will go to the end of the array

65
00:04:37,620 --> 00:04:38,730
and look from the right,

66
00:04:38,730 --> 00:04:45,690
so if I specify -1, it will basically go to the last element of this array and then delete

67
00:04:45,720 --> 00:04:49,270
one element, so this will for example delete the last element in the array.

68
00:04:49,270 --> 00:04:54,990
So if I reload here, we see sports and good food but coding is gone which was our last element because

69
00:04:54,990 --> 00:04:58,320
we started at the last element and deleted exactly one.

70
00:04:58,320 --> 00:05:04,020
If we start at the second last element and delete exactly one, well then we delete that second last element,

71
00:05:04,290 --> 00:05:07,570
which in this case would be the good food element we added here.

72
00:05:07,570 --> 00:05:13,680
So if I now reload, you'll see good food is gone. So negative indexes are allowed here for accessing

73
00:05:13,680 --> 00:05:16,750
this to access this from the right.

74
00:05:16,770 --> 00:05:20,810
This is not allowed for your normal index based data

75
00:05:20,820 --> 00:05:22,290
accessing here on the arrays

76
00:05:22,290 --> 00:05:28,290
by the way. There where you can access the first or second and so on element, if you specify -2 or

77
00:05:28,290 --> 00:05:31,400
-1, you get undefined. So there, this does not work,

78
00:05:31,410 --> 00:05:35,580
this is really exclusive to a couple of methods and the splice method is one of them.