1
00:00:02,130 --> 00:00:04,620
So that's almost it for classes for now,

2
00:00:04,620 --> 00:00:07,480
obviously we'll see classes in many places throughout the course

3
00:00:07,510 --> 00:00:11,150
so there are plenty of other opportunities to practice with them.

4
00:00:11,160 --> 00:00:16,190
There is one additional, very new feature which I don't want to hide from you though. It's extremely new,

5
00:00:16,200 --> 00:00:19,840
browser support is pretty slim right now but will get better

6
00:00:19,950 --> 00:00:25,170
and since this is a future oriented course, you'll learn it right now already so that we can use it

7
00:00:25,440 --> 00:00:26,540
in the future

8
00:00:26,730 --> 00:00:29,550
and in Chrome thankfully, already today

9
00:00:29,700 --> 00:00:36,980
and that would be private fields, properties and methods, so that private term might not tell you much.

10
00:00:37,140 --> 00:00:43,350
Until now though I can tell you we only worked with public methods and public properties and fields

11
00:00:43,350 --> 00:00:47,700
but we can actually also work with private properties and fields and methods.

12
00:00:47,700 --> 00:00:54,300
Now the idea behind public properties and methods is that we can access them from outside of the class

13
00:00:54,300 --> 00:00:55,500
and object and

14
00:00:55,540 --> 00:00:59,020
that's what we did in some cases already.

15
00:00:59,100 --> 00:01:03,510
You typically want to make everything public which needs to be accessed from outside,

16
00:01:03,510 --> 00:01:08,460
so the things you worked with in your other code. An example would be if you have a product and there

17
00:01:08,460 --> 00:01:11,130
you have a buy method, which we don't have in our example

18
00:01:11,130 --> 00:01:16,740
but if you have another app and that should probably be triggered from outside the product object because

19
00:01:16,740 --> 00:01:22,890
the place where you work with your product object is probably the place where a user can buy it.

20
00:01:23,010 --> 00:01:29,580
You also on the other hand have some logic, some methods or some properties which you need inside of

21
00:01:29,580 --> 00:01:31,660
an object but not outside of it,

22
00:01:31,680 --> 00:01:37,590
so the things which you need to make your object work and which you don't really need to trigger or

23
00:01:37,590 --> 00:01:45,060
work with from outside, some hardcoded fallback values or some class specific logic.

24
00:01:45,170 --> 00:01:46,800
Now that's very abstract,

25
00:01:46,800 --> 00:01:53,040
here are some concrete examples in our code, for example products here in the product list.

26
00:01:53,040 --> 00:01:58,680
It's only used inside of that product lists class or in the object created based on the class and not

27
00:01:58,680 --> 00:02:05,610
from outside of it. The place where I create my product list here, I don't even store it in a constant

28
00:02:05,610 --> 00:02:08,010
or in a variable because I'm not interested in it,

29
00:02:08,280 --> 00:02:14,480
so I don't do const list and then set list products to something

30
00:02:14,580 --> 00:02:20,160
and actually I also don't want to allow it because if this would be possible and it is possible right

31
00:02:20,190 --> 00:02:27,570
now, then if another developer works in our project, he might think that setting products like this should

32
00:02:28,050 --> 00:02:30,510
be reflected here on our page

33
00:02:30,510 --> 00:02:35,670
but it turns out that setting it like this will only change the products stored in the object but will

34
00:02:35,670 --> 00:02:41,880
have no impact on the rendered HTML because in the product list, we have no setter on products that

35
00:02:41,880 --> 00:02:47,610
would trigger a UI update as we do it on the shopping cart, instead if you would set products from outside

36
00:02:47,610 --> 00:02:53,880
the class, nothing would happen. Fetch products is the only method inside of the class which actually

37
00:02:53,880 --> 00:02:55,290
changes something there

38
00:02:56,030 --> 00:03:00,670
and which then also updates the UI by calling render products.

39
00:03:00,710 --> 00:03:08,510
So I want to make sure that we can't even set the products variable or property to be precise from outside

40
00:03:08,630 --> 00:03:14,360
because it could lead to cases where you think you changed something but it's not reflected on the UI.

41
00:03:14,420 --> 00:03:20,600
That's a perfect use case for a private property, product should only be available from inside product

42
00:03:20,600 --> 00:03:25,990
list and we can achieve this in Javascript by adding a hash symbol in front of that.

43
00:03:26,030 --> 00:03:30,030
Now this is such a new feature that my IDE doesn't even support it,

44
00:03:30,140 --> 00:03:36,050
it will work though despite my IDE complaining though because normally indeed, that would be an invalid

45
00:03:36,080 --> 00:03:36,780
character,

