JavaScript for Noobs Pt. 2: Operators

Before we dive into the meat of JavaScript (functions, control structures, closure, and more-big-words), you should know the different operators used here. If you paid attention during your Computer Science course, it should be relatively easy to remember. If you don’t, fret not. We’re going over them anyway (as fillers to maintain the article length — shutup)

Why do we need to learn operators, you might (or might not — probably not) ask? An operator is something that tells your computer to perform certain basic actions (mathematical, logical, conditional, etc.) on some data, called operands. To understand this better, in the statement x + y, x & y are called the operands and + is called the operator. Capeesh?

Simply put, if we didn’t learn about operators, we may never be able to add two numbers. That is enough reason right there.

Operators

Arithmetic

var a = 10;
var b = 20;
console.log("Addition: ", a + b); // Addition:  30
console.log("Subtraction: ",a - b); // Subtraction:  -10
console.log("Multiplication: ", a * b); // Multiplication:  200
console.log("Division: ", a / b); // Division:  0.5
console.log("Modulus: ", a % b); Modulus:  10

Quite self-explanatory.

The assignment operator… is pretty obvious. It’s the = sign. For objects however, keys are assigned values using the : sign.

var obj = {
   key: "value"
}

There are also sort of “compound” assignment operators, as given below;

var x = 10;
var y = 20;
x+=y; // equivalent to x = x + y;
console.log(x); // 30 

Easy enough. These compound assignment operators work with all of the above arithmetic operators.

Note that most of the arithmetic operators work on the number type. On strings and other data types, these either throw errors or do something weird, like your string can become a sweater. We can’t predict.

There are two more arithmetic operators, called the increment (++) and decrement (- -) operators, which work by adding a double plus or a double minus sign at the start or end of the variable/value. They increment or decrement depending on the operator used.

Simple, right? WRONG.

var x = 0;
console.log(x++); // 0
console.log(x--); // 1
var y = 0;
console.log(++y); // 1
console.log(--y); // 0
// what the hell?

At first glance, adding a post-increment operator x++ should output 1, since it is supposed to increment the initial value of x by 1, making the output… 1. The same as for the pre-increment operator ++y, which does output 1. What’s going on here?

So, when you use a post-increment or a post-decrement operator, it outputs the initial value and then increments or decrements accordingly, and then assigns it. When you use a pre-increment or a pre-decrement operator, it first computes the value, assigns it to the variable, and then outputs the value. To drive home this concept further, let’s refactor (write again) the code a little bit,

var x = 0;
x++;
console.log(x); // 1
x--;
console.log(x); // 0
var y = 0;
++y;
console.log(y); // 1
--y;
console.log(y); // 0
// hmmmm...

There, now the output seems more like how it should be. Here’s what’s happening:
When we execute x++, it first outputs the value. But since there is nothing to output the value to, it proceeds along with the increment and assignment of a new value. When we log the variable in the next line, we get the expected output of 1, as the assignment was already done on the previous line. The same holds true for the rest of the code.

Moral of the story: Don’t mess up your increment & decrement operators, unless you’re okay with getting fired over a surprising memory leak. All because you didn’t listen to me.

Comparison

Used when you need to compare two values (duh). When you compare the values, be it number, boolean, string, or even objects, you always get a boolean result.

var x = 10;
var y = 20;
console.log("x greater than y? ", x > y); // false
console.log("x lesser than y? ", x < y); // true
console.log("x greater than or equal to y? ", x  >= y); // false
console.log("x lesser than or equal to y? ", x  <= y); // true
console.log("x equal to y? ", x  == y); // false
console.log("x very much equal to y? ", x  === y); // false
console.log("x not equal to y? ", x  != y); // true
console.log("x not very much equal to y? ", x  !== y); // true

The operators are pretty self-explanatory, so I’ll just jump to the interesting ones, viz. equal to == and very much equal to === *.

The difference between the two is that, equal to compares the values, irrespective of type. Which means, if the two operands have the same value, even though they are of different types, the comparison will return true. With very much equal to, the comparison also checks the type of the value being compared. Which means; if the two operand values are the same, but have different types, the comparison will return false. To illustrate,

var x = 10;
var y = "10";
console.log(x==y); // true
console.log(x===y); // false

Remember, 10 is a number, while “10” is a string.

* Okay so it’s not actually called “very much equal to”, but let me see you try to explain === to yourself. DO IT.

Conditional

While the arithmetic operators work with at least 2 operands the conditional operator (yeah, there’s just one. Thank heavens for that) requires 3.

The first operator is a statement that should resolve to (meaning you should get) a boolean value, and on the base of that value, either the second operator will execute, or the third one will. As an example,

var x = 100;
var y = 101;
x > y ? console.log("X greater than Y") : console.log("Y greater than X"); // Y greater than X

Kinda translates down to, if x is greater than y, print "X greater than Y" else print "Y is greater than X"

Logical

We have three logical operators, the logical AND &&, logical OR ||, and logical NOT !.

Much like their mathematical counterparts, these operators also compare the truth values of their operands and resolve it to a single boolean value. In the case of JavaScript, these operators work on the truthy and falsy values of the operators and resolve to the last value evaluated, be it truthy or falsy. Since the evaluation is done left to right, the rightmost value is returned back as a result. These are especially used with the conditional operator or the conditional statements, to compare multiple variables and values.

var x = "some string";
var y = null;
var z;
var a = 10;
var b = 10;
var combinedResult = (a-b) && x && y || (!y && !null);
console.log(combinedResult); // true

Breaking this down,

1. (a-b) returns 0, which is a falsy value
2. x is a non-empty string, which is truthy
3. y is not, which is falsy
4. Since y is null, using the NOT ! operator on it resolves it to true, which is what happens with the value null as well.
5. Evaluating from left to right, the result is derived as follows,

false && true && false || (true && true)
false && false || true
false || true
true 

In programming, anything that has a value is considered to be a truthy value, and anything that has no value, or a false value is considered to be a falsy value. For JavaScript, this means that null, undefined, 0, "", andfalseare considered to be falsy values, and everything else (even [] and {}) are considered to be truthy values. This is important to know, since nearly all of the JavaScript operators and control structures work on the concept of truthy-falsy values.