So, apparently I have been sleeping while all designers worth their salt have been diving into JavaScript like it is 2012. While I have been a very early evangelist of jQuery, I knew only enough to get me a solution but nothing in depth of whats, ifs, and whys of JavsScript. So, a month ago, I decided to spend a Saturday watching the JavaScript, the programming language lectures by Douglas Crockford. If you are in the same boat as I am and want to be able to write JavaScript (or even if you are using jQuery or other frameworks), this will be the best 6 hours you will spend.

Caveats

You need to know the jargon of a programming language (not HTML), e.g. type, objects, arrays, etc. I think you might have a hard time understanding JavaScript if you are used to Java, or PHP. Thankfully, I don’t remember my life as a programmer, so it made understanding the lectures easy.

The lectures are actually only 1.5 hours long. I mentioned 6 hours because, I (thanks to prodding from Deepak) paused the video every minute to try out what Douglas was talking about on Firebug Console, and trying out other “what-if” cases that he did not mention.

Are you ready?

These notes might sound a lot like the description of Lost by someone who has never seen it, which means, it might at least be entertaining. From what I have learnt, it seems JavaScript is an irrational language much like you and me, which causes much grief to programmers.

Without further ado, here are my notes on JavaScript:

1. There is only one type for a number, and that is a double.
2. There is only one String type, and does not have a type of Char like some other languages (Java)
3. Math.floor() and parseInt() do almost the same thing, which is to return an integer value based on what gets passed into them, but Math.floor("10f") returns NaN (“Not a Number”) but parseInt("10f") will return 10.
4. JavaScript Strings are UCS-2 encoded which is almost all of UTF-8 (but excludes some new characters, and something called surrogate pairs).
5. JavaScript has many “unknown” values: NaN, null, undefined.
6. NaN cannot be compared with or equated to. E.g. the comparison NaN === NaN evaluatesto false.
7. null is an object (one of the schizophrenic aspects of JavaScript).
8. undefined is the default value of any variable that has not yet been assigned a value (as you would have realised when you bang your keyboard in frustration at “Object undefined” errors).
9. Setting any variable to undefined is equivalent to deleting it.
10. JavaScript statements can be “truthy” or “falsy”
11. “falsy” statements are those that evaluate to null/undefined/NaN/""/false (bool)/0 (int)
12. Rest of the statements are true including those that evaluate to "0" (string)/ "false" (string).

13. The easiest way to convert a string to number is to put a “+” (unary operator) before it. E.g.

    a = +"42" 
    b = a + 5 // b = 47
    
    a = "42"
    b = a + 5 // b = 425
    

14. The comparison operators == and === are different. == can do type coercion which means if the two values being compared are of different types (e.g. String and Int), it can convert one to the other (I am not clear on what gets converted to what), and compare the values. === does not do that. E.g.

    43 == "43" // evaluates to true
    43 === "43" // evaluates to false

15. ! returns boolean true, if the associated expression is falsy. e.g.

    (!(43 === "43")) // true

16. !! returns the boolean equivalent of the truthy/falsy nature of the expression associated with it. e.g.

    !!(43 === "43") // false

    So, in this way, even if your expression evaluates to null, undefined or NaN, you can use this operator to only use the boolean equivalent than these unknown values.

17. Switch statements use “===” comparison
18. Declare a variable with var before it (e.g. var variablename), so that its scope is local to where it was declared. Otherwise the variable will be available globally (and susceptible to accidental modifications)
19. A variable declared in a function is available throughout the function and not just within blocks (e.g. a variable declared in if/switch statements of a function is also available for other operations in the same function).

20. You can define a function in two ways:

    1. var a = function() {} 
    2. var a = new function() {} 
    

    #1 implies the function returns undefined value unless there is a return statement.

    #2 implies the function returns an object if there is no return statement (so it acts as a constructor).

21. An object contains “name: value” pairs, the value can be another object. The value is referred using object.name or object[name]. The name can contain any character but, if you use a name like sd# you cannot refer to its value in this manner a.sd# you can only use a["sd#"]

22. Objects are passed by reference, so they cannot be compared to check if they contain same name/value pairs. E.g.

    a = {b:1, c:2};
    p = {b:1, c:2};
    
    a == p; // false
    
    p = a;  // name: value pairs of p lost, p points to a
    
     a == p; // true
    

    So, when you compare two objects, you really are comparing if they are both pointing to the same location.

23. Arrays inherit from Objects but have additional properties and functions.
24. Array length property returns the largest integer index + 1 e.g:

    a[0] = "bobo"; 
    a[5] = "dada"; 
    console.log(a.length); // results in 6 not 2
    

25. Arrays can have functions too:

    var a = [0, 1, 2];
    a.functioname = function() {}       
    
    

26. If you delete an item from an array, it does not alter the length of the array.

27. typeOf(variableName) returns Object as the type for an array (so you cannot confirm if that variable points to an array), use variableName.constructor === Array to check if the variable is an array.

I am pretty sure I must have passed out at this stage after all this knowledge gain. Nevertheless, I am very curious about JavaScript and hoping to learn more from the messiah.

P.S. I am sorry if it was not as entertaining as the Never Seen Lost blog posts.