1
00:00:01,050 --> 00:00:03,330
‫So, in React, we need to define values

2
00:00:03,330 --> 00:00:06,450
‫based on a condition all the time, and many times

3
00:00:06,450 --> 00:00:10,320
‫in situations where we cannot use an if else statement.

4
00:00:10,320 --> 00:00:12,060
‫And so let's now learn how to use

5
00:00:12,060 --> 00:00:14,133
‫the ternary operator instead.

6
00:00:15,750 --> 00:00:18,930
‫So in JavaScript, the ternary operator is a very

7
00:00:18,930 --> 00:00:22,590
‫special type of operator that has three operands.

8
00:00:22,590 --> 00:00:27,450
‫So three parts that are needed for this operator to work.

9
00:00:27,450 --> 00:00:31,023
‫So let's work here on the pages value again.

10
00:00:32,010 --> 00:00:34,710
‫And so the first part of the ternary operator

11
00:00:34,710 --> 00:00:36,330
‫is a condition.

12
00:00:36,330 --> 00:00:41,330
‫So let's say pages greater 1,000.

13
00:00:41,520 --> 00:00:44,070
‫So this is a condition, and if this is true,

14
00:00:44,070 --> 00:00:47,040
‫the result of this operator will be whatever

15
00:00:47,040 --> 00:00:49,740
‫is after this question mark.

16
00:00:49,740 --> 00:00:53,317
‫So let's define a string here and let's say over 1,000.

17
00:00:56,670 --> 00:00:57,930
‫Then let's add this colon.

18
00:00:57,930 --> 00:01:00,960
‫And for now, I will just write another string here,

19
00:01:00,960 --> 00:01:03,780
‫and then I will explain what's happening.

20
00:01:03,780 --> 00:01:07,530
‫So less than 1,000.

21
00:01:07,530 --> 00:01:11,340
‫So again, the ternary operator has three parts.

22
00:01:11,340 --> 00:01:13,650
‫The first part is this condition here.

23
00:01:13,650 --> 00:01:18,650
‫The second part is this second operand, which is the result

24
00:01:18,990 --> 00:01:22,860
‫of the operation in case that the condition is true.

25
00:01:22,860 --> 00:01:25,650
‫And in case that the condition is actually false,

26
00:01:25,650 --> 00:01:27,750
‫then the results of this operator

27
00:01:27,750 --> 00:01:30,843
‫will be this third part of the operator.

28
00:01:32,850 --> 00:01:35,160
‫And in case that is confusing, just remember

29
00:01:35,160 --> 00:01:37,980
‫that an operator is a bit similar to a function.

30
00:01:37,980 --> 00:01:39,900
‫So it always returns some value.

31
00:01:39,900 --> 00:01:42,270
‫So for example, if we have two plus two,

32
00:01:42,270 --> 00:01:44,880
‫then the operator here is the two

33
00:01:44,880 --> 00:01:47,853
‫and it will result basically this four.

34
00:01:49,012 --> 00:01:51,120
‫And this operator here,

35
00:01:51,120 --> 00:01:55,530
‫so the ternary operator again will return this value here

36
00:01:55,530 --> 00:01:58,080
‫in case that the first operand is true.

37
00:01:58,080 --> 00:01:59,790
‫So this condition is true.

38
00:01:59,790 --> 00:02:01,080
‫And if it's false,

39
00:02:01,080 --> 00:02:05,670
‫then this part here will be the result of the operator.

40
00:02:05,670 --> 00:02:07,933
‫And then we can, as always,

41
00:02:07,933 --> 00:02:09,633
‫store that result into a variable.

42
00:02:12,293 --> 00:02:15,093
‫So let's just call this the pages range.

43
00:02:18,300 --> 00:02:20,100
‫Let's log that here.

44
00:02:20,100 --> 00:02:24,930
‫And so our pages are currently 1,210,

45
00:02:24,930 --> 00:02:27,330
‫which is, of course, more than 1,000.

46
00:02:27,330 --> 00:02:32,040
‫And so then here, we get that pages rage is over 1,000.

47
00:02:32,040 --> 00:02:36,330
‫And if we had another book, so if here a book was

48
00:02:36,330 --> 00:02:41,330
‫get book ID two, well then our book still has 1,210 pages

49
00:02:42,360 --> 00:02:45,960
‫because we are actually manipulating that value here.

50
00:02:45,960 --> 00:02:47,040
‫Remember?

51
00:02:47,040 --> 00:02:48,750
‫But let's take that out.

52
00:02:48,750 --> 00:02:52,980
‫And then our book only has 295 pages, which will then

53
00:02:52,980 --> 00:02:56,460
‫result here in the string of less than 1,000.

