facebook youtube pinterest twitter reddit whatsapp instagram

Operator in Javascript

Operators in javascript can either be used for logical expression where you connect two or more expressions and can be a comparison expression where you compare two values.

You can also use an operator for arithmetic expressions, assignment expressions, and even more.

In this guide, we would look at some operators, I won't cover all, but would go through some of them.

Below is a table of operators by precedence. When an operator has higher precedence, it means it would be executed first in an expression with more than one operator, and when the operator has lower precedence,  it won't be evaluated first if an only if other operators have higher precedence.

The following table summarizes the precedence and associativity (the order in which the operands are evaluated) of JavaScript operators, listing them in order of precedence from highest to lowest.

Left-associativity (left-to-right) means that it is processed from left to right, while right-associativity (right-to-left) means it is processed from right to left.

Where several operators appear together, they have equal precedence and are evaluated according to their associativity:

Table of operators by precedence

Precedence	Type of operation	    Associativity	Symbol/Operator
   21	            Grouping	                n/a	             (...)
   20	           Member Access	    left-to-right	      ... . ...
   ..	         Computed Member Access     left-to-right	      ... [ ... ]
   ..	        new (with argument list)       n/a	             new ... ( ... )
   ..	           Function Call	    left-to-right	      ... ( ... )
   ..	        Optional chaining	    left-to-right	         ?.
   19	      new(without argument list)    right-to-left	      new ...
   18	             post-increment,           n/a                    ... ++
                     post-decrement	       n/a	              ... --

   17            Logical Not                 right-to-left            ! ...
   ..            Bitwise Note                .............            ~ ...
   ..            Unary Not                   .............            + ...
   ..            Unary Negation              .............            - ...
   ..            Prefix Increment            .............            ++ ...
   ..            Prefix Decrement            .............            -- ...
   ..            typeof                      .............            typeof ...
   ..            void                        .............            void ...
   ..            delete                      .............            delete ...
   ..            await                       .............            await ...

   16            Exponential                 right-to-left            ... ** ...

   15	         Multiplication	             left-to-right	      ... * ...
                 Division	             .............            ... / ...
                 Remainder	             .............            ... % ...

   14	         Addition	             left-to-right	      ... + ...
                 Subtraction	             .............            ... - ...

   13	         Bitwise Left Shift	      left-to-right	      ... << ...
                 Bitwise Right Shift	      .............           ... >> ...
                 Bitwise Unsigned Right Shift .............	      .. >>> ...

   12	         Less Than	              left-to-right	      ... < ...
                 Less Than Or Equal	.     .............           ... <= ...
                 Greater Than	              .............           ... > ...
                 Greater Than Or Equal	      .............           ... >= ...
                 in	                      .............           ... in ...
                 instanceof	              .............           ... instanceof ...

   11	         Equality	              left-to-right	      ... == ...
                 Inequality	              .............           ... != ...
                 Strict Equality	      .............           ... === ...
                 Strict Inequality	      .............           ... !== ...

   10	         Bitwise AND	              left-to-right	      ... & ...

    9	         Bitwise XOR	              left-to-right	      ... ^ ...

    8	         Bitwise OR	              left-to-right	      ... | ...

    7	         Logical AND	              left-to-right	      ... && ...

    6	         Logical OR	              left-to-right	      ... || ...

    5	         Nullish coalescing operator  left-to-right	      ... ?? ...

    4	         Conditional	              right-to-left	      ... ? ... : ...

    3	         Assignment	              right-to-left	      ... = ...
                                                                      ... += ...
                                                                      ... -= ...
                                                                      ... **= ...
                                                                      ... *= ...
                                                                      ... /= ...
                                                                      ... %= ...
                                                                      ... <<= ...
                                                                      ... >>= ...
                                                                      ... >>>= ...
                                                                      ... &= ...
                                                                      ... ^= ...
                                                                      ... |= ...
                                                                      ... &&= ...
.                                                                     .. ||= ...
                                                                      ... ??= ...

    2	         yield	              right-to-left	              yield ...
     	         yield*	                                              yield* ...

    1	         Comma / Sequence     left-to-right	              ... , ...

If several operators appear on the same line or in a group, they have equal precedence. An expression can contain several operators with equal precedence. When several such operators appear at the same level in an expression, evaluation proceeds according to the associativity of the operator, either from right to left or from left to right.

The difference in associativity comes into play when there are multiple operators of the same precedence level.

Let's see some example, suppose you have the following:

