JavaScript Tutorial for Programmers - Some Basics

JavaScript Tutorial for Programmers

I still remember the days of debugging CORS problem when I put together some projects using JavaScript (& ajax), “a very particular programming language” in my first impression. Recently I got a great opportunity. The new role uses JS, the browser-side script that is now winning in all sides, as the major language. So I took it as a good chance to learn JS more systematically, and this series will be part of the outcome of my study. As the name implies, I will not cover primary level such as “if, else” (condition), “for” (or any kinds of loops), or basic OOP concepts. Instead, I will focus only on differences so you can learn this versatile language like reviewing a pull request, and use it the next day in your next awesome project.

By the way, CORS was solved using Moesif Origin & CORS Changer.

Comparison, == V.S. ===

== does automatic type conversion and compare the “value”. So a string "1" equals to an integer 1 in ==.

=== does not do type conversion. So when comparing a string to an integer, === returns false regardless of the value.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//comparing string with number
    var res = "1" == 1;
    alert(res); //=>true

    res = "1" === 1;
    alert(res); //=>false

//comparing two special type with the same value
    res = null == undefined;
    alert(res); //=>true

    res = null === undefined;
    alert(res); //=>false

//comparing number with object
    var obj = new Number(123);
    res = 123 == obj
    alert(res) //=>true

    res = 123 === obj
    alert(res) //=>false

Result:

1
2
3
4
5
6
true
false
true
false
true
false

It is worth noting that the result of NaN === NaN is always false. Use isNaN() in such case.

The complete behavior of these two “equal-to” operations is given by the equality tables below, use this cheat sheet when something counter-intuitive happens:

===
==

Source: dorey.github.io

NaN, undefined and null

Simply put,

  • undefined is a special init value assigned to a variable (implicitly) by the runtime;
  • null is a value assigned by a programmer to mark the variable as “I am done with the it”; and
  • NaN is set to indicate that something goes wrong (again, by the runtime).

Practically,

  • look at the “declaration” portion of your code when encountering undefined, the uninitialized;
  • search for = null and evaluate the occurrences in your project when encountering null, the released; and
  • look inside a function implementation and check if the arguments are passed correctly when encountering NaN, an error.

I think subdividing of these exceptional “nil”s can narrow down the code review scope for bug analysis. Do you think so too? Let me know in the comment bellow.

Example:

1
2
3
4
5
6
7
8
9
10
11
var res;
alert(res);

res = null;
alert(res);

res = parseFloat("geoff");
alert(res);

res = 1/0;
alert(res);

Result:

1
2
3
4
undefined
null
NaN
infinity

It is worth noting that n/0 does not make a NaN, as some claims. The result should be infinity.

The flexibility of JavaScript introduces cases of uninitialized variables (undefined) that are not common in other languages.

Following are the examples:

1
2
3
4
5
6
7
var res = [1,2,3];
alert(res[10]);

function doSomething(first, second, optional) {
  alert(optional);
}
doSomething(1,2);

result:

1
2
undefined
undefined

As demonstrated by the code, whenever a variable is not explicitly assigned with a value, which could be the case of an out-of-range array accessing or an ignored function argument, the variable is set as undefined by the runtime.