When developing on a project you will 100% come across a scenario where you need to do conditional logic. Conditional is basically handling multiple decisions and it is often taught very early in any introductory computer science class.
Standard Conditionals
We are all familiar with the standard if else below
If else conditional statement
This is basically saying if the hour is before/less than 18 (3pm in the afternoon) it is a good day greeting and after 3pm is a good evening greeting.
Another example are switch statements. Ie. Rule of thumb is if the logic is “over 3” a switch statement should be used instead of multiple if else statements.
Switch statement
The most common way you’ll see ? used in JavaScript is using it in what is called a ternary operator or inline if. A ternary is a shorthand way of writing the above if / else statement, the first time I saw it as an intern..it broke my brain. I have grown to really enjoy using it, it is short, concise and can be easily read on one line. You will commonly see it in react and other front end JavaScript libraries.
React Example
The above example with ternary or inline if
The condition to test is on the left side of the ?. If the value is true the value to the left side of the colon will display. If the value is false the one to the right will display. Much more effective and easy to read.
Optional Chaining
Optional chaining enables you to read the value of a property deep in a chain of connected objects. Instead of causing a runtime error, the expression short circuits and returns undefined.
Lets say you want to render a component and the data value is deeply nested in the return object.
If we didn’t have the ? after doe we would get an all too familiar runtime error.
This saves us from having to explicitly check each value before we render it to the browser.
catAge = adventurer && adventurer.cat && adventurer.cat.age
console.log(catAge);
By just using adventurer.cat?.age. JavaSCript know to check to make sure the cat? Object is not null or undefined before attempting to a access the age property. If it is, it automatically short circuits and returns undefined.
Conclusion
We’ve had a short review on conditionals and how to write them as well as switch statements. How to shorten them with ternary/ inline If’s for more readable and succinct code. Finally we learned something new called optional chaining, which prevents you from checking each individual value. I hope this was helpful and you can take it back to your codebase.
Resources: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
https://www.freecodecamp.org/news/how-the-question-mark-works-in-javascript/
Top comments (1)
Method Chaining is the practice of calling different methods in a single line instead of calling different methods with the same object reference separately. Under this procedure, we have to write the object reference once and then call the methods by separating them with a (dot.) regards movieboxproapk.com/
Optional chaining, represented by ?. in JavaScript, is a new feature introduced in ES2020. Optional chaining changes the way properties are accessed from deeply nested objects. It fixes the problem of having to do multiple null checks when accessing a long chain of object properties in JavaScript