Operators and Equality in Javascript

JavaScript , Wed Dec 28 2022

    Operators

    We know many operators from school. They are things like addition +, multiplication *, subtraction -, and so on.

    In this chapter, we'll concentrate on aspects of operators that are not covered in school.

    As all other programming languages, JavaScript includes operators as well. An operator performs some operation on single or multiple operands (data value) and produces a result.

    For example 1 + 2, where + sign is an operator and 1 is left operand and 2 is right operand. + operator adds two numeric values and produces a result which is 3 in this case.

    JavaScript includes following categories of operators.

    1. Arithmetic Operators
    2. Comparison Operators
    3. Logical Operators
    4. Assignment Operators
    5. Conditional Operators

    In the next few pages, we're going to explore all of these operators in detail.

    Arithmetic Operators

    Arithmetic operators are used to perform mathematical operations between numeric operands.

    We know many of them from from school. They are things like addition +, multiplication *, subtraction -, and so on. Arithemtic operators are something that we've all used before.

    If we'd want to perform a mathematical operation, we'd want to use arithmetic operators.

    Arithmetic operators perform arithmetic on numbers (literals or variables).

    • + Addition
    • - Subtraction
    • * Multiplication
    • / Division
    • () Grouping operator
    • % Modulus (remainder)
    • ++ Increment numbers
    • -- Decrement numbers

    // addition, subtraction, multiplication
    5 + 5;
    5.5 - 5
    5 * 2;

    // division, modulo operator
    11 / 2;
    11 % 2;

    // increment, decrement 5++;
    4--

    // exponentiation
    4 ** 2

    Pretty straight forward right? Let's move on to comparison operators!

    Comparison Operators and Equality

    As you've already heard of arithmetic operators, the same goes for comparison operators. You've most likely heard of greater than >, less than < or equal too ==.

    Comparison Operators compare two values and return boolean value true or false.

    That sentence is the main takeaway. If you understand that you're good to go!

    The return value of a comparison operator is ALWAYS going to be a boolean value.

    The topic of Equality in JavaScript is closely connected to the comparison operators - I've got you covered there as well.

    const a = 5;
    const b = 5;

    // we can test whether a value is greater than the other value
    console.log(a > b);
    // we can also test whether a value is greater than or equal to the other value
    console.log(a >= b);
    // looks like I have a font installed so for me, it's going to look like on sign,
    // but i's two. The greater than sign, and then imidiately the equality sign.

    // we can test whether a value is less than the other value
    console.log(a < b);
    // we can also test whether a value is less than or equal to the other value
    console.log(a <= b);

    // finally, we have the equality operators,
    // we can test whether a value is equal
    console.log(a == b);
    // we also test whether a value is not equal
    console.log(a != b);

    // what you're going to see more often are going to be the strict equality
    // and strict inquality operators. They look like this.

    // strict equal, strict not equal console.log(a === b);
    console.log(a !== b);

    Everything that we've covered is pretty straight forward. The only thing that I'd like to take a deeper look at is the strict vs loose equality. What are the differences and when should we use each option? Let's cover that next!

    Strict vs Loose Equality

    Equality is a fundamental concept in JavaScript. We say two values are equal when they are the same value. For example:

    console.log('JSM' === 'JSM'); // true
    console.log(2 === 2); // true

    Note that we use three equal signs to represent this concept of equality in JavaScript.

    JavaScript also allows us to test loose equality. It is written using two equal signs. Things may be considered loosely equal even if they refer to different values that look similar, an example would be the following:

    console.log(5 == "5"); // true

    Strict equality using ===

    The strict equality method of comparison is a preferred option to use because it's behaviour can be easily predicted, which leads to less bugs and unexpected results.

    The JavaScript interpreter compares the values as well as their types and only returns true when both are the same.

    console.log(20 === "20"); // false

    The code above will print false because even though the values seem to be the same, they are of different types. The first one is of type String and the second is of type Number.

    Strict equality using ===

    Here's just one short thing that I wanted to show you. If we strictly compare objects, we're never going to get true. Let's test it out:

    console.log({} === {}); // false
    // we get false, even though they have the same type and content, weird
    // the same thing happens for arrays as they are actually objects under the hoo
    console.log([] === []); // false

    Strict equality using ===

    For the sake of simplicity, we're not going to go into to much depth about non-primitive data types like objects and arrays. That is a rather complex topic on it's own. Because of that, later in the ebook we have a whole separate section called Value vs Reference.

    In there we're going to explore the mentioned inconsistencies of the equality operator.

    Now let's move on to the loose equality.

    Loose equality

    We write loose equality using double equal sign. It uses the same underlying logic as the Strict equality except for a minor, yet huge, difference.

    The loose equality doesn't compare the data types. You should almost never use the loose equality.

    Douglas Crockford's in his excellent book called JavaScript: The Good Parts wrote:

    JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=.

    The good ones work the way you would expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false.

    The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to change the values. The rules by which they do that are complicated and unmemorable.

    These are some of the interesting cases:

    '' == '0' // false
    0 == '' // true
    0 == '0' // true

    false == 'false' // false
    false == '0' // false

    false == undefined // false
    false == null // false
    null == undefined // true

    Here are a few more examples: →

    Using the == operator // true, because 'true' is converted to 1 and then compared
    true == 1;
    // true, because the string of "5" is converted to the number 5 and then compared
    5 == "5";
    Using the === operator true === 1; // false
    5 === "5"; // false

    That's exactly how it should be. On the other hand

    5 == "5"; // true

    This isn't and should never be equal. "5" is a string, and should be treated like that. As I mentioned, most of the JavaScript developers completely avoid loose equality and rely only on the strict equality. It is considered a better practice and it causes less bugs.

    And for the end, I found for you a great visual representation of strict versus loose equalities:

    As you can see, using the loose equality we get these green boxes all over the place. They're unpredictable. But if we switch to the strict equality, we get this nice predictable line.

    So what's the moral of the story?

    Always use three equal signs.

    Logical Operators Part 1

    Logical operators are used to combine two or more conditions. JavaScript includes three logical operators:

    • && AND
    • || OR
    • ! NOT

    Complete knowledge of logical operators requires the knowledge of if/else statements and truthy and falsy values.

    For now we're just going to cover the syntax of logical operators and then we're going to come back to them to see them in full action after we cover the two mentioned topics!

    And Operator (&&)

    Double ampersand && is known as AND operator. It checks whether ALL OPERANDS are truthy values (we're going to explain truthy and falsy values in one of the later videos). And if they are truthy, it returns true, otherwise it returns false.

    console.log(true && false) // false
    console.log(true && true) // true
    console.log(false && false) // false

    We can also pass multiple conditions:

    console.log(true && true && false) // false
    Or Operator (||)

    Double ampersand || is known as OR operator. It checks whether AT LEAST ONE OPERAND is a true value. And if there is at least one true, it returns true, otherwise it returns false.

    console.log(true || false) // true
    console.log(true && true) // true
    console.log(false && false) // false

    We can also pass multiple conditions:

    console.log(true || true || false) // true
    Not Operator (!)

    An exclamation sign ! is known as NOT operator. It reverses the boolean result of the condition.

    The syntax is pretty simple:

    console.log(!true) // false
    console.log(!false) // true

    As you can see, the not operator simply converts boolean false to true, and boolean true to false.

    This was just an introduction to these logical operators. They are used really really often in real JavaScript applications and I'm exited to show you their real uses once we learn about if statements and truthy and falsy values!

    Assignment Operators

    We can also join the assignment operator with one of the arithmetic operators:

    let number = 5;

    number += 5; // the same as number = number + 5
    number -= 5; // the same as number = number - 5
    number *= 5; // the same as number = number * 5
    number /= 5; // the same as number = number / 5

    console.log(number);

    The addition assignment can also be used with strings! Let me show you:

    let string = 'Hello';
    string += ', I am John.';
    console.log(string); // "Hello, I am John."

    That's it when it comes to assignment operators, you're basically a pro at them! :)