",[421],{"_32":181,"_181":422},"

The feature looks like an error suppression operator, right?

",[424],{"_32":181,"_181":406},[426,427,428],{"_32":181,"_181":435},{"_32":181,"_181":430,"_183":431},{"_32":181,"_181":429}," and compare “Total soak operations” with “Total soak operations chained on top of another soak”.","Usage statistics on optional chaining in CoffeeScript",[432],{"_32":186,"_187":433},{"_189":434},"https://github.com/tc39/proposal-optional-chaining/issues/17","See also ",[437],{"_32":181,"_181":438},"Deeply nested tree-like structures is not the sole use case of Optional Chaining.",[440],{"_32":181,"_181":419},[442],{"_32":181,"_181":443},"

...but, in the case of a deeply nested chain, we almost always want to test for null/undefined at each level, no?

",[445],{"_32":181,"_181":406},[447],{"_32":181,"_181":448},"By design, we want the developer to be able to mark each place that they expect to be null/undefined, and only those. Indeed, we believe that an unexpected null/undefined value, being a symptom of a probable bug, should be reported as a TypeError rather than swept under the rug.",[450],{"_32":181,"_181":419},[452],{"_32":181,"_181":453},"

In a deeply nested chain like a?.b?.c, why should I write ?. at each level? Should I not be able to write the operator only once for the whole chain?

",[455],{"_32":181,"_181":406},[457,458,459],{"_32":181,"_181":465},{"_32":181,"_181":461,"_183":462},{"_32":181,"_181":460}," operator has an effect only at the very moment it is evaluated. It does not change the semantics of subsequent property accesses, method or function calls.","?.",[463],{"_32":464},"code","In other words, the ",[467],{"_32":181,"_181":468},"The opportunity of short-circuiting happens only at one time, just after having evaluated the LHS of the Optional Chaining operator. If the result of that check is negative, evaluation proceeds normally.",[470,471,472,473,474],{"_32":181,"_181":483},{"_32":181,"_181":480,"_183":481},{"_32":181,"_181":479},{"_32":181,"_181":476,"_183":477},{"_32":181,"_181":475},".","a.b",[478],{"_32":464}," of ","\"c\"",[482],{"_32":464},"No. It will throw a TypeError when attempting to fetch the property ",[485],{"_32":181,"_181":419},[487],{"_32":181,"_181":488},"

In a?.b.c, if a.b is null, then a.b.c will evaluate to undefined, right?

",[490],{"_32":181,"_181":406},[492,493,494],{"_32":181,"_181":500},{"_32":181,"_181":495,"_183":496},{"_32":181,"_181":475},"Issue #3 (comment)",[497],{"_32":186,"_187":498},{"_189":499},"https://github.com/tc39/proposal-optional-chaining/issues/3#issuecomment-306791812","See ",[502],{"_32":181,"_181":419},[504],{"_32":181,"_181":505},"

Why do you want long short-circuiting?

",[507],{"_32":181,"_181":406},[509,510,511],{"_32":181,"_181":517},{"_32":181,"_181":512,"_183":513},{"_32":181,"_181":475},"not an error-suppression mechanism",[514],{"_32":186,"_187":515},{"_189":516},"#is-this-error-suppression","Finally, remember that optional chaining is ",[519,520,521,522,523,524,525],{"_32":181,"_181":537},{"_32":181,"_181":461,"_183":535},{"_32":181,"_181":534},{"_32":181,"_181":531,"_183":532},{"_32":181,"_181":530},{"_32":181,"_181":527,"_183":528},{"_32":181,"_181":526}," across the board.","foo == null",[529],{"_32":464},", we simply check ","typeof foo === 'function'",[533],{"_32":464}," has a consistent meaning in all cases. Instead of making calls a special case where we check ",[536],{"_32":464},"Moreover, this ensures that ",[539,540,541,542,543,544,545],{"_32":181,"_181":558},{"_32":181,"_181":555,"_183":556},{"_32":181,"_181":554},{"_32":181,"_181":551,"_183":552},{"_32":181,"_181":550},{"_32":181,"_181":547,"_183":548},{"_32":181,"_181":546}," achieve.","onChange?.()",[549],{"_32":464}," instead of a function, the library will likely want to throw and inform the user of their mistaken usage. This is exactly what the proposed semantics for ","3",[553],{"_32":464},", just when the user has provided it. If the user provides the number ","onChange",[557],{"_32":464},"Imagine a library which will call a handler function, e.g. ",[560],{"_32":181,"_181":419},[562],{"_32":181,"_181":563},"

Why does foo?.() throw when foo is neither nullish nor callable?