(5 + 15 * 3);     // => 50
(5 + (15 * 3));   // => 50: it is going to evaluate whatever is in the parentheses first cos it has higher precedence
((5 + 10) * 3);   // => 45 because the parentheses change the order, and since it has higher precedence, it would be evaluated first

Assignment operators are right-associative, so you can write:

a = b = 1;                           // same as writing a = (b = 1);

First, b is set to 1. Then the a is also set to 1, the return value of b = 1, aka right operand of the assignment. This is given by the associativity rule, so, you can cross check the table for reference.

Whenever you are confused about the precedence, you can always use parenthesis to force the orderliness. In short, always use parenthesis to avoid creating unwanted bugs, and it can also make your code clearer.

Operand and Result Type

As we've seen in our previous guide, an operator can typically work on values of any type, take for example, if you are doing string "5" + number 6, JavaScript would convert the operands to numbers. The value of this expression is the number 11, not the string “11”, so, in disguise, the operator expects the value to be of a specific type, so, if you have a different type that isn't supported by the operator, JavaScript would try to help you convert it into a supported type.

Equality and Inequality Operators

The equality operators can be written in two ways, the first one is the less strict equality: == and the second is the strict equality === They both check whether two values are the same, using two different definitions of sameness.

Both operators accept operands of any type, and both return true if their operands are the same and false if they are different. The difference between the two is that the strict equality checks whether its two operands are identical as in both the types of data and value.

While the other which is mostly known as equality operator would only check the exactness of the value.

Inequality operators are != and !== which test for the exact opposite of the == and --- operators. The != inequality operator returns false if two values are equal to each other according to == and returns true if otherwise, while the !== operator returns false if two values are strictly equal to each other and return true otherwise.

There is one thing to point out about strict equality, look at the following expressions:

0 == -0              // => true
0 === -0            //  => true

The explanation as to why it is equal is beyond the scope of this guide, but if you ever want to differentiate it, you can use the object.is method as follows:

Object.is(0,-0)            // => false

Comparison Operator

Comparison operators are generally used to compare two values or operands, and thus produces an output based on the evaluation of the expression. It is that simple.

Here are some examples:

$j < $kLess ThanTRUE if $j is less than $k
$j > $kGreater ThanTRUE if $j is greater than $k
$j <= $kLess Than or Equal ToTRUE if $j is less than or equal to $k
$j >= $kGreater Than or Equal ToTRUE if $j is greater than or equal to $k

Note: = is not the same as ==, the first one is for assignment, e.g assigning values to a variable, and the latter is for equality.

Note that the + operator and the comparison operators behave differently for numeric and string operands. + favors strings: it performs concatenation if either operand is a string. The comparison operators favor numbers and only perform string comparison if both operands are strings:

12+ 2          // => 14: addition.
"1" + "2"      // => "12": concatenation.
"1" + 2        // => "12": 2 is converted to "2".
11 < 3         // => false: numeric comparison.
"11" < "3"     // => true: string comparison.
"11" < 3       // => false: numeric comparison, "11" converted to 11.
"three" < 3    // => false: numeric comparison, "three" converted to NaN.

The Conditional/Ternary Operator (?:)

The ternary operator is a conditional operator that can provide handy shortcuts when testing conditions of a value.

An expression x ? y : z evaluates to y if the value of x is true, and if false, it evaluates z. If you quickly want to grab the syntax, then you can think of it as if x is true, evaluate y, else z.

The ternary operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.

Consider the following example:

let age = 23;
let beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage);                                       // => "Beer

This is like saying, if age is greater than 21, then output "Beer", otherwise, "Juice".

You can also chain it together like so:

let age = 60;
let beverage = (age <= 50) ? "Beer"
             : (age <= 13) ? "Water"
             : (age <= 17) ? "Juice"
             : "Nothing For You"

console.log(beverage);                                       // => "Nothing For You"

Anything above 50, would default to "Nothing For You"

This is similar to if..else if...else:

let age = 40;
if (age <= 50) { beverage = "Beer" }
    else if (age <= 13) { beverage = "Water" }
    else if (age <= 17) { beverage = "Juice" }
    else { beverage = "Nothing For You" }


I prefer the ternary operator, but it's your choice which ever you end up using.

Nullish coalescing operator (??)

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand.

This is similar to logical OR(||) operator in that it evaluates its second operand if the first operand evaluates to null or undefined. In other words, if you use || to provide some default value to another variable $myVar, you may encounter unexpected behaviors if you consider some falsy values as usable (eg. '' or 0).

