Josh Writes

Small boy with big dreams.

Operators, the bare bones of JavaScript. (And how to use them.)

Hi everyone, welcome to today’s blog! We’re going to be learning about operators in JavaScript. they’re the bare bones of JavaScript and they are seen everywhere, from the simplest to the most complex code. Without holding you any further, let us dive into the lesson!

Oh and if you’re a more “visual” learner than watch my video here:

What Are Operators?

Think of JavaScript operators like the controls in your favorite video game. They help you make things happen—whether it’s adding numbers, comparing values, or making decisions in your code. If you’ve ever wondered how JavaScript does all its magic, you’re in the right place.


Basic Arithmetic Operators

These are the bread and butter of programming. If you’ve ever done basic math, you’ll feel right at home here:

  1. Addition (+) – Adds two numbers.
    Example: 5 + 38
  2. Subtraction (-) – Subtracts one number from another.
    Example: 5 - 32
  3. Multiplication (*) – Multiplies two numbers.
    Example: 5 * 315
  4. Division (/) – Divides one number by another.
    Example: 6 / 32
  5. Modulus (%) – Gives the remainder of a division.
    Example: 5 % 21

Comparison Operators

Ever wondered how JavaScript decides if two values are the same or different? That’s where comparison operators come in.

  1. Equality (==) – Checks if two values are equal (but ignores type differences).
    Example: '5' == 5true
  2. Strict Equality (===) – Checks if two values and their types match.
    Example: '5' === 5false
  3. Inequality (!=) – Checks if two values are different (ignoring type).
    Example: '5' != 5false
  4. Strict Inequality (!==) – Checks if two values and their types are different.
    Example: '5' !== 5true

Logical Operators

These operators help JavaScript make decisions based on multiple conditions.

  1. Logical NOT (!) – Flips a value’s truthiness.
    Example: !truefalse
  2. Logical AND (&&) – Returns true only if both conditions are true.
    Example: true && falsefalse
  3. Logical OR (||) – Returns true if at least one condition is true.
    Example: true || falsetrue

Assignment Operators

Instead of writing long expressions, assignment operators help keep things short and sweet.

  1. Addition assignment (+=) – Adds a value to a variable.
    Example: x += 5 → shorthand for x = x + 5
  2. Concatenation assignment (+=) – Joins strings together.
    Example: str += ' world' → shorthand for str = str + ' world'

String Concatenation & Type Coercion

Concatenation is just a fancy word for merging strings together.

console.log("Hello " + "World"); // Output: Hello World

But JavaScript sometimes does things behind the scenes, like converting numbers into strings when needed:

console.log(1 + "2"); // Output: "12" (number 1 turns into a string)

Operator Associativity

What happens when you mix multiple operators in one equation? JavaScript follows a set of rules called associativity to decide the order of evaluation.

Left-to-Right Associativity

Some operators are evaluated from left to right.

Example: The > (greater than) operator follows left-to-right associativity.

console.log(5 > 4 > 3);

Here’s what happens step by step:

  1. 5 > 4 evaluates to true (because 5 is greater than 4).
  2. Then true > 3 is evaluated. Since true is treated as 1, the comparison becomes 1 > 3, which is false.

Right-to-Left Associativity

Some operators, like =, work from right to left.

Example:

var num = 10;
  • First, 10 is evaluated.
  • Then, it’s assigned to num.

When multiple assignment operators appear:

var a, b, c;
a = b = c = 5;
  1. c = 5 is evaluated first.
  2. Then b = c (which means b = 5).
  3. Finally, a = b (which means a = 5).

Wrapping Up

If you’ve made it this far, congratulations! You now know how JavaScript operators work, from simple arithmetic to logical decisions and even how JavaScript determines which operation to evaluate first.

Whenever you’re unsure, just remember: precedence decides what happens first, associativity decides the direction. And if things get confusing, just use parentheses to make everything clear.

Now go forth and write some awesome code reader! 😀

Thanks for reading my blog!