",[565],{"_32":181,"_181":406},[567,568,569,570,571],{"_32":181,"_181":580},{"_32":181,"_181":577,"_183":578},{"_32":181,"_181":576},{"_32":181,"_181":573,"_183":574},{"_32":181,"_181":572}," is undefined.","(null)?.b",[575],{"_32":464}," is considered to have no properties; therefore, ","null",[579],{"_32":464},"In particular, the value ",[582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,597,598],{"_32":181,"_181":627},{"_32":181,"_181":476,"_183":625},{"_32":181,"_181":624},{"_32":181,"_181":621,"_183":622},{"_32":181,"_181":620},{"_32":181,"_181":607,"_183":618},{"_32":181,"_181":617},{"_32":181,"_181":611,"_183":615},{"_32":181,"_181":614},{"_32":181,"_181":611,"_183":612},{"_32":181,"_181":610},{"_32":181,"_181":607,"_183":608},{"_32":181,"_181":606},{"_32":181,"_181":603,"_183":604},{"_32":181,"_181":602},{"_32":181,"_181":599,"_183":600},{"_32":181,"_181":475},"a?.b === undefined",[601],{"_32":464}," and ","a.b === undefined",[605],{"_32":464},", this is reflected by ","a",[609],{"_32":464}," is absent from ","\"b\"",[613],{"_32":464}," of that object. If a property ",[616],{"_32":464},", but only to give information about the property ",[619],{"_32":464}," is intended to preserve arbitrary information on the base object ","a?.b",[623],{"_32":464}," nor ",[626],{"_32":464},"Neither ",[629],{"_32":181,"_181":419},[631],{"_32":181,"_181":632},"

Why does (null)?.b evaluate to undefined rather than null?

",[634],{"_32":181,"_181":406},[636,637,638,639,640,641,642,643,644],{"_32":181,"_181":665},{"_32":181,"_181":652,"_183":662},{"_32":181,"_181":651},{"_32":181,"_181":657,"_183":658},{"_32":181,"_181":656},{"_32":181,"_181":652,"_183":653},{"_32":181,"_181":651},{"_32":181,"_181":646,"_183":647},{"_32":181,"_181":645}," for those that had impact on semantics.","with label “alternative syntax and semantics”",[648],{"_32":186,"_187":649},{"_189":650},"https://github.com/tc39/proposal-optional-chaining/issues?utf8=%E2%9C%93&q=label%3A%22alternative+syntax+and+semantics%22"," ","issues",[654],{"_32":186,"_187":655},{"_189":650},", as well as ","with label “alternative syntax”",[659],{"_32":186,"_187":660},{"_189":661},"https://github.com/tc39/proposal-optional-chaining/issues?utf8=%E2%9C%93&q=label%3A%22alternative+syntax%22",[663],{"_32":186,"_187":664},{"_189":661},"Various alternative syntaxes has been explored and extensively discussed in the past. None of them gained consensus. Search for ",[667],{"_32":181,"_181":419},[669],{"_32":181,"_181":670},"

Ok, but I really think that is better.

",[672],{"_32":181,"_181":406},[674],{"_32":181,"_181":675},"As for , it has different syntactical constraints than JavaScript because of .",[677,678],{"_32":175,"_26":700},{"_32":175,"_26":679},[680],{"_32":178,"_26":681},[682,683,684,685,686,687,688],{"_32":181,"_181":699},{"_32":181,"_181":461,"_183":697},{"_32":181,"_181":696},{"_32":181,"_181":693,"_183":694},{"_32":181,"_181":692},{"_32":181,"_181":689,"_183":690},{"_32":181,"_181":475},"func?.(arg)",[691],{"_32":464},", ","obj?.[expr]",[695],{"_32":464}," sequence of characters to other cases: ",[698],{"_32":464},"extend the use of the recognisable ",[701],{"_32":178,"_26":702},[703,704,705],{"_32":181,"_181":710},{"_32":181,"_181":707,"_183":708},{"_32":181,"_181":706}," case, which is expected to occur most often;","obj?.prop",[709],{"_32":464},"pick the best syntax for the ",[712],{"_32":181,"_181":713},"Alternative syntaxes for those two cases each have their own flaws; and deciding which one looks the least bad is mostly a question of personal taste. Here is how we made our choice:",[715,716,717,718,719,720,721,722,723],{"_32":181,"_181":737},{"_32":181,"_181":734,"_183":735},{"_32":181,"_181":602},{"_32":181,"_181":731,"_183":732},{"_32":181,"_181":730},{"_32":181,"_181":727,"_183":728},{"_32":181,"_181":602},{"_32":181,"_181":724,"_183":725},{"_32":181,"_181":475},"func?(x - 2) + 3 :1",[726],{"_32":464},"obj?[expr].filter(fun):0",[729],{"_32":464}," syntax, because of the difficulty for the parser to efficiently distinguish those forms from the conditional operator, e.g., ","func?(arg)",[733],{"_32":464},"obj?[expr]",[736],{"_32":464},"We don’t use the ",[739],{"_32":181,"_181":419},[741],{"_32":181,"_181":742},"

obj?.[expr] and func?.(arg) look ugly. Why not use obj?[expr] and func?(arg) as does ?

",[744],{"_32":181,"_181":745},"

