JavaScript 101: A Beginner's Guide to JavaScript Operators

Alright, now that you know a bit about how control flow works, let’s spice things up a bit. In this article, I’ll show you a bit about which operators we have in JavaScript which will really level up how you control your code’s flow

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 twice with a remainder of 1.

Finally, we get the unary arithmetic variants which are used to either increase/decrease or to transform values to number 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.

That’s… it, for now

I say this because even though these are the more common operators that we use in JavaScript, they are not the only ones. I may go for more advanced operators later in this series but for now this is where I’ll leave it.

This should place you prepped to start working with code and to use everything you’ve learned throughout it. Coming next in the JavaScript  101 series I’ll be taking you through loops. Specifically the usage of for, while, and do while