1
00:00:00,000 --> 00:00:02,320
Why did this tiny expression turn

2
00:00:02,320 --> 00:00:05,080
into several checks in my JavaScript?

3
00:00:05,260 --> 00:00:07,430
Your target chooses which

4
00:00:07,430 --> 00:00:10,240
JavaScript syntax the compiler keeps.

5
00:00:10,240 --> 00:00:13,470
With an older target, TypeScript replaces newer operators

6
00:00:13,470 --> 00:00:15,900
with older code that does the same job.

7
00:00:16,080 --> 00:00:19,560
Question mark dot is optional chaining.

8
00:00:19,560 --> 00:00:22,520
If getUser returns null or undefined,

9
00:00:22,520 --> 00:00:26,320
it skips reading name and produces undefined.

10
00:00:26,320 --> 00:00:28,840
Double question mark then supplies Guest.

11
00:00:29,020 --> 00:00:32,940
Do all those checks call getUser more than once?

12
00:00:33,120 --> 00:00:34,290
No.

13
00:00:34,290 --> 00:00:36,980
The compiler saves the result.

14
00:00:36,980 --> 00:00:40,440
This readable equivalent calls getUser once,

15
00:00:40,440 --> 00:00:43,720
checks that result, then checks the name.

16
00:00:43,720 --> 00:00:45,960
Null or undefined gets Guest.

17
00:00:46,140 --> 00:00:49,280
An empty string stays empty.

18
00:00:49,280 --> 00:00:53,560
Double question mark only replaces null or undefined.

19
00:00:53,560 --> 00:00:56,400
Double vertical bar would also replace

20
00:00:56,400 --> 00:00:58,220
empty strings, zero and false.

21
00:00:58,400 --> 00:01:00,670
Use a newer target when your

22
00:01:00,670 --> 00:01:02,720
supported browsers can run it.

23
00:01:02,720 --> 00:01:05,730
More generated text alone does not prove

24
00:01:05,730 --> 00:01:07,680
a larger final bundle or slower code.

25
00:01:07,860 --> 00:01:11,380
The question mark has more paperwork than I do.