{"id":321852,"date":"2020-09-24T11:47:44","date_gmt":"2020-09-24T18:47:44","guid":{"rendered":"https:\/\/css-tricks.com\/?p=321852"},"modified":"2020-09-24T11:47:45","modified_gmt":"2020-09-24T18:47:45","slug":"web-technologies-and-syntax","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/web-technologies-and-syntax\/","title":{"rendered":"Web Technologies and Syntax"},"content":{"rendered":"\n

JavaScript has a (newish) feature called optional chaining<\/a>. Say I have code like:<\/p>\n\n\n\n

const name = Data.person.name;<\/code><\/pre>\n\n\n\n

If person<\/code> happens to not exist on Data<\/code>, I’m going to get a hard, show-stopping error. With optional chaining, I can write:<\/p>\n\n\n\n

const name = Data.person?.name;<\/code><\/pre>\n\n\n\n\n\n\n\n

Now if person<\/code> doesn’t exist, name<\/code> becomes undefined<\/code> instead of throwing an error. That’s quite useful if you ask me. In a way, it makes for more resilient code, since there is less possibility of a script that entirely bombs out. But there are arguments that it actually makes for less resilient code, because instead of fixing the problem at the root level (bad data), you’re putting a band-aid on the problem. <\/p>\n\n\n\n

Jim Nielsen makes the connection<\/a> to optional chaining and !important<\/code> in CSS. Errors of “undefined properties” are perhaps the most common of all JavaScript errors and optional chaining is a quick workaround. Styles that don’t cascade the way you want is (maybe?<\/em>) the most common of all CSS issues and !important<\/code> is a quick workaround.<\/p>\n\n\n\n

Anyone familiar with CSS knows that using !important<\/code> doesn\u2019t always fix your problems. In fact, it might just cause you more problems. Ditto for optional chaining in JavaScript, it might cause you more problems than it fixes (we just don\u2019t know it yet since it hasn\u2019t been around long enough).<\/p><\/blockquote>\n\n\n\n

I like that take.<\/p>\n\n\n\n

Sweeping negative hot takes about new features are just clickbait silliness, but sometimes there are good things buried in there to think about. I’ll bet optional chaining settles into some nice patterns in JavaScript, just like !important<\/code> has in CSS<\/a> to some degree. Most chatter I hear about !important<\/code> in CSS lately is about how you should use it when you really mean it (not for getting out of a jam). <\/p>\n","protected":false},"excerpt":{"rendered":"

JavaScript has a (newish) feature called optional chaining. Say I have code like: If person happens to not exist on […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[18838,18839],"class_list":["post-321852","post","type-post","status-publish","format-standard","hentry","category-links","tag-important","tag-optional-chaining"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":362890,"url":"https:\/\/css-tricks.com\/the-optional-chaining-operator-modern-browsers-and-my-mom\/","url_meta":{"origin":321852,"position":0},"title":"The Optional Chaining Operator, \u201cModern\u201d Browsers, and My Mom","author":"Chris Coyier","date":"February 1, 2022","format":false,"excerpt":"Jim Nielsen's mom couldn't open a website. Jim worked on confirming the issue and documented how he got to the bottom of it: \u201c[...] well it can\u2019t be a browser issue. It\u2019s not like my Mom is using Internet Explorer! She has relatively modern tech: an iPad (Safari) and a\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/mom-chaining-operator.jpg?fit=1200%2C681&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/mom-chaining-operator.jpg?fit=1200%2C681&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/mom-chaining-operator.jpg?fit=1200%2C681&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/mom-chaining-operator.jpg?fit=1200%2C681&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/mom-chaining-operator.jpg?fit=1200%2C681&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":326069,"url":"https:\/\/css-tricks.com\/graphery-svg\/","url_meta":{"origin":321852,"position":1},"title":"Graphery SVG","author":"Chris Coyier","date":"November 23, 2020","format":false,"excerpt":"I've compared SVG and Canvas before. If you're trying to decide between them, read that. I'd say the #1 difference between them is vector (SVG) versus raster (Canvas). But the #2 difference is how you work with them. SVG is declarative, as in, literal elements that express what they are\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/graphery.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/graphery.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/graphery.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/graphery.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/graphery.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":281954,"url":"https:\/\/css-tricks.com\/%e2%80%8b%e2%80%8bavoiding-those-dang-cannot-read-property-of-undefined-errors\/","url_meta":{"origin":321852,"position":2},"title":"\u200b\u200bAvoiding those dang cannot read property of undefined errors","author":"Adam Giese","date":"February 13, 2019","format":false,"excerpt":"\u200b\u200b\u200b\u200bUncaught TypeError: Cannot read property 'foo' of undefined.\u200b The dreaded error we all hit at some point in JavaScript development. Could be an empty state from an API that returns differently than you expected. Could be something else. We don\u2019t know because the error itself is so general and broad.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/error-long-shadow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/error-long-shadow.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/error-long-shadow.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/error-long-shadow.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/error-long-shadow.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":276963,"url":"https:\/\/css-tricks.com\/what-are-durable-functions\/","url_meta":{"origin":321852,"position":3},"title":"What are Durable Functions?","author":"Sarah Drasner","date":"October 9, 2018","format":false,"excerpt":"Oh no! Not more jargon! What exactly does the term Durable Functions mean? Durable functions have to do with Serverless architectures. It\u2019s an extension of Azure Functions that allow you to write stateful executions in a serverless environment. Think of it this way. There are a few big benefits that\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/durable-function.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/durable-function.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/durable-function.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/durable-function.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/durable-function.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":277039,"url":"https:\/\/css-tricks.com\/using-recompose-to-share-functionality-between-react-components\/","url_meta":{"origin":321852,"position":4},"title":"Using Recompose to Share Functionality Between React Components","author":"Kingsley Silas","date":"October 8, 2018","format":false,"excerpt":"Sharing functionality between React components is a pretty common need. The concept is that we can establish the behavior in one place and then extend it across different components. Higher-Order Components are one way to do this. Yet, there is another way using a library called Recompose. GitHub Repo What\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":317887,"url":"https:\/\/css-tricks.com\/typescript-minus-typescript\/","url_meta":{"origin":321852,"position":5},"title":"TypeScript, Minus TypeScript","author":"Caleb Williams","date":"August 6, 2020","format":false,"excerpt":"Unless you\u2019ve been hiding under a rock the last several years (and let\u2019s face it, hiding under a rock sometimes feels like the right thing to do), you\u2019ve probably heard of and likely used TypeScript. TypeScript is a syntactical superset of JavaScript that adds \u2014 as its name suggests \u2014\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/typscript-hollow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/typscript-hollow.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/typscript-hollow.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/typscript-hollow.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/typscript-hollow.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/321852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=321852"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/321852\/revisions"}],"predecessor-version":[{"id":321901,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/321852\/revisions\/321901"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=321852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=321852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=321852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}