--- title: Optional Chaining In JavaScript - What Is It And How To Use It? | daily.dev description: This article aims to help you understand the optional chaining operator in JavaScript. It's a handy feature that allows you to check things such as object's properties, if a function or array exists. canonical: https://daily.dev/blog/optional-chaining-in-javascript-what-is-it-and-how-to-use-it/ og:type: article og:url: https://daily.dev/blog/optional-chaining-in-javascript-what-is-it-and-how-to-use-it/ og:title: Optional Chaining In JavaScript - What Is It And How To Use It? | daily.dev og:description: This article aims to help you understand the optional chaining operator in JavaScript. It's a handy feature that allows you to check things such as object's properties, if a function or array exists. og:image: https://media.daily.dev/image/upload/s--3DuZw1MN--/f_auto,q_auto/v1/recruiter-landing/5f36718f4b3e44b65f9e2f70_g_OA_30_F_Kn_20_1_eb3c4ec044?_a=BAMAMiB80 og:site_name: daily.dev og:locale: en_US article:published_time: 2020-08-14 article:modified_time: 2026-05-15T14:26:29.269Z article:author: Catalin Pit twitter:card: summary_large_image twitter:site: @dailydotdev twitter:creator: @dailydotdev twitter:title: Optional Chaining In JavaScript - What Is It And How To Use It? | daily.dev twitter:description: This article aims to help you understand the optional chaining operator in JavaScript. It's a handy feature that allows you to check things such as object's properties, if a function or array exists. twitter:image: https://media.daily.dev/image/upload/s--3DuZw1MN--/f_auto,q_auto/v1/recruiter-landing/5f36718f4b3e44b65f9e2f70_g_OA_30_F_Kn_20_1_eb3c4ec044?_a=BAMAMiB80 --- ## What Is Optional Chaining in JavaScript According to the MDN docs, optional chaining is "_shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing_". In simpler words, optional chaining allows us to access chained properties, such as object properties. Let us illustrate optional chaining with an example: \`\`\`js const person = { name: "Catalin Pit", socialMedia: {  twitter: "@catalinmpit",  instagram: "@catalinmpit",  linkedin: "@catalinmpit", }, experience: "Junior", employed: true }; \`\`\` In the example, you can see a person object with different properties such as name, social media accounts, experience, and a boolean field employed. Let's say we want to access the \`instagram\` property. We would have to check if the: - person object exists - \`socialMedia\` field exists - \`instagram\` field is present We would have to do three checks, and the if statement would like like this: \`\`\`js if (person && person.socialMedia && person.socialMedia.instagram) { console.log(person.socialMedia.instagram); } \`\`\` We can agree that there is quite a lot of code for a simple check. However, we can shorten it by using the optional chaining feature. ## Optional Chaining The optional chaining feature is similar to the \`.\` chaining operator. The only difference is that it returns the value of undefined if the reference is \`null\` or \`undefined\`. That is if the object property does not exist. Similarly, if a function does not exist, it returns \`undefined\`. However, if you are looking for extra information, I recommend you read the MDN docs explanation [here (click-me)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining). Coming back to our previous example, let's see how can we shorten the if statement. First of all, we refactor the if statement to look as follows: \`\`\`js if (person?.socialMedia?.twitter) { console.log(person.socialMedia.twitter); // outputs @catalinmpit } \`\`\` It is still three lines of code, but it is easier to write it and read it. Still, we can make it shorter. Would you believe me if I would say we can shorten it to one line? Here is the one-liner: \`\`\`js console.log(person?.socialMedia?.twitter) \`\`\` Ta-da! Instead of three lines of code, we only have one, and that is without sacrificing the code readability. ## More Examples We can use optional chaining for arrays, and functional calls. Thus, I want to illustrate some more examples of can you use this operator. Let us start with the **arrays**. \`\`\`js const examScores = \[90, 100, 84, 78, 65, 79, 56\]; console.log(examScores?.\[3\]); \`\`\` We check if the array examScores exists, and if it does, we output the fourth array element. In the same vein, we can use it for **function** calls as follows: \`\`\`js const response = myAPI.getData?.(); \`\`\` Optional chaining is very useful when working with APIs, where a method might not be available for various reasons. We can check if the method exists, and proceed with our code based on whether it exists or not. ## Conclusion I find this feature extremely useful, and I like that it shortens your code without sacrificing the code readability. Let us see the takeaway points from this article: - Optional chaining allows us to check the properties of an object - Especially useful when the properties might be missing - It returns undefined if a property/function does not exist, instead of throwing an error - It shortens the code without sacrificing readability If you enjoyed the article, consider sharing it so more people can benefit from it! Also, feel free to @me on Twitter with your opinions. Catalin publishes [programming and software development articles](https://catalins.tech/) on his blog. ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/og-image.png?v=a830cdf1","width":1200,"height":630},"sameAs":["https://twitter.com/dailydotdev","https://www.linkedin.com/company/dailydotdev","https://github.com/dailydotdev","https://www.instagram.com/dailydotdev"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","description":"Free, personalized developer news aggregator. Stay on top of software development news, AI coding tools, and web dev - curated daily from trusted sources.","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}},{"@type":"WebPage","@id":"https://daily.dev/blog/optional-chaining-in-javascript-what-is-it-and-how-to-use-it/","url":"https://daily.dev/blog/optional-chaining-in-javascript-what-is-it-and-how-to-use-it/","name":"Optional Chaining In JavaScript - What Is It And How To Use It? | daily.dev","description":"This article aims to help you understand the optional chaining operator in JavaScript. It's a handy feature that allows you to check things such as object's properties, if a function or array exists.","inLanguage":"en-US","isPartOf":{"@id":"https://daily.dev/#website"}},{"@type":"Article","@id":"https://daily.dev/blog/optional-chaining-in-javascript-what-is-it-and-how-to-use-it/#article","headline":"Optional Chaining In JavaScript - What Is It And How To Use It?","url":"https://daily.dev/blog/optional-chaining-in-javascript-what-is-it-and-how-to-use-it/","datePublished":"2020-08-14","dateModified":"2026-05-15T14:26:29.269Z","isPartOf":{"@id":"https://daily.dev/#website"},"publisher":{"@id":"https://daily.dev/#organization"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/blog/optional-chaining-in-javascript-what-is-it-and-how-to-use-it/"},"description":"This article aims to help you understand the optional chaining operator in JavaScript. It's a handy feature that allows you to check things such as object's properties, if a function or array exists.","image":{"@type":"ImageObject","url":"https://media.daily.dev/image/upload/s--3DuZw1MN--/f_auto,q_auto/v1/recruiter-landing/5f36718f4b3e44b65f9e2f70_g_OA_30_F_Kn_20_1_eb3c4ec044?_a=BAMAMiB80"},"author":{"@type":"Person","name":"Catalin Pit","url":"https://app.daily.dev/catalinpit"},"potentialAction":{"@type":"ReadAction","target":"https://daily.dev/blog/optional-chaining-in-javascript-what-is-it-and-how-to-use-it/"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://daily.dev/blog/"},{"@type":"ListItem","position":3,"name":"Webdev","item":"https://daily.dev/categories/webdev/"},{"@type":"ListItem","position":4,"name":"Optional Chaining In JavaScript - What Is It And How To Use It?","item":"https://daily.dev/blog/optional-chaining-in-javascript-what-is-it-and-how-to-use-it/"}]}]} ```