Javascript Common Operators & syntax ,

PART-01

JavaScript is one of the most widely used programming languages for building modern web applications. While learning JavaScript, developers come across many operators, syntax patterns, and built-in methods that are used repeatedly in everyday development.

This article focuses on some of the commonly used JavaScript syntax, operators, and code patterns that are useful to understand when working with JavaScript and modern frontend applications. Each concept is explained with simple examples to make it easier to understand what the code does and when it can be used.

1. ?? vs || — Nullish Coalescing and Logical OR

when are each used in the code we need to know and to understand we need examples ill provide u the example for understanding when each of this is used

Both ?? and || can be used to provide a default or fallback value when working with JavaScript.

Nullish Coalescing Operator (??)

The ?? operator uses the value on the right only when the value on the left is null or undefined.

const value = input ?? "Default";

Here, "Default" is used only if input is null or undefined.

For example:

const age = 0;
const result = age ?? 18;
console.log(result); // 0

The result is 0 because 0 is a valid value. It is not null or undefined.

Logical OR Operator (||)

The || operator uses the value on the right when the value on the left is falsy.

For example:

const age = 0;
const result = age || 18;
console.log(result); // 18

Here, the result is 18 because JavaScript considers 0 to be a falsy value.

The main difference

0 ?? 18   // 0
0 || 18   // 18

So the basic rule is:

??  → fallback only for null or undefined
||  → fallback for falsy values

2. ? optional

Optional chaining (?.) is used when we want to access a property or call a function without causing an error if the value before it is null or undefined.

When is it used?

It is commonly used when working with objects where some properties may not always exist.

Get Anush Lobo’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

For example, suppose we have:

const user = {
  name: "Anush",
  profile: {
    company: "Nineleaps"
  }
};

We can access the company normally:

console.log(user.profile.company);

But what happens if profile doesn't exist?

const user = {
  name: "Anush"
};

console.log(user.profile.company);

This causes an error because user.profile is undefined.

Instead, we can use optional chaining:

console.log(user.profile?.company);

Now JavaScript checks whether profile exists.

If it exists:

user.profile
      ↓
company
      ↓
"Nineleaps"

If it doesn’t exist:

user.profile
      ↓
undefined
      ↓
undefined

Instead of throwing an error.

Real-world example

In a React application, you might receive data from an API where a nested object isn’t always available:

const mentorName = request.mentor?.name;

Here, JavaScript first checks:

request.mentor

If mentor exists, it accesses:

request.mentor.name

If mentor is null or undefined, the expression simply returns undefined instead of throwing an error.

Without optional chaining

const mentorName = request.mentor.name;

If request.mentor is missing:

TypeError: Cannot read properties of undefined