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:
- Addition (
+
) – Adds two numbers.
Example:5 + 3
→8
- Subtraction (
-
) – Subtracts one number from another.
Example:5 - 3
→2
- Multiplication (
*
) – Multiplies two numbers.
Example:5 * 3
→15
- Division (
/
) – Divides one number by another.
Example:6 / 3
→2
- Modulus (
%
) – Gives the remainder of a division.
Example:5 % 2
→1
Comparison Operators
Ever wondered how JavaScript decides if two values are the same or different? That’s where comparison operators come in.
- Equality (
==
) – Checks if two values are equal (but ignores type differences).
Example:'5' == 5
→true
- Strict Equality (
===
) – Checks if two values and their types match.
Example:'5' === 5
→false
- Inequality (
!=
) – Checks if two values are different (ignoring type).
Example:'5' != 5
→false
- Strict Inequality (
!==
) – Checks if two values and their types are different.
Example:'5' !== 5
→true
Logical Operators
These operators help JavaScript make decisions based on multiple conditions.
- Logical NOT (
!
) – Flips a value’s truthiness.
Example:!true
→false
- Logical AND (
&&
) – Returnstrue
only if both conditions are true.
Example:true && false
→false
- Logical OR (
||
) – Returnstrue
if at least one condition is true.
Example:true || false
→true
Assignment Operators
Instead of writing long expressions, assignment operators help keep things short and sweet.
- Addition assignment (
+=
) – Adds a value to a variable.
Example:x += 5
→ shorthand forx = x + 5
- Concatenation assignment (
+=
) – Joins strings together.
Example:str += ' world'
→ shorthand forstr = 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:
5 > 4
evaluates totrue
(because 5 is greater than 4).- Then
true > 3
is evaluated. Sincetrue
is treated as1
, the comparison becomes1 > 3
, which isfalse
.
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;
c = 5
is evaluated first.- Then
b = c
(which meansb = 5
). - Finally,
a = b
(which meansa = 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! 😀