Skip to main content

JS Operators

Why#

JavaScript includes operators as other languages do. An operator performs some operation on single or multiple operands (values) and produces a result.

For example 1 + 2, where the (+) sign is an operator and 1 is the left operand and 2 is the right operand.

The (+) operator adds two numeric values and produces a result which is 3 in this case.

1 + 2; // 3
20 + 89; // 109
// ...etc operations performed on one or more values

What#

JavaScript operators are divided into three main groups based on the number of operands and operators. There are unary and binary operators, as well as a special ternary (or conditional) operator.

Unary Operators#

A unary operator requires a single operand, either before or after the operator:

// operator operand
typeof "Frodo"; // "string"

Binary operators#

A binary operator requires two operands, one before the operator and one after the operator:

// operand operator operand;
1 + 1;

The primary types of binary operators are:

  • Assignment Operators

    Assignment operators are used for assigning values to variables.

    *The most common assignment operator is the (=) sign

    let name = "Frodo";

  • Arithmetic Operators

    Often, the logic we write requires and/or is enhanced by common arithmetic. Arithmetic involves one operator between two operands.

    12 * 365.25; // 4383

  • Comparison Operators

    A comparison operator compares the operands and returns a value based on whether the comparison is true or false.

    1 < 2; // true

  • Logical operators

    A logical operator is used to compare two expressions. This typically returns a boolean value.

    isOnline && isActive; // true if both operands are true

How#

Arithmetic operators#

  • Addition

    1 + 2; // 3

  • Subtract

    1 - 2; // -1

  • Multiplication

    1 * 2; // 2

  • Divide

    1 / 2; // 0.5

  • Modulus/ Division Remainder

    3 % 2; // 1

  • Exponentiation

    2 ** 4; // 16

  • Increment (post/pre)

    let i = 1;
    let o = 1;
    i++;
    o--;
    i; // 2
    o; // 0

Concatenation#

Concatenation involves combining two strings operands together with the + operator.

let firstName = "Bilbo";
let lastName = "Baggins";
let fullName = firstName + " " + lastName; // Results in "Bilbo Baggins" as a single string

Comparison Operators#

  • Loose Equality ==

    2 == 2; // true
    2 == "2"; // true

  • Loose Inequality !=

    2 != 2; // false
    1 != "2"; // true

  • Greater Than >

    2 > 1; // true
    2 > "1"; // true

  • Less Than <

    2 < 1; // false
    2 < "10"; // true

  • Equal to or Greater Than <=

    2 >= 1; // true
    2 >= "2"; // true

  • Equal to or Lesser Than >=

    2 <= 2; // true
    2 <= 20; // true

  • Strict Equality ===

    The strict equality operator checks whether two operands are equal, returning a Boolean result. Unlike the loose equality operator, the strict equality operator always considers operands of different types to be different.

    2 === 2; // true
    2 === "2"; // false

  • Strict Inequality !==

    2 !== 1; // true
    2 !== "2"; // true

Logical operators#

  • Logical AND &&

    Logical AND returns true only if both operands equate to true. Otherwise, it returns false.

    true && 2 + 2 == 4; // true
    true && false; // false

  • Logical OR ||

    Logical OR returns true only if one or more operand equates to true. Otherwise, it returns false.

    false || 2 + 3 == 4; // false
    true || false; // true

  • Logical NOT !

    Logical NOT returns the opposite Boolean value from what an operand equate to.

    !true; // false
    !(2 + 2 == 4); // false

Type Coercion, and Truthy and Falsy Values#

Type Coercion is the process of converting, or coercing, a value type from one data type to another to perform an action. We will see this quite often in JavaScript. In fact, the only operations where type coercion can not happen is with strict equality and strict inequality.

For example, let's say we are attempting to add numbers together. One of the values is as we expect: a number value. However, the other value is a string. This creates a problem. You cannot work arithmetic with strings, because arithmetic must involve numbers. So, JavaScript uses type coercion to resolve the problem for you.

let x = 10;
let y = "11";
let result = x + y; // attempting to add a number and a string to get a sum
console.log(result); // Prints "1011" ????

But JavaScript gives us a string of "1011" as the result? Evidently type coercion changed the one number value to a string to perfom concatenation. In fact, type coercion always chooses concatenation if you have two operands (at least one of them a string value) and a + operator.

Now let's finish this example by looking at other arithmetic operators.

let x = 10;
let y = "11";
let result = x - y; // attempting to subtract a number and a string to get a result
let comparison = x > y; // attempting to check if x is greater than y
console.log(result); // Prints -1
console.log(comparison); // Prints false

We changed the addition to subtraction and we actually get a number result. That's because - is used in arithmetic only, and JavaScript clearly knows that you are attempting arithmetic, so both operands need to be numbers.

We also added a comparison operation between 10 and "11". JavaScript correctly changed the data types to perform the comparison.

Now let's take a look at how Javascript uses type coercion when checking equality:

  1. Loose Equality, which enables type coercion
  2. Strict Equality, which disables type coercion

For example:

1 == "1"; // true, due to type coercion
1 === "1"; // false, since string values cannot equal number values

We cannot do this with arrays however, even if 2 arrays have the same exact contents, both arrays point to different places in memory:

[1, 2, 3] == [1, 2, 3]; // false, two DIFFERENT arrays with the same values

As well as a data type, each value also has an inherent Boolean value, generally known as either truthy or falsy.

According to the Mozilla Developer Network,

A falsy value is a value that is considered false when encountered in a Boolean context.

Falsy Values#

The following all have boolean value of false:

  • false
  • 0
  • 0n
  • "" , '' , ``
  • null
  • undefined
  • NaN - Not A Number

For Example:

let num = 0;
if (num) {
console.log("num is true");
} else {
console.log("num is false");
}
// Would log "num is false", since 0 is inherently false

All other values are considered “truthy”

if (1) {
console.log("truthy");
} else {
console.log("falsy");
}
if ([]) {
console.log("truthy");
} else {
console.log("falsy");
}
if ("false") {
console.log("truthy");
} else {
console.log("falsy");
}
// All of the above examples would log "truthy"

Knowing how JavaScript will evaluate values in certain contexts, it can be extremely useful to include truthy/falsy values in our programs.

Takeaways#

  1. Operators are symbols that initiate an operation between one or more values
  2. JS Operators include arithmetic, assignment, logical and comparison
  3. All data types have an inherent Boolean value called truthy or falsy
  4. Binary operations must be performed on the same data types. JavaScript will use type coercion to change the data types of values in operations if two operands are different.