
const value1 = 0 || 'default string' Ĭonsole.log(value2) With Logical OR ( ||) Instead of the logical OR ( ||) operator, you can use double question marks ( ?), or Nullish Coalescing. If we use ( ||), it will be considered as undefined or NULL and return some default value that we have fixed. You can do this using the || operator, known as the logical OR operator:īut if you use || to provide a default value, you may encounter unexpected behaviors if you consider some values as usable (for example, '' or 0).Ĭonsider a scenario where a variable has the value of 0 or an empty string. This way, when the app displays the data, the default picture will be there for the cities without images. What we can do, in that case, is set a default picture for those cities which don't have an image, Bangalore in our case. When the app fetches and displays the data, the picture will be blank, which can look ugly.

We inputted a place, let's say Bangalore, but for some reason, its image is not there in the database. In some cases, you have to set a default value for a missing property name or value.įor example, let's say we are creating a Weather App in which we are fetching the temperature, humidity, wind speed, pressure, time of sunrise and sunset, and the picture of the city. Optional Chaining is truly a life-changing feature for JavaScript developers. With that, it will just return undefined instead of throwing an ugly error. Thanks to Optional Chaining, you can just insert a ? between the property name and the period between the next property. This may be because of a missing or undefined value in your database or from an API: A common error – TypeError: Cannot read property ‘salary’ of undefined
Javascrip does not equal symbol code#
Let's say you have code that calls on an object property that doesn't exist, which triggers an error at run time. To understand how it works, imagine this scenario. In 2020, an awesome new feature known as Optional Chaining was introduced. Using a ternary operator is much more effective, right? 2. Here, the ternary operator occupies only one line of code, whereas the if.else takes seven lines. Let's compare a ternary operator with a longer if.else statement: The ternary operator is basically a shortcut for a traditional if.else statement.

Then we add a colon ( :) followed by a value to return if the condition is false. Starting with ?, we add a condition on the left side and a value on the right side to return when the condition is true. The ? operator is also called the ternary operator because, unlike other operators such as strict equal ( =) or remainder ( %), it's the only one that takes three operands. The term ternary means composed of three items or parts. We'll look at each of these in detail, starting with the most common way you'll see the ? operator being used – as a ternary operator. Three Main Uses for the Question Mark ( ?) in JavaScript:

There are three main uses for the ? operator, two of which you might not used or even heard of. The ? operator is used in conditional statements, and when paired with a :, can function as a compact alternative to if.else statements.īut there is more to it than meets the eye. The conditional or question mark operator, represented by a ?, is one of the most powerful features in JavaScript.