",{"_211":212},[748],{"_32":181,"_181":749},"FAQ","blockquote",[752],{"_32":178,"_26":753},[754],{"_32":181,"_181":755},"This one isn't baked into the proposal yet, simply because private fields themselves aren't baked yet. So we don't want to hold up this proposal if that one happens to stall out. Once that one has reached Stage 4, we will address it then.",[757,758,759,760,761,762,763,764,765,766,767,768,769,770],{"_32":181,"_181":800,"_183":801},{"_32":181,"_181":799},{"_32":181,"_181":794,"_183":795},{"_32":181,"_181":602},{"_32":181,"_181":789,"_183":790},{"_32":181,"_181":788},{"_32":181,"_181":785,"_183":786},{"_32":181,"_181":692},{"_32":181,"_181":782,"_183":783},{"_32":181,"_181":781},{"_32":181,"_181":778,"_183":779},{"_32":181,"_181":777},{"_32":181,"_181":772,"_183":773},{"_32":181,"_181":771},":","microsoft/TypeScript#30167 (comment)",[774],{"_32":186,"_187":775},{"_189":776},"https://github.com/microsoft/TypeScript/issues/30167#issuecomment-468881537","? Quoting ","a?.b.#c",[780],{"_32":464}," or ","a?.#b()",[784],{"_32":464},"a?.#b",[787],{"_32":464},", as in ","private methods",[791],{"_32":186,"_187":792},{"_189":793},"https://github.com/tc39/proposal-private-methods","class fields",[796],{"_32":186,"_187":797},{"_189":798},"https://github.com/tc39/proposal-class-fields",": Should optional chains support the upcoming private ","Issue #28",[802],{"_32":186,"_187":803},{"_189":804},"https://github.com/tc39/proposal-optional-chaining/issues/28",{"_211":809},[807],{"_32":181,"_181":808},"Private class fields and methods",3,{"_211":212},[812],{"_32":181,"_181":813},"Open issues",[815,816],{"_32":175,"_26":829},{"_32":175,"_26":817},[818],{"_32":178,"_26":819},[820,821,822],{"_32":181,"_181":828},{"_32":181,"_181":823,"_183":824},{"_32":181,"_181":475},"Issue #74",[825],{"_32":186,"_187":826},{"_189":827},"//github.com/tc39/proposal-optional-chaining/issues/74","optional destructuring, see ",[830],{"_32":178,"_26":831},[832,833,834],{"_32":181,"_181":841},{"_32":181,"_181":836,"_183":837},{"_32":181,"_181":835},";","Issue #55",[838],{"_32":186,"_187":839},{"_189":840},"//github.com/tc39/proposal-optional-chaining/issues/55","optional spread, see ",[843],{"_32":181,"_181":844},"There has been various interesting ideas for applying the idea of “optional” to other constructs. However, there are not part of this proposal. For example:",{"_211":212},[847],{"_32":181,"_181":848},"Out of scope","inlineQuestion",{"_851":852,"_853":854,"_855":856,"_857":858,"_859":860},"question-id","5d58d9b5-b1d3-43b0-8013-bd345d098d4e","question-text","We don't support optional construction (`new a?.()`). Has the absence of that form blocked a real use case for you?","question-type","multiple_choice","question-config","{\"options\":[{\"id\":\"0\",\"label\":\"Yes — I have a concrete use case that needs it\"},{\"id\":\"1\",\"label\":\"No — I've never needed optional construction\"},{\"id\":\"2\",\"label\":\"I didn't know it was unsupported\"},{\"id\":\"3\",\"label\":\"Unsure\"}]}","question-description","",[862],{"_32":181,"_181":863},"All the above cases will be forbidden by the grammar or by static semantics so that support might be added later.",[865,866],{"_32":175,"_26":883},{"_32":175,"_26":867},[868],{"_32":178,"_26":869},[870,871,872,873,874],{"_32":181,"_181":882},{"_32":181,"_181":879,"_183":880},{"_32":181,"_181":692},{"_32":181,"_181":876,"_183":877},{"_32":181,"_181":875},", etc.","import?.('foo')",[878],{"_32":464},"new?.target",[881],{"_32":464},"anything that resembles to property access or function call, but is not: ",[884],{"_32":178,"_26":885},[886,887,888,889],{"_32":181,"_181":896},{"_32":181,"_181":893,"_183":894},{"_32":181,"_181":692},{"_32":181,"_181":890,"_183":891},"super?.foo",[892],{"_32":464},"super?.()",[895],{"_32":464},"optional super: ",[898,899,900],{"_32":181,"_181":906},{"_32":181,"_181":901,"_183":902},{"_32":181,"_181":771},"Issue #4 (comment)",[903],{"_32":186,"_187":904},{"_189":905},"https://github.com/tc39/proposal-optional-chaining/issues/4#issuecomment-373446728","The following are not supported, as it does not make much sense, at least in practice; see ",[908],{"_32":175,"_26":909},[910],{"_32":178,"_26":911},[912,913],{"_32":181,"_181":917},{"_32":181,"_181":914,"_183":915},"a?.b = c",[916],{"_32":464},"optional property assignment: ",[919,920,921],{"_32":181,"_181":928},{"_32":181,"_181":923,"_183":924},{"_32":181,"_181":922}," for discussion:","Issue #18",[925],{"_32":186,"_187":926},{"_189":927},"//github.com/tc39/proposal-optional-chaining/issues/18","The following is not supported, although it has some use cases; see ",[930,931,932],{"_32":175,"_26":956},{"_32":175,"_26":947},{"_32":175,"_26":933},[934],{"_32":178,"_26":935},[936,937,938,939],{"_32":181,"_181":946},{"_32":181,"_181":943,"_183":944},{"_32":181,"_181":692},{"_32":181,"_181":940,"_183":941},"a?.b`string` ",[942],{"_32":464},"new a?.b()",[945],{"_32":464},"constructor or template literals in/after an Optional Chain: ",[948],{"_32":178,"_26":949},[950,951],{"_32":181,"_181":955},{"_32":181,"_181":952,"_183":953},"a?.`string` ",[954],{"_32":464},"optional template literal: ",[957],{"_32":178,"_26":958},[959,960],{"_32":181,"_181":964},{"_32":181,"_181":961,"_183":962},"new a?.()",[963],{"_32":464},"optional construction: ",[966,967,968,969,970],{"_32":181,"_181":981},{"_32":181,"_181":976,"_183":977},{"_32":181,"_181":602},{"_32":181,"_181":971,"_183":972},{"_32":181,"_181":922},"Issue #54",[973],{"_32":186,"_187":974},{"_189":975},"https://github.com/tc39/proposal-optional-chaining/issues/54","Issue # 22",[978],{"_32":186,"_187":979},{"_189":980},"https://github.com/tc39/proposal-optional-chaining/issues/22","Although they could be included for completeness, the following are not supported due to lack of real-world use cases or other compelling reasons; see ",{"_211":212},[984],{"_32":181,"_181":985},"Not supported",[987,988,989,990],{"_32":175,"_26":1043},{"_32":175,"_26":1027},{"_32":175,"_26":1012},{"_32":175,"_26":991},[992],{"_32":178,"_26":993},[994,995,996,997,998,999],{"_32":181,"_181":1008,"_183":1009},{"_32":181,"_181":1007},{"_32":181,"_181":1002,"_183":1003},{"_32":181,"_181":1001},{"_32":181,"_181":651},{"_32":181,"_181":1000},"",").","example from Babel",[1004],{"_32":186,"_187":1005},{"_189":1006},"https://github.com/babel/babel/blob/28ae47a174f67a8ae6f4527e0a66e88896814170/packages/babel-helper-builder-react-jsx/src/index.js#L66-L69",". Although they are not common, they do exist in practice (","existence of use cases",[1010],{"_32":1011},"bold",[1013],{"_32":178,"_26":1014},[1015,1016,1017,1018],{"_32":181,"_181":1024,"_183":1025},{"_32":181,"_181":1023},{"_32":181,"_181":1020,"_183":1021},{"_32":181,"_181":1019},"). The only error conditions (early or not) are in strict mode, when attempting to delete something that is barred from deletion (nonconfigurable property, variable, ...). Supporting optional deletion fits well in that model, while forbidding it does not.","delete foo()",[1022],{"_32":464},". It is a fact of life that this operator is very liberal in what it accepts, even pretending to succeed when it is given something that does not make sense (e.g., ","consistency of the delete operator",[1026],{"_32":1011},[1028],{"_32":178,"_26":1029},[1030,1031,1032,1033],{"_32":181,"_181":1040,"_183":1041},{"_32":181,"_181":1039},{"_32":181,"_181":1035,"_183":1036},{"_32":181,"_181":1034}," support. The supported semantics of optional deletion is the only one that could be expected (provided that the semantics of the delete operator is correctly understood, of course). It is not like it could in some manner confuse the programmer. In fact, the only real reason is: “We didn’t intend to support it.”","removing",[1037],{"_32":1038},"italic"," for ","lack of strong reason",[1042],{"_32":1011},[1044,1045,1046],{"_32":178,"_26":1079},{"_32":178,"_26":1056},{"_32":178,"_26":1047},[1048,1049,1050],{"_32":181,"_181":1055},{"_32":181,"_181":1052,"_183":1053},{"_32":181,"_181":1051}," support for optional deletion?”","remove",[1054],{"_32":1038},"Thus, per the laziness principle, the right question is not: “Are there good reasons to support optional deletion?”, but rather: “Are there good reasons to ",[1057,1058,1059,1060,1061,1062,1063],{"_32":181,"_181":1078},{"_32":181,"_181":1075,"_183":1076},{"_32":181,"_181":1074},{"_32":181,"_181":1071,"_183":1072},{"_32":181,"_181":1070},{"_32":181,"_181":1065,"_183":1066},{"_32":181,"_181":1064}," for technical details.)","PR #73 (comment)",[1067],{"_32":186,"_187":1068},{"_189":1069},"https://github.com/tc39/proposal-optional-chaining/pull/73#issuecomment-442762076"," it (by making the construct an early syntax error) requires some nontrivial effort. (See ","not supporting",[1073],{"_32":1038}," optional deletion requires literally zero effort, while ","supporting",[1077],{"_32":1038},"Now, it happens that ",[1080,1081],{"_32":181,"_181":1083,"_183":1084},{"_32":181,"_181":1082}," (this argument is placed first, not because it is the most important, but because it puts the other ones in the right perspective). Laziness (together with impatience and hubris) is one of the most important virtues of the spec writer. That is, all other things being almost equal, take the solution that involves less stuff to be incorporated in the spec.","laziness",[1085],{"_32":1011},[1087],{"_32":181,"_181":1088},"

Why do we support optional deletion?

",[1090,1091,1092],{"_32":181,"_181":1097},{"_32":181,"_181":1094,"_183":1095},{"_32":181,"_181":1093}," is the usual result of attempting to delete a non-Reference.","true",[1096],{"_32":464},"where ",{"_412":413},[1100],{"_32":181,"_181":1101},"delete a?.b\na == null ? true : delete a.b",[1103,1104,1105],{"_32":181,"_181":1110},{"_32":181,"_181":1107,"_183":1108},{"_32":181,"_181":1106}," operator is very liberal in what it accepts, we have that feature for free:","delete",[1109],{"_32":464},"Because the ",{"_211":809},[1113],{"_32":181,"_181":1114},"Optional deletion",{"_851":1116,"_853":1117,"_855":1118,"_857":1119,"_859":860},"628fb5c9-d483-4965-a79d-ea21fb127e77","Parentheses break short-circuiting: `(a?.b).c` throws if `a` is null. Have you encountered this footgun in real code?","short_text","{\"options\":[]}",[1121],{"_32":181,"_181":1122},"Note that, whatever the semantics are, there is no practical reason to use parentheses in that position anyway.",[1124,1125,1126,1127,1128,1129,1130,1131,1132],{"_32":181,"_181":1150},{"_32":181,"_181":1147,"_183":1148},{"_32":181,"_181":1146},{"_32":181,"_181":1143,"_183":1144},{"_32":181,"_181":1142},{"_32":181,"_181":1138,"_183":1139},{"_32":181,"_181":1137},{"_32":181,"_181":1134,"_183":1135},{"_32":181,"_181":1133}," is not destructuring assignment, but an attempt to assign a value to an object literal.","({x}) = y",[1136],{"_32":464},"). In general, syntax cannot be arbitrarily split by parentheses: for example, ","earlier version of this proposal",[1140],{"_32":186,"_187":1141},{"_189":283}," instruction) or an adhoc Reference (like an ","break",[1145],{"_32":464}," operator), rather than propagation of a Completion (like the ","&&",[1149],{"_32":464},"That follows from the design choice of specifying the scope of short-circuiting by syntax (like the ",{"_412":413},[1153],{"_32":181,"_181":1154},"(a?.b).c\n(a == null ? undefined : a.b).c",[1156],{"_32":181,"_181":1157},"Parentheses limit the scope of short-circuiting:",{"_211":809},[1160],{"_32":181,"_181":1161},"Edge case: grouping",{"_412":413},[1164],{"_32":181,"_181":1165},"a?.b[3].c?.(x).d\na == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d\n // (as always, except that `a` and `a.b[3].c` are evaluated only once)",[1167],{"_32":181,"_181":1168},"An Optional Chain may be followed by another Optional Chain.",[1170,1171,1172],{"_32":181,"_181":1177},{"_32":181,"_181":1174,"_183":1175},{"_32":181,"_181":1173}," an Optional Chaining operator followed by a chain of property accesses, method or function calls.","Optional Chain",[1176],{"_32":1038},"Let’s call ",{"_211":809},[1180],{"_32":181,"_181":1181},"Stacking",{"_851":1183,"_853":1184,"_855":856,"_857":1185,"_859":860},"82eaa1fb-6b58-42c4-ad97-c68a67ac65e1","We short-circuit the entire trailing chain on null/undefined (`a?.b.c.d` skips `.c.d`). Has that ever caused a bug or surprise in your codebase?","{\"options\":[{\"id\":\"0\",\"label\":\"Yes — it caused a real bug or surprised someone on my team\"},{\"id\":\"1\",\"label\":\"No — but the semantics weren't obvious at first\"},{\"id\":\"2\",\"label\":\"No — behavior was immediately intuitive\"},{\"id\":\"3\",\"label\":\"Haven't used optional chaining enough to know\"}]}",[1187,1188,1189],{"_32":181,"_181":1195},{"_32":181,"_181":1190,"_183":1191},{"_32":181,"_181":475},"Prior Art",[1192],{"_32":186,"_187":1193},{"_189":1194},"https://github.com/tc39/proposal-optional-chaining#prior-art","This feature is implemented by, e.g., C# and CoffeeScript; see ",[1197,1198,1199,1200,1201,1202,1203,1204,1205,1206,1207],{"_32":181,"_181":1221},{"_32":181,"_181":607,"_183":1219},{"_32":181,"_181":1218},{"_32":181,"_181":607,"_183":1216},{"_32":181,"_181":1215},{"_32":181,"_181":476,"_183":1213},{"_32":181,"_181":1212},{"_32":181,"_181":480,"_183":1210},{"_32":181,"_181":479},{"_32":181,"_181":476,"_183":1208},{"_32":181,"_181":475},[1209],{"_32":464},[1211],{"_32":464}," is null, a TypeError will be thrown when attempting to access the property ",[1214],{"_32":464}," is not null, but ",[1217],{"_32":464}," only. If, for example, ",[1220],{"_32":464},"Note that the check for nullity is made on ",{"_412":413},[1224],{"_32":181,"_181":1225},"a?.b.c(++x).d // if `a` is null/undefined, evaluates to undefined. Variable `x` is not incremented.\n // otherwise, evaluates to `a.b.c(++x).d`.\na == null ? undefined : a.b.c(++x).d",[1227],{"_32":181,"_181":1228},"In fact, short-circuiting, when triggered, skips not only the current property access, method or function call, but also the whole chain of property accesses, method or function calls directly following the Optional Chaining operator.",{"_211":809},[1231],{"_32":181,"_181":1232},"Long short-circuiting",{"_412":413},[1235],{"_32":181,"_181":1236},"a?.[++x] // `x` is incremented if and only if `a` is not null/undefined\na == null ? undefined : a[++x]",[1238,1239,1240,1241,1242],{"_32":181,"_181":1249},{"_32":181,"_181":461,"_183":1247},{"_32":181,"_181":1246},{"_32":181,"_181":1243,"_183":1244},{"_32":181,"_181":475},"short-circuiting",[1245],{"_32":1038}," evaluates to null/undefined, the RHS is not evaluated. This concept is called ",[1248],{"_32":464},"If the expression on the LHS of ",{"_211":809},[1252],{"_32":181,"_181":1253},"Short-circuiting",{"_851":1255,"_853":1256,"_855":856,"_857":1257,"_859":860},"75042f2a-2428-4b08-8677-68cb85710ed4","We return `undefined` (never `null`) when the chain short-circuits. Does that break any null-vs-undefined distinction you rely on today?","{\"options\":[{\"id\":\"0\",\"label\":\"Yes — we rely on the null/undefined distinction and this breaks something\"},{\"id\":\"1\",\"label\":\"No — we use ?? or default values anyway, so undefined is fine\"},{\"id\":\"2\",\"label\":\"No — we treat null and undefined interchangeably\"},{\"id\":\"3\",\"label\":\"Unsure — would need to audit our codebase\"}]}",{"_412":413},[1260],{"_32":181,"_181":1261},"a?.b // undefined if `a` is null/undefined, `a.b` otherwise.\na == null ? undefined : a.b\n\na?.[x] // undefined if `a` is null/undefined, `a[x]` otherwise.\na == null ? undefined : a[x]\n\na?.b() // undefined if `a` is null/undefined\na == null ? undefined : a.b() // throws a TypeError if `a.b` is not a function\n // otherwise, evaluates to `a.b()`\n\na?.() // undefined if `a` is null/undefined\na == null ? undefined : a() // throws a TypeError if `a` is neither null/undefined, nor a function\n // invokes the function `a` otherwise",[1263,1264,1265],{"_32":181,"_181":1270},{"_32":181,"_181":1267,"_183":1268},{"_32":181,"_181":1266}," should behave as an object.)","document.all",[1269],{"_32":464},"Here are basic examples, each one followed by its desugaring. (The desugaring is not exact in the sense that the LHS should be evaluated only once and that ",[1272,1273,1274],{"_32":181,"_181":1278},{"_32":181,"_181":461,"_183":1276},{"_32":181,"_181":1275}," operator evaluates to undefined or null, the expression evaluates to undefined. Otherwise the targeted property access, method or function call is triggered normally.",[1277],{"_32":464},"If the operand at the left-hand side of the ",{"_211":809},[1281],{"_32":181,"_181":1282},"Base case",{"_211":212},[1285],{"_32":181,"_181":1286},"Semantics",[1288],{"_32":175,"_26":1289},[1290],{"_32":178,"_26":1291},[1292,1293,1294,1295,1296,1297,1298,1299,1300],{"_32":181,"_181":1315},{"_32":181,"_181":1312,"_183":1313},{"_32":181,"_181":1311},{"_32":181,"_181":1308,"_183":1309},{"_32":181,"_181":1307},{"_32":181,"_181":461,"_183":1305},{"_32":181,"_181":1304},{"_32":181,"_181":461,"_183":1302},{"_32":181,"_181":1301}," token must not be immediately followed by a decimal digit).",[1303],{"_32":464}," is not interpreted as a single token in that situation (the ",[1306],{"_32":464}," (as required for backward compatibility), a simple lookahead is added at the level of the lexical grammar, so that the sequence of characters ","foo ? .3 : 0",[1310],{"_32":464}," to be parsed as ","foo?.3:0",[1314],{"_32":464},"In order to allow ",{"_211":809},[1318],{"_32":181,"_181":1319},"Notes",{"_412":1324},[1322],{"_32":181,"_181":1323},"obj?.prop // optional static property access\nobj?.[expr] // optional dynamic property access\nfunc?.(...args) // optional function or method call","javascript",[1326,1327,1328],{"_32":181,"_181":1332},{"_32":181,"_181":461,"_183":1330},{"_32":181,"_181":1329},". It may appear in three positions:",[1331],{"_32":464},"The Optional Chaining operator is spelled ",{"_211":212},[1335],{"_32":181,"_181":1336},"Syntax",[1338,1339],{"_32":175,"_26":1353},{"_32":175,"_26":1340},[1341],{"_32":178,"_26":1342},[1343,1344,1345],{"_32":181,"_181":1352},{"_32":181,"_181":1347,"_183":1348},{"_32":181,"_181":1346}," (link to archived documentation for Angular v10)","Safe navigation operator",[1349],{"_32":186,"_187":1350},{"_189":1351},"https://v10.angular.io/guide/template-expression-operators#the-safe-navigation-operator----and-null-property-paths","Angular: ",[1354],{"_32":178,"_26":1355},[1356,1357],{"_32":181,"_181":1362},{"_32":181,"_181":1347,"_183":1358},[1359],{"_32":186,"_187":1360},{"_189":1361},"http://groovy-lang.org/operators.html#_safe_navigation_operator","Groovy: ",[1364],{"_32":181,"_181":1365},"The following languages have a similar feature. We haven’t checked whether they have significant differences in semantics with this proposal:",[1367,1368,1369],{"_32":175,"_26":1399},{"_32":175,"_26":1386},{"_32":175,"_26":1370},[1371],{"_32":178,"_26":1372},[1373,1374,1375,1376],{"_32":181,"_181":1385},{"_32":181,"_181":1347,"_183":1381},{"_32":181,"_181":1380},{"_32":181,"_181":1377,"_183":1378},"a&.b",[1379],{"_32":464}," — Spelled as: ",[1382],{"_32":186,"_187":1383},{"_189":1384},"https://ruby-doc.org/core-2.6/doc/syntax/calling_methods_rdoc.html#label-Safe+navigation+operator","Ruby: ",[1387],{"_32":178,"_26":1388},[1389,1390,1391],{"_32":181,"_181":1398},{"_32":181,"_181":1393,"_183":1394},{"_32":181,"_181":1392}," — optional property access.","Conditional member access",[1395],{"_32":186,"_187":1396},{"_189":1397},"https://dart.dev/guides/language/language-tour#other-operators","Dart: ",[1400],{"_32":178,"_26":1401},[1402,1403,1404],{"_32":181,"_181":1411},{"_32":181,"_181":1406,"_183":1407},{"_32":181,"_181":1405}," — optional property access for read; optional property assignment for write.","Safe calls",[1408],{"_32":186,"_187":1409},{"_189":1410},"https://kotlinlang.org/docs/reference/null-safety.html#safe-calls","Kotlin: ",[1413],{"_32":181,"_181":1414},"The following languages have a similar feature, but do not short-circuit the whole chain when it is longer than one element. This is justified by the fact that, in those languages, methods or properties might be legitimately used on null (e.g., null.toString() == \"null\" in Dart):",[1416,1417,1418],{"_32":175,"_26":1451},{"_32":175,"_26":1438},{"_32":175,"_26":1419},[1420],{"_32":178,"_26":1421},[1422,1423,1424,1425,1426],{"_32":181,"_181":1437},{"_32":181,"_181":1432,"_183":1433},{"_32":181,"_181":1431},{"_32":181,"_181":1428,"_183":1429},{"_32":181,"_181":1427},"). Also applies to assignment and deletion.","new a?()",[1430],{"_32":464}," — existential operator variant for property accessor, function call, object construction (","Existential operator",[1434],{"_32":186,"_187":1435},{"_189":1436},"http://coffeescript.org/#existential-operator","CoffeeScript: ",[1439],{"_32":178,"_26":1440},[1441,1442,1443],{"_32":181,"_181":1450},{"_32":181,"_181":1445,"_183":1446},{"_32":181,"_181":1444}," — optional property, method, or subscript call, in read and write access.","Optional Chaining",[1447],{"_32":186,"_187":1448},{"_189":1449},"https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/OptionalChaining.html#//apple_ref/doc/uid/TP40014097-CH21-ID245","Swift: ",[1452],{"_32":178,"_26":1453},[1454,1455,1456],{"_32":181,"_181":1463},{"_32":181,"_181":1458,"_183":1459},{"_32":181,"_181":1457}," — null-conditional member access or index, in read access.","Null-conditional operator",[1460],{"_32":186,"_187":1461},{"_189":1462},"https://msdn.microsoft.com/en-us/library/dn986595.aspx","C#: ",[1465],{"_32":181,"_181":1466},"The following languages implement the operator with the same general semantics as this proposal (i.e., 1) guarding against a null base value, and 2) short-circuiting application to the whole chain):",[1468,1469,1470,1471,1472,1473,1474,1475,1476],{"_32":181,"_181":1489},{"_32":181,"_181":621,"_183":1487},{"_32":181,"_181":692},{"_32":181,"_181":1484,"_183":1485},{"_32":181,"_181":692},{"_32":181,"_181":1481,"_183":1482},{"_32":181,"_181":781},{"_32":181,"_181":1478,"_183":1479},{"_32":181,"_181":1477}," when applicable).","a?(b)",[1480],{"_32":464},"a?[b]",[1483],{"_32":464},"a?.b()",[1486],{"_32":464},[1488],{"_32":464},"Unless otherwise noted, in the following languages, the syntax consists of a question mark prepending the operator, (",{"_211":212},[1492],{"_32":181,"_181":1190},{"_851":1494,"_853":1495,"_855":1118,"_857":1119,"_859":860},"f6942dee-aebf-4206-b0e2-bbea9a50b6b1","We rely on `?.` with `??` as the idiomatic fallback pattern. What do you actually use today when a deep property is missing and you need a non-undefined default?",{"_412":413},[1498],{"_32":181,"_181":1499},"if (myForm.checkValidity?.() === false) { // skip the test in older web browsers\n // form validation fails\n return;\n}",[1501],{"_32":181,"_181":1502},"or with methods not universally implemented:",{"_412":413},[1505],{"_32":181,"_181":1506},"iterator.return?.() // manually close an iterator",[1508],{"_32":181,"_181":1509},"The call variant of Optional Chaining is useful for dealing with interfaces that have optional methods:",{"_412":1324},[1512],{"_32":181,"_181":1513},"// falls back to a default value when response.settings is missing or nullish\n// (response.settings == null) or when response.settings.animationDuration is missing\n// or nullish (response.settings.animationDuration == null)\nconst animationDuration = response.settings?.animationDuration ?? 300;\n",[1515,1516,1517,1518,1519],{"_32":181,"_181":1529},{"_32":181,"_181":1526,"_183":1527},{"_32":181,"_181":1525},{"_32":181,"_181":1520,"_183":1521},{"_32":181,"_181":771},"Nullish coalescing operator",[1522],{"_32":186,"_187":1523},{"_189":1524},"//github.com/tc39/proposal-nullish-coalescing"," is desired for the missing case, this can usually be handled with the ","undefined",[1528],{"_32":464},"When some other value than ",{"_412":1324},[1532],{"_32":181,"_181":1533},"var street = user.address?.street\nvar fooValue = myForm.querySelector('input[name=foo]')?.value",[1535],{"_32":181,"_181":1536},"The Optional Chaining Operator allows a developer to handle many of those cases without repeating themselves and/or assigning intermediate results in temporary variables:",{"_412":1324},[1539],{"_32":181,"_181":1540},"var fooInput = myForm.querySelector('input[name=foo]')\nvar fooValue = fooInput ? fooInput.value : undefined",[1542],{"_32":181,"_181":1543},"Also, many API return either an object or null/undefined, and one may want to extract a property from the result only when it is not null:",{"_412":1324},[1546],{"_32":181,"_181":1547},"var street = user.address && user.address.street;",[1549],{"_32":181,"_181":1550},"When looking for a property value that's deep in a tree-like structure, one often has to check whether intermediate nodes exist:",{"_211":212},[1553],{"_32":181,"_181":1554},"Overview and motivation","clerkState",{"_1557":1558},"__internal_clerk_state",{"_1559":1560,"_1561":1562,"_1563":860,"_1564":860,"_1565":1566,"_1567":1568,"_1569":1570,"_1571":-7,"_1572":1573,"_1574":-7,"_1575":-7,"_1576":1577,"_1578":-7,"_1579":-7,"_1580":-7,"_1581":-7,"_1582":-7,"_1583":1566,"_1584":1566,"_1585":1566},"__clerk_ssr_state",{"_1595":1596,"_1597":-5,"_1598":-5,"_1599":-5,"_1600":-5,"_1601":-5,"_1602":-5,"_1603":-5,"_1604":-5,"_1605":-5,"_1606":-5,"_1607":1608,"_1609":1610,"_1611":1612,"_1587":1566},"__publishableKey","pk_live_Y2xlcmsudXNlaW5rbGluZy5jb20k","__proxyUrl","__domain","__isSatellite",false,"__signInUrl","/sign-in","__signUpUrl","/sign-up","__signInForceRedirectUrl","__signUpForceRedirectUrl","/onboarding","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_1586":1566,"_1587":1566,"_1588":860,"_1589":1590,"_1591":860,"_1592":1562,"_1593":1566,"_1594":860},"__clerkJSUrl","__clerkJSVersion","__clerkUIUrl","__clerkUIVersion","__prefetchUI","__telemetryDisabled","__telemetryDebug","__unsafeDisableDevelopmentModeConsoleWarning","isSignedIn","isAuthenticated","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","tokenType","session_token","sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","getToken",["SingleFetchFallback"],"has",["SingleFetchFallback"],"debug",["SingleFetchFallback"]]

Optional Chaining for JavaScript