This content originally appeared on DEV Community and was authored by Dharmendra Kumar
Section 1: Embracing the Nullish Coalescing Assignment (??=)
Understanding Nullish Coalescing Assignment
The ??= operator is a recent addition that allows you to assign a value to a variable only if that variable is null or undefined. This is particularly useful when you want to set default values for variables without overwriting existing values that are truthy (but may be false, 0, "", etc.).
Example:
let userPreference;
userPreference ??= "dark mode";
console.log(userPreference); // "dark mode"
userPreference ??= "light mode";
console.log(userPreference); // Still "dark mode" because it wasn't null or undefined
Section 2: Simplifying Defaults with Nullish Coalescing Operator (??)
Understanding Nullish Coalescing Operator
The ?? operator is similar to the Logical OR (||) but with a crucial difference: it only considers null and undefined as invalid. This ensures that values like 0, false, and "" are treated as valid inputs, which is not the case with ||.
Example:
let userPreference = null;
let theme = userPreference ?? "dark mode";
console.log(theme); // "dark mode"
userPreference = "";
theme = userPreference ?? "dark mode";
console.log(theme); // "" because an empty string is considered valid
Section 3: Logical OR (||) - Short-Circuiting Essentials
Understanding Logical OR
The Logical OR (||) operator is used to return the first truthy value in a series of operands or the last one if none are truthy. It’s often used for setting default values but can lead to unexpected results if you're dealing with 0, false, or "".
Example:
let userPreference = "";
let theme = userPreference || "dark mode";
console.log(theme); // "dark mode" because an empty string is falsy
Section 4: Efficient Assignments with Logical OR (||=)
Understanding Logical OR Assignment
The ||= operator assigns a value to a variable only if the current value is falsy. This is useful for defaulting variables without explicitly checking them.
Example:
let userPreference = "";
userPreference ||= "dark mode";
console.log(userPreference); // "dark mode" because an empty string is falsy
Section 5: Logical AND (&&) - A Conditional Gateway
Understanding Logical AND
The Logical AND (&&) operator returns the first falsy value encountered or the last operand if all are truthy. It’s commonly used in conditionals to ensure multiple expressions are true.
Example:
let isUserLoggedIn = true;
let hasPaidSubscription = true;
let canAccessContent = isUserLoggedIn && hasPaidSubscription;
console.log(canAccessContent); // true, both conditions are true
Section 6: Streamlining Assignments with Logical AND (&&=)
Understanding Logical AND Assignment
The &&= operator assigns a value to a variable only if the current value is truthy. This can help you conditionally update variables without extra if-statements.
Example:
let isUserLoggedIn = true;
let canAccessContent = true;
canAccessContent &&= false;
console.log(canAccessContent); // false, because canAccessContent was true
Section 7: Navigating Safely with Optional Chaining (?.)
Understanding Optional Chaining
The Optional Chaining (?.) operator allows you to safely access deeply nested properties without worrying about whether an intermediate property is null or undefined. It short-circuits the evaluation, returning undefined if a reference is nullish.
Example:
let user = {
profile: {
name: "Alice"
}
};
let userName = user.profile?.name;
console.log(userName); // "Alice"
let userAge = user.profile?.age;
console.log(userAge); // undefined, because age is not defined
Section 8: Understanding Immediate Function Execution with IIFE
Void Function Execution
Using void before a function allows you to immediately invoke the function without it being treated as a statement. This is particularly useful for self-contained code that needs to run immediately.
Example:
void function () {
console.log("Executed!");
}();
// Logs "Executed!"
Parentheses-Encapsulated Function Execution
Alternatively, you can wrap the function in parentheses to achieve the same effect. This is a more common pattern known as an Immediately Invoked Function Expression (IIFE).
Example:
(function () {
console.log("Executed!");
})();
// Logs "Executed!"
These techniques and operators are essential tools for writing clean, efficient, and bug-free JavaScript code. Whether you're managing defaults with ?? and ||, ensuring safe property access with ?., or immediately executing functions, these tools help streamline and optimize your development process.
This content originally appeared on DEV Community and was authored by Dharmendra Kumar
Dharmendra Kumar | Sciencx (2024-08-20T13:23:35+00:00) Unlock Hidden JavaScript Superpowers: Master Operators and Instant Execution.💪💪. Retrieved from https://www.scien.cx/2024/08/20/unlock-hidden-javascript-superpowers-master-operators-and-instant-execution-%f0%9f%92%aa%f0%9f%92%aa/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.