- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Optional chaining operator in JavaScript.
The optional chaining operator is introduced in ES2020 and allows us to access a nested property without checking explicitly if each reference in the chain is null or undefined. Earlier, we used to use && operator to check if the parent object isn’t null or undefined but now we can use the ‘?.’ optional chaining operator.
Following is the code for optional chaining operator in JavaScript −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Optional Chaining operator in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to use optional chaining operator to access person object properties</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let person = {
name: "Rohan",
location: {
state: "Delhi",
country: "India",
},
};
BtnEle.addEventListener("click", () => {
resEle.innerHTML =
"person ?. location ?. state = " + person?.location?.state + "<br>";
resEle.innerHTML +="person ?. location ?. country = " +person?.location?.country +"<br>";
resEle.innerHTML +="person ?. personalDetails ?. birthDate = " +
person?.personalDetails?.birthDate +"<br>";
});
</script>
</body>
</html>Output
On clicking the ‘CLICK HERE’ button −
Published on 20-Jul-2020 08:31:30
- Related Questions & Answers
- Method Chaining in JavaScript
- What is function chaining in JavaScript?
- Explain Optional Catch Binding in JavaScript.
- What are optional arguments in JavaScript Functions?
- Exception chaining in Java
- How can I declare optional function parameters in JavaScript?
- Chaining comparison operators in C#
- Constructor Chaining In Java programming
- Chaining comparison operators in Python
- Optional Parameters in Dart Programming
- Mandatory and optional Participation
- Java 8 Optional Class
- Instanceof operator in JavaScript
- JavaScript Spread Operator
- What is constructor chaining in Java?
Advertisements