1
00:00:01,080 --> 00:00:02,940
‫Let's now take a quick look

2
00:00:02,940 --> 00:00:06,303
‫at the very important optional chaining operator.

3
00:00:07,440 --> 00:00:09,030
‫So remember how I said earlier

4
00:00:09,030 --> 00:00:13,290
‫that each book has this review field and it has reviews

5
00:00:13,290 --> 00:00:15,210
‫from this Goodreads source

6
00:00:15,210 --> 00:00:17,580
‫and also from the libraryanything?

7
00:00:17,580 --> 00:00:21,150
‫And notice how each of them has a different reviews count.

8
00:00:21,150 --> 00:00:22,350
‫And so in this lecture

9
00:00:22,350 --> 00:00:25,020
‫we will want to create a function that gives us

10
00:00:25,020 --> 00:00:27,900
‫the total reviewsCount for each book.

11
00:00:27,900 --> 00:00:30,210
‫So that's going to be, basically, this one

12
00:00:30,210 --> 00:00:31,233
‫plus this one.

13
00:00:32,190 --> 00:00:34,590
‫Sounds very easy, right?

14
00:00:34,590 --> 00:00:36,420
‫And that's because it is.

15
00:00:36,420 --> 00:00:39,273
‫So let's quickly write a function that does that.

16
00:00:40,650 --> 00:00:44,950
‫So let's say getTotalReviewCount

17
00:00:50,730 --> 00:00:52,710
‫for a certain book.

18
00:00:52,710 --> 00:00:54,750
‫So we paste in a certain book.

19
00:00:54,750 --> 00:00:56,100
‫Let's just do that immediately,

20
00:00:56,100 --> 00:00:58,563
‫just so we see how we use this function.

21
00:01:01,110 --> 00:01:02,940
‫Then, of course our book,

22
00:01:02,940 --> 00:01:05,010
‫here it could be called anything else,

23
00:01:05,010 --> 00:01:06,630
‫just B for example.

24
00:01:06,630 --> 00:01:08,580
‫Because, of course, this is simply the value

25
00:01:08,580 --> 00:01:09,813
‫that we are pasting in.

26
00:01:12,450 --> 00:01:14,130
‫So let's create one variable

27
00:01:14,130 --> 00:01:17,468
‫for each of these review counts.

28
00:01:17,468 --> 00:01:22,468
‫So book, dot reviews, dot Goodreads,

29
00:01:24,660 --> 00:01:25,923
‫dot reviewsCount.

30
00:01:28,080 --> 00:01:30,530
‫And then the same thing for this libraryanything.

31
00:01:31,830 --> 00:01:35,897
‫Book dot reviews, dot libraryanything,

32
00:01:36,900 --> 00:01:38,473
‫dot reviewsCount

33
00:01:39,690 --> 00:01:42,510
‫and then we simply return one plus the other.

34
00:01:42,510 --> 00:01:45,297
‫So goodread should be Goodreads,

35
00:01:47,743 --> 00:01:50,973
‫plus this one.

36
00:01:51,990 --> 00:01:53,880
‫Okay, nice.

37
00:01:53,880 --> 00:01:54,713
‫Now we need to lock this

38
00:01:54,713 --> 00:01:59,347
‫to the console as always to get our result, which is 812.

39
00:02:01,620 --> 00:02:05,640
‫So that works beautifully for this book number two.

40
00:02:05,640 --> 00:02:08,943
‫But watch what happens when we use book number three.

41
00:02:11,790 --> 00:02:14,350
‫So let's wait for it

42
00:02:15,750 --> 00:02:19,230
‫and actually the error pops up already up here.

43
00:02:19,230 --> 00:02:21,810
‫And so then nothing else is evaluated.

44
00:02:21,810 --> 00:02:26,100
‫So cannot read properties of undefined reading review count.

45
00:02:26,100 --> 00:02:31,020
‫Well let's just take out all this code here

46
00:02:31,020 --> 00:02:33,720
‫and so then the error pops up down here.

47
00:02:33,720 --> 00:02:36,240
‫So again, cannot read properties of undefined,

48
00:02:36,240 --> 00:02:38,100
‫reading reviewsCount.

49
00:02:38,100 --> 00:02:40,830
‫So what this means is that this particular book,

50
00:02:40,830 --> 00:02:42,390
‫number three,

51
00:02:42,390 --> 00:02:44,097
‫here in the reviews doesn't have

52
00:02:44,097 --> 00:02:45,840
‫the libraryanything.

53
00:02:45,840 --> 00:02:48,210
‫So it only has Goodreads and therefore,

54
00:02:48,210 --> 00:02:50,910
‫this here will get undefined.

55
00:02:50,910 --> 00:02:53,250
‫And then we're trying to read reviewsCount

56
00:02:53,250 --> 00:02:54,570
‫out of undefined.

57
00:02:54,570 --> 00:02:57,060
‫And so that's, of course, then not possible.

58
00:02:57,060 --> 00:02:58,860
‫So again, the problem is

59
00:02:58,860 --> 00:03:01,830
‫that book dot reviews, dot libraryanything

60
00:03:01,830 --> 00:03:03,870
‫right now is undefined.

61
00:03:03,870 --> 00:03:05,250
‫So basically in JavaScript

62
00:03:05,250 --> 00:03:08,310
‫this part will then get replaced by undefined.

63
00:03:08,310 --> 00:03:09,840
‫And then essentially we are reading

64
00:03:09,840 --> 00:03:12,763
‫undefined dot reviewsCount

65
00:03:12,763 --> 00:03:14,550
‫which, of course, doesn't exist.

66
00:03:14,550 --> 00:03:17,850
‫And then it results in this error right here.