46
00:03:36,830 --> 00:03:43,610
you can't add anything but dollar signs and underscores to your variable or property names. Well the

47
00:03:43,610 --> 00:03:50,420
hash symbol is a new exception with this specific meaning inside of a class or inside of an object

48
00:03:50,660 --> 00:03:55,580
where it then turns this or it sets this to a private property.

49
00:03:55,640 --> 00:03:58,720
You then also have to use the hash symbol when you access it,

50
00:03:58,730 --> 00:04:05,480
so here for example this hash products is set equal to that or then also here in render products,

51
00:04:05,510 --> 00:04:11,510
we refer to this hash products and also down there,

52
00:04:11,560 --> 00:04:17,700
this hash products and this hash products length and again you can ignore the errors for now

53
00:04:17,830 --> 00:04:25,830
and with that, we'll now have a situation where if I would store the list here and I would try to do

54
00:04:26,280 --> 00:04:34,710
console log list hash products, like this and I save that and I reload,

55
00:04:34,710 --> 00:04:39,150
I get an error that a private field must be declared in an enclosing class,

56
00:04:39,180 --> 00:04:41,460
so essentially I can't use it from outside.

57
00:04:42,270 --> 00:04:43,170
So this fails

58
00:04:43,170 --> 00:04:47,930
now, if we remove that code however, you'll see it now generally works

59
00:04:47,940 --> 00:04:53,690
but I get a different error and that error is related to our base class calling render in the end,

60
00:04:53,880 --> 00:04:58,460
that base class of course does not have hash products,

61
00:04:58,450 --> 00:05:01,760
instead only our subclass here has it

62
00:05:01,860 --> 00:05:07,830
and private properties are only available in that class where you define them, not in some base class

63
00:05:07,860 --> 00:05:13,560
or in some subclass and therefore here when I call the super constructor, I'll also set rendering to

64
00:05:13,560 --> 00:05:18,590
false and manually render and I'll just call this render here, important

65
00:05:18,600 --> 00:05:23,150
do that before you fetch the products because there, we'll then try to render the products

66
00:05:23,280 --> 00:05:25,160
so we need to render the list first

67
00:05:25,170 --> 00:05:30,480
and yes therefore of course refactoring that and making sure that render is part of the base class

68
00:05:30,510 --> 00:05:36,060
doesn't make much sense here because I override it in most cases anyways but it was a good practice

69
00:05:36,060 --> 00:05:38,310
and when we introduced it, it made sense,

70
00:05:38,310 --> 00:05:40,770
now however it of course doesn't make that much sense.

71
00:05:40,770 --> 00:05:46,110
I'll leave it there though for reference and use this approach where I tell the base class that it shouldn't

72
00:05:46,110 --> 00:05:46,930
call render,

73
00:05:47,040 --> 00:05:52,590
instead I call render myself and therefore I do that from inside the class where that is defined, so

74
00:05:52,590 --> 00:05:58,190
where hash products is defined and with that if we reload, this again works.

75
00:05:58,230 --> 00:06:04,110
Now again this shows you how you can add private properties, very new feature, will of course be supported

76
00:06:04,110 --> 00:06:09,420
by IDEs in the future as well and can also, even though it doesn't look like it here with all these

77
00:06:09,420 --> 00:06:16,180
errors but can also lead to clearer and cleaner code which makes your intentions clearer, where you can

78
00:06:16,180 --> 00:06:21,300
avoid that some fellow developer or maybe you in the future if you come back after a couple

79
00:06:21,300 --> 00:06:28,930
of months accidentally change code or change parts of objects or classes from outside of them

80
00:06:29,100 --> 00:06:35,420
as I showed you before when you should only work with them from inside the class, when you have a property

81
00:06:35,420 --> 00:06:40,850
that really only can be used from inside that class and therefore from inside the object that's built

82
00:06:40,850 --> 00:06:42,440
based on the class.

83
00:06:42,560 --> 00:06:47,820
Now you will also be able to have private methods in the future,

84
00:06:47,930 --> 00:06:55,390
for example fetch products is a method we only use from inside there, so we can also add a hash symbol

85
00:06:55,390 --> 00:06:58,380
in from that and call this hash fetch products

86
00:06:58,480 --> 00:07:05,340
but that's not even supported in Chrome yet as you can tell and therefore here I can't show this to

87
00:07:05,340 --> 00:07:06,420
you, in the future,

88
00:07:06,420 --> 00:07:08,150
this will be available as well.

89
00:07:08,250 --> 00:07:13,680
So it's also something following the same logic as with private properties, methods which should only

90
00:07:13,680 --> 00:07:18,660
be called from inside a class, from inside an object can be marked as private

91
00:07:18,780 --> 00:07:21,690
by adding this hash symbol in front of their name.