JS107 - Types, =, ==, === and If

Some programming languages have 'statically typed variables'. When you create a variable, you have to say what type it is, and that determines how much memory it will allocate to that variable. It makes for much more efficient programs, but it also is a bit of a pain to do some simple things like turn "1" into 1.

In JavaScript, all of the converting between variables is done for you. This is quicker to program, but can get you in to trouble if you aren't careful.

var a;  
a = 1;  
a = "1";  
a = new Date();  
a = {};  
a = [];  

This is all prefectly valid - even in the same script, 'a' isn't hardcoded to be a string or a number, it is whatever it was last time you told it to equal something with =.

When you do math with a variable, it is converted to a number automatically:

var a = "10";  
console.log (a * 2); //20  
console.log (a / 2); //5  
console.log (a - 2); //8  

But "+" is used to 'add' strings together as well, so it doesn't know if you meant 10 the number or "10" the string.

var a = "5";  
console.log (a * 2); // 10  
console.log (a + 1); // 51  

This could be a problem if we wanted to get '11', and in that case 'statically typed' languages have an advantage (or languages like PHP which use "." to join strings and "+" to add numbers)

You as the programmer have quite a responsibility here, especially when working with other programmers.

As you know, 'a/2' will convert 'a' into a number. So will 'a/1'. So you could use 'a/1 + 1' above to make it work. There's a slightly better way.

var a = "5";  
console.log (a * 2); // 10  
console.log (a + 1); // 51  
console.log (1 + a); // 15  

The 'type' of the left hand of the '+' is used as the 'type' for the equasion, so the right hand is converted to the type of the left.

So how can we exploit this?

var a = "5";  

console.log (+a + 1); // 6  

Since there is nothing on the left of the + in the second line, the 'a' on the right is converted to a number. This is the 'normal way' of doing it in javascript. There's no reason it's better than a/1 or a*1, although perhaps division and multiplication may have negative performance impacts.

You can assign the result of '+a' to a variable, in fact you can assign it to 'a' itself and thus 'convert' it to a number:

var a = "5";  
console.log (a); // "5"  
a = +a;  
console.log (a); // 5  

And when you are writing a large application, it may be worth using a conversion on getters and setters to make REALLY sure they are numbers:

var Constructor = function() {  
  var a;  

  this.setA = function(newA)  
  {  
      a = +newA;  
  }  
}  

This isn't just strings, booleans are always converted to numbers:

console.log(true); // true  
console.log(true + 1); // 2  
console.log (1 + true); // 2  
console.log(1+true); // 2  
console.log(1+false); // 1  
console.log(true + true); // 2  
console.log(false - true); // -1  

= == ===

=

= assigns the value on the right to the variable on the left.

var a;  
a = 1;  
var b;  
b = a = 5;  
console.log(a); // 5  
console.log(b); // 5  

It starts on the right and works it's way back. So b = a = 5 means a = 5; b = a.

I hate b = a = 5. It works, but it is hard to read and easy to miss. It's probably worth just putting it on two lines.

==

== checks if the value on the left is equivalent to the value on the right.

// All True:  
console.log (1 == 1);  
console.log ("1" == "1");  
console.log (1 == "1");  
console.log ("1" == 1);  
console.log (1 == true);  
console.log (true == 1);  

// False:  
console.log (0 == true);  
console.log (-1 == true);  
console.log (-2 == true);  

===

Everything which is false with == is also false with ===.

=== won't convert for you. It makes sure that the 'type' is the same as well as the 'value'

// True:  
console.log (1 === 1);  
console.log ("1" === "1");  

// False:  
console.log (1 === "1");  
console.log ("1" === 1);  
console.log (1 === true);  
console.log (true === 1);  

If

If statements aren't the same as '== true'. 'if (a == true)' will check if 'a' evaluates to true as above, but some of the results of 'if' are a little less obvious. We call things which evaluate to 'true' as 'truthy' and to false 'falsy'.

if ("a" == true)  
{  
   // This WONT run.  
}  

if ("a")  
{  
   // This WILL run.  
}  

so "a" does not equal true, but when used in an if statement it is 'truthy' because it it not null.

// All will run. They are truthy  
if ("a") { ... }         
if (['a']) { ... }       
if ([]) { ... }          
if ({'a':'a'}) { ... }   
if ({}) { ... }          
if ("0") { ... }  

// These won't run. They are falsy  
if (false) {...}         
if (-1) {...}  
if ("") {...}          
if (0) {...}  
if (null) {...}  
if (undefined) {...}  

Using ! before a truthy makes it falsy, and... yeah, the other way.
if (!false) {...} will run.

if (!!false) {...} won't run... etc etc.

Just for completeness sake:

if (0 > 0) { no }  
if (0 > 1) { no }  
if (1 > 0) { yes }  

if (0 < 0) { no }  
if (0 < 1) { yes }  
if (0 > 0) { no }  

if (0 >= 0) { yes }  
if (0 <= 0)="" {="" yes="" }
if (1 <= 0)="" {="" no="" }

if ("1" > 0) { yes }  
if ("0" > 0) { no }  
if ("-1" > 0) { no }  

The strings are converted to numbers, just like in other mathematical equations.