67
00:03:17,850 --> 00:03:20,910
‫But, fortunately for us, modern JavaScript has a solution

68
00:03:20,910 --> 00:03:24,030
‫for this, which is called optional chaining.

69
00:03:24,030 --> 00:03:25,650
‫And so with optional chaining

70
00:03:25,650 --> 00:03:30,510
‫we can basically ask JavaScript to only keep asking here

71
00:03:30,510 --> 00:03:32,490
‫for these next properties

72
00:03:32,490 --> 00:03:36,540
‫in case that what comes before it actually exists.

73
00:03:36,540 --> 00:03:40,470
‫So here, instead of trying to always read reviewsCount

74
00:03:40,470 --> 00:03:41,550
‫out of this,

75
00:03:41,550 --> 00:03:44,610
‫we can just do it optionally.

76
00:03:44,610 --> 00:03:47,850
‫Well not like this, but like this.

77
00:03:47,850 --> 00:03:52,850
‫So what happens now is that whenever this here is undefined,

78
00:03:53,700 --> 00:03:56,610
‫then JavaScript will no longer even try to

79
00:03:56,610 --> 00:03:59,040
‫read reviewsCount out of this.

80
00:03:59,040 --> 00:04:02,130
‫And so this is why we call this optional chaining.

81
00:04:02,130 --> 00:04:05,310
‫So the chain here only continues in case

82
00:04:05,310 --> 00:04:08,610
‫that this part here actually is not undefined

83
00:04:08,610 --> 00:04:09,693
‫or not null.

84
00:04:11,010 --> 00:04:13,590
‫So what happens now is that all

85
00:04:13,590 --> 00:04:16,080
‫of this thing here is immediately undefined

86
00:04:16,080 --> 00:04:19,020
‫and therefore here we get this not a number.

87
00:04:19,020 --> 00:04:20,610
‫So the result here is still wrong

88
00:04:20,610 --> 00:04:23,193
‫but at least we're not getting an error anymore.

89
00:04:24,240 --> 00:04:25,530
‫So right now it's not a number

90
00:04:25,530 --> 00:04:28,690
‫because this is some number and then we're adding undefined

91
00:04:30,510 --> 00:04:34,440
‫which we can confirm like this, right?

92
00:04:34,440 --> 00:04:37,140
‫And so yeah, we get another number.

93
00:04:37,140 --> 00:04:40,590
‫Therefore here we now need to set a default value.

94
00:04:40,590 --> 00:04:41,700
‫And this is why we learned

95
00:04:41,700 --> 00:04:44,340
‫about the knowledge coalescing operator

96
00:04:44,340 --> 00:04:47,553
‫because that one is actually perfect in this situation.

97
00:04:49,200 --> 00:04:52,200
‫So in this case, we simply say zero.

98
00:04:52,200 --> 00:04:54,210
‫So if there is nothing here,

99
00:04:54,210 --> 00:04:55,680
‫if there is no count

100
00:04:55,680 --> 00:04:58,560
‫for libraryanything, then it's just zero.

101
00:04:58,560 --> 00:05:01,620
‫So then we're just adding zero to the value that we have

102
00:05:01,620 --> 00:05:04,773
‫from Goodreads and then we get our final result.

103
00:05:05,610 --> 00:05:09,120
‫Okay. So again, what's happening here is that

104
00:05:09,120 --> 00:05:11,580
‫because of this optional chaining,

105
00:05:11,580 --> 00:05:15,150
‫JavaScript will no longer try to read reviewsCount

106
00:05:15,150 --> 00:05:18,030
‫out of this undefined thing here.

107
00:05:18,030 --> 00:05:20,790
‫So before we had undefined dot reviewsCount,

108
00:05:20,790 --> 00:05:23,730
‫which, of course, did not exist and gave us an error.

109
00:05:23,730 --> 00:05:26,760
‫But with optional chaining, as soon as this here

110
00:05:26,760 --> 00:05:29,400
‫is undefined, the entire thing,

111
00:05:29,400 --> 00:05:32,490
‫so all of this, will automatically become undefined.

112
00:05:32,490 --> 00:05:36,630
‫And so then we use this knowledge coalescing operator here

113
00:05:36,630 --> 00:05:39,420
‫to then simply give us zero instead of that undefined

114
00:05:39,420 --> 00:05:41,940
‫right here. Now, okay.

115
00:05:41,940 --> 00:05:42,840
‫So this is helpful

116
00:05:42,840 --> 00:05:46,650
‫whenever we are not sure that all the values that we expect

117
00:05:46,650 --> 00:05:48,840
‫exist in an object.

118
00:05:48,840 --> 00:05:52,980
‫So before we had this here, we would have to first check

119
00:05:52,980 --> 00:05:56,250
‫if actually books dot reviews, dot libraryanything exists.

120
00:05:56,250 --> 00:05:59,610
‫And only then we could read reviewsCount out of that

121
00:05:59,610 --> 00:06:01,680
‫which would really be a lot of work.

122
00:06:01,680 --> 00:06:04,180
‫Because for example, let's say we're also not sure

123
00:06:05,108 --> 00:06:08,130
‫if even reviews dot libraryanything exists.

124
00:06:08,130 --> 00:06:11,670
‫So it would be even safer to do this also here.

125
00:06:11,670 --> 00:06:13,770
‫And why not also here?

126
00:06:13,770 --> 00:06:16,290
‫Because there might be some situation where

127
00:06:16,290 --> 00:06:19,980
‫maybe the book has no Goodreads reviews.

128
00:06:19,980 --> 00:06:22,680
‫So let's simply do this always,

129
00:06:22,680 --> 00:06:26,280
‫at least always we are not sure about the data structure

130
00:06:26,280 --> 00:06:27,933
‫of the data we are receiving.