[{"data":1,"prerenderedAt":282},["ShallowReactive",2],{"i-lucide:sun-moon":3,"i-lucide:menu":8,"post-\u002Fblog\u002F2023-09-01-optional-chaining-in-javascript":10,"surround-\u002Fblog\u002F2023-09-01-optional-chaining-in-javascript":265,"i-lucide:arrow-left":276,"i-lucide:sparkles":278,"i-lucide:user":280},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 2v2m2.837 12.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715M16 12a4 4 0 0 0-4-4m7-3l-1.256 1.256M20 12h2\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"id":11,"title":12,"authors":13,"body":16,"date":253,"description":22,"extension":254,"meta":255,"navigation":111,"path":258,"seo":259,"stem":260,"tags":261,"toc":111,"__hash__":264},"blog\u002Fblog\u002F2023-09-01-optional-chaining-in-javascript.md","Optional Chaining in JavaScript",[14,15],"gpt","pfarmer",{"type":17,"value":18,"toc":247},"minimark",[19,23,28,31,34,59,73,77,80,83,168,171,187,201,205,208,212,215,237,240,243],[20,21,22],"p",{},"Optional chaining is a feature introduced in ECMAScript 2020 that allows for accessing properties on an object without having to explicitly check if the object is null or undefined first. This results in less code and improves readability. Let's take a look at what optional chaining is and how to use it.",[24,25,27],"h2",{"id":26},"what-is-optional-chaining","What is Optional Chaining?",[20,29,30],{},"Optional chaining allows you to access properties on an object only if that object is not null or undefined. If the object is null or undefined, instead of throwing an error, the expression short circuits and returns undefined.",[20,32,33],{},"Here is the syntax:",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-js shiki shiki-themes github-light github-dark-default","obj?.prop\nobj?.[expr] \n","js","",[42,43,44,53],"code",{"__ignoreMap":40},[45,46,49],"span",{"class":47,"line":48},"line",1,[45,50,52],{"class":51},"szmH1","obj?.prop\n",[45,54,56],{"class":47,"line":55},2,[45,57,58],{"class":51},"obj?.[expr]\n",[20,60,61,62,65,66,68,69,72],{},"This checks if ",[42,63,64],{},"obj"," exists before accessing the property. If ",[42,67,64],{}," is nullish (null or undefined), ",[42,70,71],{},"obj.prop"," will evaluate to undefined instead of throwing an error.",[24,74,76],{"id":75},"why-use-optional-chaining","Why Use Optional Chaining?",[20,78,79],{},"Optional chaining improves checking for nullish values when accessing nested properties.",[20,81,82],{},"Without optional chaining, you have to explicitly check if the object exists before accessing nested properties:",[35,84,86],{"className":37,"code":85,"language":39,"meta":40,"style":40},"let result = null;\n\nif (obj != null) {\n  if (obj.child != null) {\n    result = obj.child.name;  \n  }\n}\n",[42,87,88,107,113,130,145,156,162],{"__ignoreMap":40},[45,89,90,94,97,100,104],{"class":47,"line":48},[45,91,93],{"class":92},"sDgYj","let",[45,95,96],{"class":51}," result ",[45,98,99],{"class":92},"=",[45,101,103],{"class":102},"sPgVT"," null",[45,105,106],{"class":51},";\n",[45,108,109],{"class":47,"line":55},[45,110,112],{"emptyLinePlaceholder":111},true,"\n",[45,114,116,119,122,125,127],{"class":47,"line":115},3,[45,117,118],{"class":92},"if",[45,120,121],{"class":51}," (obj ",[45,123,124],{"class":92},"!=",[45,126,103],{"class":102},[45,128,129],{"class":51},") {\n",[45,131,133,136,139,141,143],{"class":47,"line":132},4,[45,134,135],{"class":92},"  if",[45,137,138],{"class":51}," (obj.child ",[45,140,124],{"class":92},[45,142,103],{"class":102},[45,144,129],{"class":51},[45,146,148,151,153],{"class":47,"line":147},5,[45,149,150],{"class":51},"    result ",[45,152,99],{"class":92},[45,154,155],{"class":51}," obj.child.name;  \n",[45,157,159],{"class":47,"line":158},6,[45,160,161],{"class":51},"  }\n",[45,163,165],{"class":47,"line":164},7,[45,166,167],{"class":51},"}\n",[20,169,170],{},"With optional chaining, this becomes:",[35,172,174],{"className":37,"code":173,"language":39,"meta":40,"style":40},"let result = obj?.child?.name;\n",[42,175,176],{"__ignoreMap":40},[45,177,178,180,182,184],{"class":47,"line":48},[45,179,93],{"class":92},[45,181,96],{"class":51},[45,183,99],{"class":92},[45,185,186],{"class":51}," obj?.child?.name;\n",[20,188,189,190,192,193,196,197,200],{},"The code is much cleaner! If ",[42,191,64],{}," or ",[42,194,195],{},"child"," are nullish, ",[42,198,199],{},"result"," will simply be undefined instead of an error being thrown.",[24,202,204],{"id":203},"browser-support","Browser Support",[20,206,207],{},"Optional chaining has good browser support but is not yet supported in Internet Explorer. It can be used in production if IE support is not needed.",[24,209,211],{"id":210},"use-cases","Use Cases",[20,213,214],{},"Optional chaining is useful whenever you need to access properties of an object that might be nullish. Some examples:",[216,217,218,225,231],"ul",{},[219,220,221,222],"li",{},"Accessing nested properties: ",[42,223,224],{},"user?.address?.city",[219,226,227,228],{},"Calling functions that may not exist: ",[42,229,230],{},"obj.callback?.()",[219,232,233,234],{},"Accessing arrays that may be undefined: ",[42,235,236],{},"arr?.[0]",[20,238,239],{},"It avoids having to check each reference for null\u002Fundefined before accessing properties.",[20,241,242],{},"Optional chaining is a great feature to clean up code that accesses nested properties. It avoids verbose null checks and makes code more readable. Support is decent in modern browsers.",[244,245,246],"style",{},"html pre.shiki code .szmH1, html code.shiki .szmH1{--shiki-default:#24292E;--shiki-dark:#E6EDF3}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sDgYj, html code.shiki .sDgYj{--shiki-default:#D73A49;--shiki-dark:#FF7B72}html pre.shiki code .sPgVT, html code.shiki .sPgVT{--shiki-default:#005CC5;--shiki-dark:#79C0FF}",{"title":40,"searchDepth":55,"depth":55,"links":248},[249,250,251,252],{"id":26,"depth":55,"text":27},{"id":75,"depth":55,"text":76},{"id":203,"depth":55,"text":204},{"id":210,"depth":55,"text":211},"2023-09-01","md",{"type":256,"layout":257},"post","blog_page","\u002Fblog\u002F2023-09-01-optional-chaining-in-javascript",{"title":12,"description":22},"blog\u002F2023-09-01-optional-chaining-in-javascript",[262,263],"programming","javascript","3nve6ZEnP39RYJdK5i02s1c8h1DzMcwDOaZ0i4QNcEo",[266,271],{"title":267,"path":268,"stem":269,"date":270,"children":-1},"Solving FizzBuzz in Python and JavaScript","\u002Fblog\u002F2023-08-14-fizzbuzzin-py-and-js","blog\u002F2023-08-14-fizzbuzzin-py-and-js","2023-08-14",{"title":272,"path":273,"stem":274,"date":275,"children":-1},"Setting up an encrypted disk image on Debian 12 with Cryptsetup","\u002Fblog\u002F2023-09-10-encrypting-disk-image","blog\u002F2023-09-10-encrypting-disk-image","2023-09-10",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":277},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":279},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4\"\u002F>\u003Ccircle cx=\"4\" cy=\"20\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":281},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\u002F>\u003Ccircle cx=\"12\" cy=\"7\" r=\"4\"\u002F>\u003C\u002Fg>",1783616165652]