1
00:00:00,210 --> 00:00:01,590
- Now the next thing I wanna talk about

2
00:00:01,590 --> 00:00:04,140
is going to be kind of similar to Enums

3
00:00:04,140 --> 00:00:05,130
and as const,

4
00:00:05,130 --> 00:00:06,960
but this is the idea of tupels.

5
00:00:06,960 --> 00:00:09,540
And tupels is just
taking an array of values

6
00:00:09,540 --> 00:00:11,130
but saying that this array of values

7
00:00:11,130 --> 00:00:14,250
is going to be specifically
the first value is one type,

8
00:00:14,250 --> 00:00:15,570
the second value is another type,

9
00:00:15,570 --> 00:00:17,370
third value is another type and so on.

10
00:00:17,370 --> 00:00:19,410
So instead of just saying,
"I have an array of numbers"

11
00:00:19,410 --> 00:00:21,720
I say, "I have an array where
the first index is a number

12
00:00:21,720 --> 00:00:22,770
the second is a string,

13
00:00:22,770 --> 00:00:23,640
the third is a number

14
00:00:23,640 --> 00:00:25,110
and so on and so on."

15
00:00:25,110 --> 00:00:26,820
The perfect example of this being used

16
00:00:26,820 --> 00:00:28,440
in actual JavaScript code

17
00:00:28,440 --> 00:00:30,720
is the object.entries method.

18
00:00:30,720 --> 00:00:33,930
This method right here actually
returns to you a tuple.

19
00:00:33,930 --> 00:00:36,300
And a tuple is just saying
that it's returning an array

20
00:00:36,300 --> 00:00:37,800
because when you call object entries,

21
00:00:37,800 --> 00:00:39,060
it gives you an array.

22
00:00:39,060 --> 00:00:41,460
And this array is actually
an array of arrays

23
00:00:41,460 --> 00:00:43,440
where each individual element array

24
00:00:43,440 --> 00:00:46,080
has the first value being
the key of the object,

25
00:00:46,080 --> 00:00:47,190
so it's going to be a string,

26
00:00:47,190 --> 00:00:49,530
and the second value is
the value of that key.

27
00:00:49,530 --> 00:00:51,990
So in our case, it'll be
either a string or a number.

28
00:00:51,990 --> 00:00:52,920
And if we hover over our key,

29
00:00:52,920 --> 00:00:55,287
you can see it has a type here of string

30
00:00:55,287 --> 00:00:56,580
and we hover over our value,

31
00:00:56,580 --> 00:00:58,830
you can see it has a
type of string or number.

32
00:00:58,830 --> 00:00:59,940
That's just because we have strings

33
00:00:59,940 --> 00:01:01,620
or numbers as our values.

34
00:01:01,620 --> 00:01:03,420
Now, the way we would
define this ourselves

35
00:01:03,420 --> 00:01:05,070
is relatively straightforward.

36
00:01:05,070 --> 00:01:06,660
So let's just come in here.

37
00:01:06,660 --> 00:01:08,340
I'm gonna create a type here.

38
00:01:08,340 --> 00:01:10,800
And this type is just
gonna be called tuple.

39
00:01:10,800 --> 00:01:12,120
And we don't even need
this to be an object.

40
00:01:12,120 --> 00:01:13,770
Instead, I'm gonna use an array here

41
00:01:13,770 --> 00:01:15,060
and what whatever I
wanna put in this array

42
00:01:15,060 --> 00:01:16,020
is going to be the first value.

43
00:01:16,020 --> 00:01:17,130
So let's say the very first value,

44
00:01:17,130 --> 00:01:18,090
I want to have a string.

45
00:01:18,090 --> 00:01:19,440
And the second value in my array,

46
00:01:19,440 --> 00:01:20,940
I want to be a Boolean.

47
00:01:20,940 --> 00:01:22,530
This is a tuple with two values.

48
00:01:22,530 --> 00:01:24,780
The first is a string,
the second is a Boolean.

49
00:01:24,780 --> 00:01:26,250
So now if I create a variable

50
00:01:26,250 --> 00:01:28,350
and I set it to that tuple type,

51
00:01:28,350 --> 00:01:29,280
what I need to make sure I do

52
00:01:29,280 --> 00:01:30,870
is that the first value of my array

53
00:01:30,870 --> 00:01:31,950
must be a string

54
00:01:31,950 --> 00:01:33,990
and the second value must be a Boolean.

55
00:01:33,990 --> 00:01:35,970
And I can't have any other
values on top of that.

56
00:01:35,970 --> 00:01:37,020
If I add more values,

57
00:01:37,020 --> 00:01:38,010
you can see it gives me an error,

58
00:01:38,010 --> 00:01:38,843
'cause this expects there

59
00:01:38,843 --> 00:01:40,950
to be only two elements not three.

60
00:01:40,950 --> 00:01:43,290
Or if I, for example,
change this to a number

61
00:01:43,290 --> 00:01:45,000
I'm now going to get an error as well.

62
00:01:45,000 --> 00:01:46,320
Right here, this is a number.

63
00:01:46,320 --> 00:01:47,690
It should be a Boolean.

64
00:01:47,690 --> 00:01:50,010
So this is where tupels
are really easy to define,

65
00:01:50,010 --> 00:01:50,850
'cause you essentially just create

66
00:01:50,850 --> 00:01:53,280
a hard coded array of different types.

67
00:01:53,280 --> 00:01:54,750
And then when you define your tuple,

68
00:01:54,750 --> 00:01:56,250
you just need to make
sure you create the array

69
00:01:56,250 --> 00:01:58,560
and follow the actual type definition.

70
00:01:58,560 --> 00:02:00,420
This is useful in a lot
of different places.

71
00:02:00,420 --> 00:02:02,310
If you've ever used react before

72
00:02:02,310 --> 00:02:03,810
the use state hook, for example,

73
00:02:03,810 --> 00:02:06,450
returns a tuple where the
first value is your state

74
00:02:06,450 --> 00:02:08,070
and the second value is the updater

75
00:02:08,070 --> 00:02:09,300
for your state function.

76
00:02:09,300 --> 00:02:11,580
Also, object entries is
another great example

77
00:02:11,580 --> 00:02:12,900
of our tuple is being returned.

78
00:02:12,900 --> 00:02:14,970
And it may seem like a fairly niche thing,

79
00:02:14,970 --> 00:02:16,080
but there's a lot of different places

80
00:02:16,080 --> 00:02:17,670
where you need to either return an array

81
00:02:17,670 --> 00:02:19,410
or use an array in a specific way

82
00:02:19,410 --> 00:02:21,060
where you know the value of each key.

83
00:02:21,060 --> 00:02:23,223
And this is a perfect
use case for a tuple.