Arieh.co.il

Javascript Guide - Operators

You can now also navigate the guide through the table of contents.

In the previous post we learned about variables. In this post, we will learn about the various operators JS provides for handling them.

What are operators?

Operators are special signs with which we perform operations on our variables. The basic set of operators are the mathematics operators - + , - , * , / but there are quite a few more. In this post, I'm going to introduce you to some of the more common operators, and how we use them on the various types.

Comparison Operators

The most basic, and the most common operators are the comparison operators, which allow us to compare the values of our variables. A comparison operation always returns a Boolean value - true or false.

Operator What it does Example
== This is the most basic comparison operator. It checks that 2 values are equal. If these values are of a different type, it will attempt to convert them to the same type, and only then compare them.
                   console.log(1==1);//true
                   console.log(1==2);//false
                   console.log(1==true);//true
                
run code
!= Checks if 2 values are not equal. If these values are of a different type, it will attempt to convert them to the same type, and only then compare them.
                console.log(1 != 2); //true
                console.log(1 != 1); //false 
                console.log(1 != false); //true
                
run code
=== Checks if 2 values are of the same type and are equal
                    console.log(1===1); //true
                    console.log(1 === true); //false
                    
run code
!== Checks if 2 values are of the same type or that they are not equal
                    console.log(1 !== true); //true
                    console.log(1 !== '1'); //true
                    
run code
&& Checks that 2 (or more) arguments are true.
                    console.log(true && true); //true
                    console.log(true && false);  //false
                    console.log(1==1 && 'a'=='a');  //true
                    
run code
|| Checks if at least one of two or more arguments are true (from left to right)
                    console.log(true || false); //true
                    console.log(false || true);  //true
                    console.log(1==1 || 'a'=='b'); //true
                    
run code

There are also the usual comparison operators from math - > , < , >= , <= which do what you expect of them.

Arithmetic operators

The arithmetic operators are quite generic - + , - , * , / and can only be used on numbers. But there are a few tricks we should know about:

  1. The + operator has a second use - concatenating strings. When used on strings, the operator will append the second string to the first one (for example 'a'+b' == 'ab'). Also - and this is important, when using the + operator on a number and a string, it will convert the number into a string.

  2. All other operators, aside from +, when used with any other type, they will try to convert that type to a number (more on type conversion later in this post).

  3. There are special operators for incrementing and decrementing numeric values - ++ and --

    The basic use is simple -

                    var a = 1;
                    a++;
                    console.log(a); //2
                    a--;
                    console.log(a); //1
                
    run code

    But - there is a very important part that we need to know about these - they can be used before and after the variable, and although the result might seem the same, they are very different.

    The key difference is with the returned value of the operation. When used before the variable, it will first perform the operation, and only then return it's value. But if used after, it will return the variable's value, and only then perform the operation. Again - it's best illustrated with an example:

                    var a = 1;
                    console.log(++a);//2
                    console.log(a);//2
                    console.log(a++);//2
                    console.log(a);//3
                
    run code
  4. There is a short hand syntax for performing operations on variables - the X= operators:

                        var a =1;
                        a+=1; 
                        console.log(a);
                        
    run code

    This syntax can be used for all the above operators.

Type conversion operators

Last (for now) but not least, are the type conversion operators:

  1. !! the binary converter. When used, it will convert the value to boolean. It is the same as doing a==true.
  2. As mentioned before, all math operators can be used to convert a variable to a number. The standard way is to do +a, but any of the numeric operators will perform that operation.
  3. For string conversion, use this trick: remember that I mentioned before that using with a string will convert a number to a string? Well, this will work on any type. So, doing ""+a will be enough to convert any variable to a string.

A very important note:

Before we move on, there is something that you need to understand about the way Javascript handles typing: Javascript is a dynamic, loosely-typed language. Now what does that mean?

Dynamic

Variables in JS can switch types along the way. so if I do

        var a = 'a';
        a=['b','c'];
        console.log(a);
    
run code

Everything is fine. This might seem obvious to you, but in fact, most classic programming languages are strict-typed, which mean that a variable is always declared with a specific type, and cannot be changed.

Loosely-typed

This will make more since after the next post on operators, but remember this - javascript allows us to perform operations on variables of different types, and will, transparently, attempt to convert the types of our variables when needed. This is a powerful concept, but it is also risky. This means that every type in JS can be converted to another, and it is up to us to remember what these values are.

For this reason, unless we are sure that we know what to expect, we should always prefer the === and !== operators.

Next post - control structures.

JavaScript Reference, JavaScript Guide, JavaScript API, JS API, JS Guide, JS Reference, Learn JS, JS Documentation