Not a medium member? read the full article here

What are operators used for?

Let’s first start by defining what operators are. In JavaScript, Operators are symbols or keywords that are used in order to perform a specific operation; these operations can be mathematical, logical, assignments, comparisons, and others. In a nutshell, they are used to manipulate the data and control the flow of a program as it runs.

Which operators do we have, and what are they used for?

According to MDN Web Docs, the latest operators we have can be divided into 4 groups: Arithmetic, Assignment, Logical, and others. I’ll be explaining each of them next.

Arithmetic Operators

As you may already guess, these operators allow us to make mathematical operations, the most common usage for these are things you all know by heart

//Addition (+)
5 + 3 = 8
//Subtraction (-)
10 - 4 = 6
//Multiplication (*)
6 * 7 = 42
//Division (/)
10 / 2 = 5

But these are not the only ones; some arithmetic operators that are just a bit less common are:

//Remainder (%)
12 % 5 = 2
//Exponentiation ( ** )
2 ** 3 = 8

The remainder operator, represented by the percent sign (%), is a mathematical operator used in programming to find the remainder of a division. For example, 5 % 2 results in 1 because 2 goes into 5 two times with a remainder of 1.

Finally, we get the unary arithmetic variants which are used to either increase/decrease or to transform values to int or make them negative:

• ++ /--(increment / decrement)

• Unary + and — to coerce or negate

let x = 5;
x++;           // x becomes 6
let y = +"42"; // y is 42 (number)
let z = -10;   // z is -10

Assignment Operators

Now the assignment operators are quite simple to explain; they are used to either store or update a value in a variable, the most basic version of it is the = operator, which is used to assign. The rest of the operators are called “compound” as they basically add to the = operator.

These shortcuts are great to make code cleaner and help reduce repetition.

// Basic assignment:
let count = 0;
count = 5;

// Compound Operators:
count += 2; // count + 3
count -= 3; // count - 3
count *= 3; // count * 3

//This are made to replace things like:
count = count * 3

There are more assignment operators, which can be further explained in the MDN you can take a look at the full list here

Comparison Operators

A quick little trivia fact, as explained in the first article of this series, JavaScript was created way back in May 1995, BUT as quirky as this funny little programming language is nowadays, it used to be worse back then. I’ve mentioned before a hundred different quirks this language has, but one of them that is now “Solved” by simply using TypeScript was type comparisons. At the beginning, JavaScript will only work with Loose comparison operators (==) But around this date back in December 1999, as part of the ECMAScript 3 (ES3) edition, the Strict equality operator (===) was introduced. Making our lives just a little bit easier.

Now, let’s take a look at why this is such a good thing to have:

Comparisons let you compare two values or expressions. they are divided as follows:

• Loose equality == (equal) & != (not equal)

// Not type safe:
"3" == 3          // returns true
3 != '3'          // returns false
null == undefined // returns true
[] == false       // returns true

• Strict equality: ===, !==

0 === false         // false (different types)
"5" === 5           // false (different types)
"hello" === "hello" // true (same value, same type)
1 === 1             // true (same type, same value)
3 !== '3'           // true (different types)

💡 Due to how JS works, the recommendation is to always use ===,unless you have a good reason to allow coercion.

• Relational: <, >, <=, >=

3 < 1           // false (3 is not smaller than 1)
4 > 4           // false (4 is not larger than 4)
4 >= 4          // true (4 is larger or equal than 4)
4 <= 5          // true (5 is smaller or equal than 4)

Logical Operators

Logical operators, as their name suggest, use the values sent in a logical way in order to return the right value. These are pretty flexible operators, on the regular basis, if used with boolean values it will return a boolean, BUT they can also be used to decide which, if any value, will be returned. There are 4 operators that are most commonly used && (AND), || (OR), ! (NOT), and ?? (NULLISH). along with ?. (Optional Chaining) which was introduced later in the ECMAScript 2020 (ES2020) version of JavaScript (MDN Web Docs).

Here’s how to use them:

//Is an editor user IF the user is logged in AND has the role of "editor"
const isEditorUser= user.isLoggedIn && user.role === "editor";

// Validates if maybeName can be turned to true, otherwise it returns "guest"
const name = maybeName || "Guest";

// Validates if maybeName is either NULL or UNDEFINED, otherwise it returns "guest"
const name = maybeName ?? "Guest";

// Validates IF the method or variable exists before it tries to read it
// eg. this is ussed instead of user && user.address && user.address.street 
const street = user?.address?.street;

Ternary Operators (? :)

Just as we saw during the last post, IF Else statements help us to keep the flow of the application based on different conditions. Ternary operators (? :) work in a pretty similar way; Think of them as a shorthand for an If Else statement, they are commonly written as {Condition} ? {result if true} : {result if false} here’s a quick example

const status = age >= 18 ? "adult" : "minor";

Let’s make a comparison between a regular if else and a ternary if else:

// With IF Else
function getFinalPrice(price, discount) {
  let result;
  if (discount > 0) {
    result = price - (price * discount);
  } else {
    result = price;
  }
  return result;
}

// With Ternary Operator
function getFinalPrice(price, discount) {
  return discount > 0
    ? price - price * discount
    : price;
}

💡 Keep in mind that while ternary operators are used to simplify the code and in a lot of cases make it less verbose, it can also really bloat it if overused or if we chain multiple ternary conditions in a row. This can become a problem for future development and maintainability so you should weight which option you will take when working on your code.

This is the foundation. Get this right and the rest of the language starts making sense.

Variables: What They Actually Are

Think a variable as a labelled box in a memory.

