Understanding JavaScript Conditionals and Operators

In this blog post, we'll delve into some key aspects of JavaScript conditionals and operators, using practical examples to illustrate their functionality. Let's get started!

Conditional Statements

Conditional statements are fundamental in controlling the flow of our code. They allow us to execute certain pieces of code based on whether a condition is true or false.

Example 1: Checking User Email

// const userEmail = "harsh@gmail.com";
// const userEmail = "";
const userEmail = [];

if (userEmail) {
    console.log("Got user email");
} else {
    console.log("Don't have user email");
}
//outputs: Got user Email

In the example above, we're checking if userEmail contains a value. If it does, we log "Got user email"; otherwise, we log "Don't have user email". Note that in JavaScript, certain values are considered truth and falsy.

//List of truthy and falsy values
//falsy: 0, -0, false, 0n (this is inside BigInt), "", null, undefined, NaN
// truthy: "0", "false", " ", [], {} -> this is an empty object, function(){} -> empty function

Example 2: Checking if an Array is Empty

let userName = "harsh"; 
if(userName){
    console.log("It is a truthy value"); //outputs: It is a truthy value
}
else{
    console.log("It is a falsy value")
}

//EXAMPLE
let newName = "";
if(newName){
    console.log("It is a truthy value");
}
else{
    console.log("It is a falsy value"); //outputs: It is a falsy value
}

//EXAMPLE
let userName = []; //will output "array is empty"
if (userEmail.length === 0) {
    console.log("Array is empty");
}
else{
    console.log("array is not empty");
}

//outputs: array is empty

Here, we check if the userEmail array is empty by verifying its length.

Example 3: Checking if an Object is Empty

const emptyObj = {};

if (Object.keys(emptyObj).length === 0) {
    console.log("Object is empty");
}

To check if an object is empty, we use Object.keys(), which returns an array of the object's own enumerable property names. If the length of this array is 0, the object is empty.

Nullish Coalescing Operator (??)

The nullish coalescing operator (??) is used to provide a default value when dealing with null or undefined.

let val1;
// val1 = 5 ?? 10; //outputs: 5
// val1 = null ?? 10; //outputs: 10
// val1 = undefined ?? 15; //outputs: 15
val1 = null ?? 10 ?? 20; // Takes the first value after null or undefined, which is 10

console.log(val1); // Outputs: 10

In this example, val1 is assigned the value 10 because the first null value triggers the fallback to the next non-nullish value.

Ternary Operator

The ternary operator is a concise way to perform conditional checks.

// condition ? true : false 
const iceTeaPrice = 100;
iceTeaPrice <= 80 ? console.log("less than 80") : console.log("more than 80");

//outputs: more than 80

This operator checks if iceTeaPrice is less than or equal to 80. If true, it logs "less than 80"; otherwise, it logs "more than 80".

Summary

In this post, we've covered:

• Basic conditional statements with if...else

• Checking if arrays and objects are empty

• Using the nullish coalescing operator (??)

• Simplifying conditions with the ternary operator

These fundamental concepts are crucial for controlling the flow of your JavaScript code effectively. By mastering these, you can write more readable and maintainable code.