1
00:00:02,450 --> 00:00:09,170
In this dummy application which I'm giving you here, we now actually already achieved the most important

2
00:00:09,170 --> 00:00:09,910
improvements,

3
00:00:09,920 --> 00:00:17,630
now there are smaller things where we could consider alternative code which might be better, though here

4
00:00:17,660 --> 00:00:24,020
we really also get closer to these micro optimizations which you generally want to avoid and I'll come

5
00:00:24,020 --> 00:00:27,350
back to them and why you might want to avoid them in a second.

6
00:00:27,350 --> 00:00:31,700
Let me show you one thing or one part of our code that we could improve though,

7
00:00:31,700 --> 00:00:38,180
for example here in delete product, this code for deleting a product. We can improve it and for performance,

8
00:00:38,270 --> 00:00:39,720
we might gain a little bit

9
00:00:39,860 --> 00:00:43,830
but we can at least improve it for simplicity reasons

10
00:00:44,210 --> 00:00:50,480
because what we're doing here in the end is really a complex way of overriding our products array with

11
00:00:50,480 --> 00:00:55,590
a new products array which of course also therefore is stored in memory and occupies some space there

12
00:00:55,850 --> 00:00:57,670
when we don't really need to do that,

13
00:00:57,830 --> 00:01:04,700
instead what we could do here is we could simply use the products array we're importing, arrays are reference

14
00:01:04,700 --> 00:01:05,340
types

15
00:01:05,360 --> 00:01:12,080
so when we work with the imported array here, we work with the one array which is set up and stored in

16
00:01:12,080 --> 00:01:24,310
memory here and instead of overriding it with a new array of products, we can just get the index of

17
00:01:24,310 --> 00:01:32,920
the item which should be deleted, deleted product index for example by using products find index, looping

18
00:01:32,920 --> 00:01:38,770
through all products here in the anonymous function and finding the product where the ID is equal to prodId

19
00:01:38,800 --> 00:01:45,820
I'm getting as an argument and then we can reach out to product, so to our array and use the splice

20
00:01:45,820 --> 00:01:53,260
method you learned about in the Arrays and Iterables section to splice the element at this ID and

21
00:01:53,350 --> 00:02:00,500
only that element and this would be a simple way of updating our products here.

22
00:02:00,510 --> 00:02:05,730
Now I need to forward the deleted product here, so I want to store it before I remove it from the array,

23
00:02:06,180 --> 00:02:12,720
deleted product, by reaching out to products and accessing the item at the deleted product index.

24
00:02:12,720 --> 00:02:16,740
So now we store a pointer at this product here before we remove it from the array,

25
00:02:16,800 --> 00:02:19,450
therefore since we still have a pointer it will live on and

26
00:02:19,560 --> 00:02:28,330
we pass that pointer to update products. With that if we save that and we go back here and delete,

27
00:02:28,470 --> 00:02:35,580
this still works but now actually here we have less complicated and probably also a bit faster code.

28
00:02:36,960 --> 00:02:40,900
Another improvement we could make is in add product,

29
00:02:40,950 --> 00:02:46,680
I'm always getting new access to title el and price el. Now since add product potentially runs more than

30
00:02:46,680 --> 00:02:47,070
once,

31
00:02:47,070 --> 00:02:54,390
we can also grab that because these elements will always be the same and turn them into module wide global

32
00:02:54,810 --> 00:03:01,440
constants which we can use in the entire module file here because these items will never change. Also

33
00:03:01,630 --> 00:03:03,490
when we select items here,

34
00:03:03,540 --> 00:03:05,970
we have a bit of a too complex selector,

35
00:03:06,000 --> 00:03:11,880
this will work but actually since every input here and in the end I'm reaching out to my inputs here

36
00:03:12,210 --> 00:03:19,350
has an ID, we have a title ID and we have a price ID, we can also just use document get element by

37
00:03:19,350 --> 00:03:26,070
ID instead of query selector because it turns out that document get element by ID is a bit faster

38
00:03:26,190 --> 00:03:28,140
than document query selector,

39
00:03:28,140 --> 00:03:32,900
so here let's call get element by ID in both places.

40
00:03:33,000 --> 00:03:35,840
Make sure to remove the hash symbol here, the hashtag,

41
00:03:35,940 --> 00:03:38,280
you don't need that when using get element by ID.

42
00:03:39,210 --> 00:03:44,680
So now down to add product, we now of course can still retrieve our values here,

43
00:03:44,820 --> 00:03:48,960
we can still do our validation, create a new product and add it so that's all fine

44
00:03:49,170 --> 00:03:51,980
but now we improve this a little bit as well.

45
00:03:52,860 --> 00:03:56,160
Now you should be careful with such optimisations though.