let name = "John";

• name --> label

• "John" --> value stored

• let --> how the box behaves

JavaScript stores the value somewhere in memory and the variable points to it.

You need variables because somewhere in memory and the variable points to it.

You need variables because programs deal with changing data:

• User input

• API responses

• Calculations

• State in UI

Without variables, everything would be hardcoded and useless.

Declaring Variables: var, let, and const

JavaScript has three ways to declare variables.

1. let (Modern Default)

let age = 25;
age = 36; // allowed

• can be reassigned

• block scoped

• use this by default when value changes

2. const (Preferred when value should not change)

const birthYear = 1996;
birthYear = 1999; // Error

• cannot be reassigned

• block scoped

• safer by default

Important: const prevents reassignment, not mutation.

const user = { name: "Ali" }; user.name = "Mohammad"; // Allowed user = {} // Error: not allowed

The variable is protected, not the object.

3. var (Legacy - Avoid in Modern Js)

var city = "Delhi";

Problems:

• function scoped (not block scoped)

• can be redeclared

• leads to subtle bugs.

if (true) { var x = 10; } console.log(x); // 10 (leaks outside block)

With let :

if (true) { let y = 10; } console.log(y); // ReferenceError

Rule of thumb :

• use const by default

• use let if value must change

• never use var in new code

What is Scope ?

Scope defines where a variable is accessible.

Think scope like a room in a house. If you define a variable inside a block {}, it stays inside that block.

{ let secret = "supersecret1234"; } console.log(secret); // Not accessible

Block scope prevents accidental collisions in larger programs. This becomes critical in loops and conditionals.

Data Types in JavaScript

Every value in JavaScript has a type.

JavaScript has 7 primitive type (defined in the ECMAScript spec)

const str = "hello";           // string
const num = 42;                // number
const big = 9007199254740993n; // bigint
const boolean = true;             // boolean
const undefined = undefined;       // undefined
const null = null;              // null
const symbol = Symbol("id");      // symbol

Primitives are:

• immutable

• compared by value

• not objects

Everything else (arrays, objects, functions) in an object.

1. String

text data.

let name = "Mohammad"; let greeting = Hello, ${name};

Strings are immutable

let str = "hello"; str[0] = "H"; // does nothing console.log(str); // "hello"

to change it, you create a new string

str = "H" + str.slice(1);

2. Number

JavaScript has one number type for integers and decimals.

let age = 25; let price = 10.33;

Internally, numbers follow the IEEE 754 floating-point standard. That’s why this happens:

0.1 + 0.2 === 0.3; // false

It's not a bug. It's floating point precision.

If you’re handling money:

• Store values in cents (integers)

• Format later

let totalInCents = 10 + 20; // 30

Now format in USD or any other currency.

// Bad: floating-point errors in calculations let price = 0.1 + 0.2; // 0.30000000000000004 // Good: calculate in cents, format for display let priceInCents = 10 + 20; // 30 (calculation is accurate!) // Use Intl.NumberFormat to display as currency const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }); console.log(formatter.format(priceInCents / 100)); // "$0.30" // Works for any locale and currency! const euroFormatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', }); console.log(euroFormatter.format(1234.56)); // "1.234,56 €"

3. Bigint

use for very large integers.

let big = 9007199254740993n;

you cannot mix number and bigInt;

// 10n + 5 TypeError

Use BigInt only when needed (large IDs, cryptography, precision work)

4.Boolean

only two values : true or false

let isAdult = age >= 18;

Falsy values in JavaScript:

• false

• 0

• ""

• null

• undefined

• NaN

Everything else is truthy.

5. undefined

Means no value assigned.

let x; console.log(x); // undefined

Also returned when :

• Function does not return

• Property does not exist

You usually don't assign undefined manually

6.null

Means intentionally empty.

let user = null

You assign null when you want to say:

"There is no value here on purpose"

Weird JavaScript Fact

typeof null; // "object"

This is a historical bug from 1995. It remains for backward compatibility. To check for null:

value === null;

7. Symbol

Creates unique identifiers.

let id1 = Symbol("id"); let id2 = Symbol("id"); id1 === id2; // false

Advanced use case:

• unique object keys

• internal library mechanism

Beginners don't need it immediately, but it's part of the language.

typeof Operator

Use typeof to check type:

typeof "hello"; // "string" typeof 42; // "number" typeof true; // "boolean" typeof undefined; // "undefined" typeof Symbol(); // "symbol" typeof 42n; // "bigint"

But

typeof null; // "object" (legacy bug) typeof []; // "object"

To check arrays:

Array.isArray([1, 2, 3]); // true

Primitive vs Object

Primitives:

• stored directly

• compared by values

• immutable

Objects:

• stored by reference

• compared by reference

• mutable

Example:

let a = 5; let b = 5; a === b; // true

But:

let obj1 = { name: "Ali" }; let obj2 = { name: "Ali" }; obj1 === obj2; // false

Same content, different references.

Understanding this prevents many state management bugs.

Common Beginner Mistakes

1.Using var in modern code

creates scope bugs.

2.Confusing null and undefined

3.Thinking const makes values immutable

It doen't.

4.Ignoring floating-point issues

Never use decimals for financial math.

Final Thoughts

Variables are not just syntax. They define.

• how memory behaves

• how scope protects you

• how data moves through your program

Data types are not trivia. They determine:

• how values are stored

• how they are compared

• how bugs appear

If you deeply understand primitives, scope, and reassignment rules, you eliminate 60% of beginner JavaScript mistakes before they happen.

Master this layer first. Everything else builds on it.