54
00:02:56,460 --> 00:02:58,680
‫And so then we can use this here,

55
00:02:58,680 --> 00:03:00,810
‫for example, to create another string.

56
00:03:00,810 --> 00:03:02,313
‫Let's log that to the console.

57
00:03:03,360 --> 00:03:05,643
‫And again, using a template literal,

58
00:03:07,440 --> 00:03:12,090
‫the book has pages.

59
00:03:12,090 --> 00:03:15,720
‫Range page.

60
00:03:15,720 --> 00:03:19,173
‫And so now we get the book has less than 1,000 pages.

61
00:03:20,010 --> 00:03:21,483
‫Let's put this one here back,

62
00:03:22,834 --> 00:03:25,200
‫and go also back to book number one.

63
00:03:25,200 --> 00:03:28,533
‫And then we get the book has over 1,000 pages.

64
00:03:29,730 --> 00:03:30,750
‫Great.

65
00:03:30,750 --> 00:03:33,960
‫So that's what we use the ternary operator for.

66
00:03:33,960 --> 00:03:36,960
‫So to define a variable conditionally.

67
00:03:36,960 --> 00:03:39,060
‫And let's just quickly do that here again,

68
00:03:39,060 --> 00:03:40,920
‫right here in the summary string,

69
00:03:40,920 --> 00:03:42,870
‫just so I can show you that we can really

70
00:03:42,870 --> 00:03:46,230
‫use any JavaScript that returns a value

71
00:03:46,230 --> 00:03:47,763
‫here in one of these blocks.

72
00:03:50,520 --> 00:03:55,520
‫So the book has, here will be our JavaScript block.

73
00:03:57,390 --> 00:03:59,163
‫And then let me just write the end.

74
00:04:01,273 --> 00:04:05,610
‫Been adapted as a movie.

75
00:04:05,610 --> 00:04:10,020
‫And so here, basically, if the has movie adaptation is true,

76
00:04:10,020 --> 00:04:13,560
‫then we want to return nothing.

77
00:04:13,560 --> 00:04:15,903
‫And if it's false, we want to return not.

78
00:04:17,520 --> 00:04:20,160
‫That makes more sense if we write it out.

79
00:04:20,160 --> 00:04:23,790
‫So has movie adaptation, which we can again use

80
00:04:23,790 --> 00:04:26,670
‫because we already took it out of the object

81
00:04:26,670 --> 00:04:28,863
‫up here in this destructuring.

82
00:04:30,870 --> 00:04:35,383
‫So if has movie adaptation, then return nothing.

83
00:04:38,130 --> 00:04:40,773
‫And if not, then return the string not.

84
00:04:41,715 --> 00:04:45,483
‫And well, that's a bit hard to see there.

85
00:04:48,300 --> 00:04:50,640
‫So the book has been adapted as a movie,

86
00:04:50,640 --> 00:04:53,133
‫which makes sense because this here is true.

87
00:04:54,840 --> 00:04:59,610
‫But once again, if we change this to number two here,

88
00:04:59,610 --> 00:05:02,790
‫then the book, or yeah, then the book is different.

89
00:05:02,790 --> 00:05:04,140
‫It has no movie.

90
00:05:04,140 --> 00:05:06,273
‫And so then our string should say,

91
00:05:07,170 --> 00:05:10,260
‫the book has not been adapted as a movie.

92
00:05:10,260 --> 00:05:11,093
‫Great.

93
00:05:12,120 --> 00:05:15,420
‫So with this, we used a conditional right here

94
00:05:15,420 --> 00:05:17,130
‫inside the template literal.

95
00:05:17,130 --> 00:05:18,810
‫And it would not have been possible

96
00:05:18,810 --> 00:05:21,660
‫to use an if else statement here instead,

97
00:05:21,660 --> 00:05:24,330
‫because an if else statement is,

98
00:05:24,330 --> 00:05:27,390
‫well as the name says, it's a statement,

99
00:05:27,390 --> 00:05:29,640
‫so it does not return a value.

100
00:05:29,640 --> 00:05:32,070
‫So it would've been impossible to use that here.

101
00:05:32,070 --> 00:05:35,550
‫And so then the ternary operator is exactly the way to go.

102
00:05:35,550 --> 00:05:37,905
‫And as I said in the beginning,

103
00:05:37,905 --> 00:05:39,720
‫we do this all the time in React.

104
00:05:39,720 --> 00:05:41,820
‫And so this is one of these things

105
00:05:41,820 --> 00:05:43,380
‫that is really important to know

106
00:05:43,380 --> 00:05:46,353
‫before starting to write React applications.