1
00:00:00,843 --> 00:00:03,218
We are back in Visual Studio Code. Let's

2
00:00:03,218 --> 00:00:06,243
take a look at the app on the right. In

3
00:00:06,243 --> 00:00:09,170
there, you can see some check boxes. Loan

4
00:00:09,170 --> 00:00:11,206
applicants use them to indicate if they

5
00:00:11,206 --> 00:00:14,091
are employed or not and if they have other

6
00:00:14,091 --> 00:00:16,617
loans or credit cards. We use that

7
00:00:16,617 --> 00:00:17,923
information in their risk assessment.

8
00:00:17,923 --> 00:00:20,460
People without employment and an existing

9
00:00:20,460 --> 00:00:23,011
loan, for instance, are a high risk to

10
00:00:23,011 --> 00:00:26,095
loan money to. I store this information in

11
00:00:26,095 --> 00:00:29,166
an array called factors. And here, in this

12
00:00:29,166 --> 00:00:31,690
function, I take that array, and I

13
00:00:31,690 --> 00:00:34,142
deconstruct it into several variables that

14
00:00:34,142 --> 00:00:36,614
I use to create a loan application object

15
00:00:36,614 --> 00:00:39,493
with. This syntax is all right, but when I

16
00:00:39,493 --> 00:00:41,620
have a lot more of these values, this will

17
00:00:41,620 --> 00:00:44,529
get very messy and hard to read and

18
00:00:44,529 --> 00:00:46,655
maintain. It is also error prone because I

19
00:00:46,655 --> 00:00:49,113
need to manually make sure that I type in

20
00:00:49,113 --> 00:00:51,476
the right index of the array. We can

21
00:00:51,476 --> 00:00:53,898
change this for the better using the

22
00:00:53,898 --> 00:00:57,085
destructuring syntax. It goes like this. I

23
00:00:57,085 --> 00:00:58,853
declare something that looks like an array

24
00:00:58,853 --> 00:01:00,873
with the names of variables that I want

25
00:01:00,873 --> 00:01:03,339
that comes from the Factors array. These

26
00:01:03,339 --> 00:01:05,893
variables aren't actually in an array

27
00:01:05,893 --> 00:01:09,117
because they are on the left side of the

28
00:01:09,117 --> 00:01:11,669
equals sign. That's it. Now I can remove

29
00:01:11,669 --> 00:01:14,535
what I have here. Let's see if it still

30
00:01:14,535 --> 00:01:17,893
works. Reload it, and load an application.

31
00:01:17,893 --> 00:01:20,788
Yeah, the check boxes are still loaded, so

32
00:01:20,788 --> 00:01:23,384
it still works. This deconstructs the

33
00:01:23,384 --> 00:01:26,174
array into four distinct variables. To

34
00:01:26,174 --> 00:01:28,612
make this more readable, I can put all of

35
00:01:28,612 --> 00:01:31,429
these on a new line without breaking

36
00:01:31,429 --> 00:01:34,587
anything. Let's test that. Reload it, and

37
00:01:34,587 --> 00:01:38,340
yep, it still works. And I can even put a

38
00:01:38,340 --> 00:01:40,843
trailing comma here without breaking it.

39
00:01:40,843 --> 00:01:44,159
Nice. So what would happen if I removed

40
00:01:44,159 --> 00:01:47,324
one of these variables? The array now has

41
00:01:47,324 --> 00:01:49,863
more values than I assigned to variables.

42
00:01:49,863 --> 00:01:53,833
Let's see. Load one, and it still works.

43
00:01:53,833 --> 00:01:56,358
You don't have to use all of the values in

44
00:01:56,358 --> 00:01:58,890
the array. You can pick and choose which

45
00:01:58,890 --> 00:02:00,913
ones to deconstruct. This works the other

46
00:02:00,913 --> 00:02:03,718
way around as well. If I would have more

47
00:02:03,718 --> 00:02:06,296
variables than values in the array, the

48
00:02:06,296 --> 00:02:08,833
variables would be filled with undefined,

49
00:02:08,833 --> 00:02:11,383
but it would still work. And we can even

50
00:02:11,383 --> 00:02:14,469
do something like this, three dots and a

51
00:02:14,469 --> 00:02:17,419
name. The moreArgs variable is now an

52
00:02:17,419 --> 00:02:19,654
array that catches whatever is left in the

53
00:02:19,654 --> 00:02:22,148
array. This could, for instance, be 10

54
00:02:22,148 --> 00:02:24,590
more values. This is useful when you don't

55
00:02:24,590 --> 00:02:27,322
know the exact length of the array. And

56
00:02:27,322 --> 00:02:30,514
finally, I can also put default values in

57
00:02:30,514 --> 00:02:33,080
here. So if there isn't a value in the

58
00:02:33,080 --> 00:02:37,045
array for this, then hasKids gets assigned

59
00:02:37,045 --> 00:02:39,575
true. All right, that is array

60
00:02:39,575 --> 00:02:42,275
deconstruction. We can also deconstruct

61
00:02:42,275 --> 00:02:44,757
objects. I'll do that with the

62
00:02:44,757 --> 00:02:47,251
LoanApplication class here. It has all

63
00:02:47,251 --> 00:02:50,420
sorts of properties, like ID and applicant

64
00:02:50,420 --> 00:02:53,455
name. Let's see how that works. I don't

65
00:02:53,455 --> 00:02:55,562
really need to deconstruct objects in my

66
00:02:55,562 --> 00:02:58,212
app, but I'll just demonstrate how to do

67
00:02:58,212 --> 00:03:01,420
it here. It works very similar to array

68
00:03:01,420 --> 00:03:03,551
deconstruction, only it starts with curly

69
00:03:03,551 --> 00:03:06,413
braces, and in there I can assign the

70
00:03:06,413 --> 00:03:08,986
parameters of the object to new variable

71
00:03:08,986 --> 00:03:11,898
names, like the Id value will be stored in

72
00:03:11,898 --> 00:03:14,236
a variable called a, and the ApplicantName

73
00:03:14,236 --> 00:03:18,190
value will be in variable b. And that's

74
00:03:18,190 --> 00:03:21,238
it. And also, here I can put everything on

75
00:03:21,238 --> 00:03:24,140
a new line for readability, like this. And

76
00:03:24,140 --> 00:03:26,358
I don't have to assign values to new

77
00:03:26,358 --> 00:03:28,544
variable names. I can just do it like

78
00:03:28,544 --> 00:03:30,890
this, which results in variables with the

79
00:03:30,890 --> 00:03:33,687
names Id and ApplicantName that I can use

80
00:03:33,687 --> 00:03:36,393
in the rest of my function. Also, I can

81
00:03:36,393 --> 00:03:40,239
use default values, just like with array

82
00:03:40,239 --> 00:03:42,264
deconstruction. All right, that's it. As

83
00:03:42,264 --> 00:03:44,492
you can see, using the destructuring

84
00:03:44,492 --> 00:03:46,890
syntax improves readability and makes

85
00:03:46,890 --> 00:03:52,000
deconstructing values into variables less error prone.

