Difference between ? and ??

The operators `?` and `??` in JavaScript serve distinct purposes, particularly in handling values and conditions. Understanding their differences is crucial for writing clean and efficient code. The `?` operator is known as the ternary operator, while `??` is referred to as the nullish coalescing operator. Below, I will delve into the specifics of each operator, provide practical examples, and highlight best practices and common mistakes associated with their use.

Ternary Operator (`?`)

The ternary operator is a shorthand for an `if-else` statement. It takes three operands: a condition, a value if true, and a value if false. The syntax is as follows:

condition ? valueIfTrue : valueIfFalse

Example of Ternary Operator

Here’s a simple example:

const age = 18;
const canVote = age >= 18 ? 'Yes' : 'No';
console.log(canVote); // Output: Yes

In this example, if the condition `age >= 18` is true, `canVote` will be assigned 'Yes'; otherwise, it will be 'No'.

Best Practices for Ternary Operator

• Use it for simple conditions to improve readability.
• Avoid nesting ternary operators as it can lead to confusion.
• Use parentheses to clarify complex conditions.

Common Mistakes with Ternary Operator

• Overusing it for complex logic, making the code hard to read.
• Neglecting to handle all possible conditions, leading to unexpected results.

Nullish Coalescing Operator (`??`)

The nullish coalescing operator is used to provide a default value when dealing with `null` or `undefined`. Its syntax is straightforward:

let result = value1 ?? value2;

In this case, `result` will take the value of `value1` if it is not `null` or `undefined`; otherwise, it will take `value2`.

Example of Nullish Coalescing Operator

Consider the following example:

const userInput = null;
const defaultInput = 'Default Value';
const finalInput = userInput ?? defaultInput;
console.log(finalInput); // Output: Default Value

Here, since `userInput` is `null`, `finalInput` takes the value of `defaultInput`.

Best Practices for Nullish Coalescing Operator

• Use it when you want to provide defaults for potentially missing values.
• Combine it with other operators for more complex defaulting logic.

Common Mistakes with Nullish Coalescing Operator

• Confusing it with the logical OR (`||`) operator, which can lead to unintended results when falsy values (like `0` or `''`) are involved.
• Using it in scenarios where you need to check for all falsy values, not just `null` or `undefined`.

In summary, while both operators can be used to simplify code, they serve different purposes. The ternary operator is best for conditional assignments, whereas the nullish coalescing operator is ideal for providing defaults when dealing with potentially absent values. Understanding when and how to use each operator effectively can significantly enhance the quality of your JavaScript code.