For example:

let $myVar = null ?? "A default string";
console.log($myVar);                       // => "A default string"

If the value of the $myVar is null, it would assign the value in the right hand("A default String"), now, consider the following example:

let $myVar;
$myVar ?? "A default string";
console.log($myVar);                // => undefined

This would give you undefined because you have already declared the variable, and you are using a Nullish coalescing withouting doing a new assignment as we've done in the first example, you can use this if for example, you don't want to replace the value of the variable, something like this:

let $myVar;
$myVar ?? "A default string";        
 // => "A default string"

But, if you want to replace the value of the variable, make sure you are using the Nullish coalescing operator in the assignment:

let $myVar = null ?? "A default string";
console.log($myVar);                       // => "A default string"

A common way among programmers when assigning default value to a variable is to use the logical OR operator (||):

let myvar;

let someDummyText = myvar || 'Hello!';

Note that myvar is never assigned any value so it is still undefined. The interesting thing here is that || is a boolean logical operator, and the left hand-side (myvar) is also undefined, JavaScript would assume you are trying to use a boolean evaluation, which would then cause it not to return anything. In short, any falsy value (0, empty string(' '), NaN, null, undefined) will always return nothing in this scenario

And this may cause unexpected consequences if you consider 0, '', or NaN as valid values.

More examples:

let num = 0;
let strng = "";

let qty = num || 22;
let message = strng || "Hey!";

console.log(qty);                              // => 22 and not 0
console.log(message);                         //  =>"Hey!" and not ""

The num || 22 actually means, if num variable has a false value, assign 22 to qty. Since it see num has a value of "0" it says, oh, you are using a boolean logical OR, and I might as well convert 0 to false, this would act the same for all falsy values, which is why the variable message was passed "Hey!" even if we have thought it shouldn't.

The nullish coalescing operator avoids this pitfall by only returning the second operand when the first one evaluates to either null or undefined (but no other falsy values):

let mystng = ''; // An empty string (which is also a falsy value)

let notfalsy = mystng || 'Hey';
let preservingFalsy = mystng ?? 'Hi brah';

console.log(notFalsy);                 // => Hello world
console.log(preservingFalsy);          // => '' (as mystng is neither undefined nor null)

The ?? operator is similar to the && and || operators but does not have higher precedence or lower precedence than they do. If you use it in an expression with either of those operators, you must use explicit parentheses to specify which operation you want to perform first:

(x ?? y) || z               // => ?? first, then ||
x ?? (y || z)               // => || first, then ??
x ?? y || z                //  => SyntaxError: parentheses are required

This is a new operator and it is defined bt ES2020, so, you might want to use a polyfill when using this.

Let's round up this guide with...

The Comma Operator (,)

The comma operator is a binary operator whose operands may be of any type. It evaluates its left operand, evaluates its right operand, and then returns the value of the right operand.

This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions.

You will mostly use this in a for loop.

For example:

a=3, b=5, c=8;

This gives you 8. I no it doesn't make much sense now, but I'll cover it more in depth coming section.

Related Post(s)

  • Getting Started With JavaScript (Introduction)

    This is my first JavaScript guide on this blog, and in this guide, we would go over the introduction of JavaScript, but first… What is JavaScript? JavaScript is a client-side scripting language su

  • Exploring Data Types, and Variables in JavaScript

    In JavaScript or any programming language, a data type is an attribute of data that tells the interpreter how the programs intend to use the given data. JavaScript support a couple of data type whic

  • Creating a Loader and Remove it After a Specific Time Using JavaScript/CSS/SVG

    In this guide, we would create a loader, and remove it after a specific time using CSS and JavaScript. The icon would be in SVG format, and the rotation would be done in CSS, while the removal after

  • Object Oriented Programming in JavaScript (The ES5 Way)

    In this guide, you'll learn and understand how to create and use Objects in JavaScript (ES5). While ES6 already supports creating classes (which is the way you create objects in Java, PHP, etc), they

  • Working With The Local & Session Storage In JavaScript

    We previously take a deep dive into the Windows Object, Properties, Methods, and even the Document Object itself, in this guide, we would explore working with the local and session storage in JavaScr

  • Guide To Functions In JavaScript

    Functions in JavaScript or any programming languages are modular building blocks for creating powerful and modular scripts, using function makes it easy to isolate a code since it would be packaged u