JavaScript Did You Know? #Ramblings

I've been told on more than one occasion that I tend to ramble. But then again who doesn't from time to time ey? What I meant to ramble on about were some interesting JavaScript constructs, patterns, code .. etc

Self Executing Anonymous Functions and Document.Ready

While they can be really helpful, its always important to understand how and when they get executed. In case you'd like to know more about Self Executing Anonymous functions, here's a post by Mark Dalgleish  http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

<div class="before">
    Before Div. This content will change!
</div>
<script>
    (function () {
        $(".before").html("Since the div is declared before the script block, its loaded and we're able to manipulate it.");
        $(".after").html("The div declared after the script block is not yet loaded, we're not able to do anything!");
    })()
</script>
<div class="after">
    After Div. This content will not change.
</div>

As you may expect, the HTML elements declared before the script block will be loaded. The elements declared after the script block would not have been loaded and hence unavailable for any manipulation. (JsFiddle Link: http://jsfiddle.net/roeburg/j2r4U/ ). This behaviour is quite different from document.ready where the code is executed only when all the dom elements have been loaded! (Jsfiddle Link: http://jsfiddle.net/roeburg/Cy62T/2/)

Comparison Operators == and === 

JavaScript has both strict and Type–converting (abstract) comparisons.A strict comparison (e.g., ===) is only true if the operands are the same Type. The more commonly used abstract comparison (e.g., ==) converts the operands to the same Type before making the comparison. For relational abstract comparisons (e.g., <=), the operands are first converted to primitives, then the same Type, before comparison. (More Examples: http://goo.gl/vqJ8ek)

Arithmetic Operations on Strings V/s Numbers

<div>"1" + 2 + 3 = <span class="answer1"></span></div>

<div>1 + "2" + 3 = <span class="answer2"></span></div>

<div>1 + 2 + "3" = <span class="answer3"></span></div>

<div>1 + 2 + 3 = <span class="answer4"></span> </div>

<script>
$(function () {
    var ans1 = "1" + 2 + 3;
    $(".answer1").html(ans1);
    
    var ans2 = 1 + "2" + 3;
    $(".answer2").html(ans2);
    
    var ans3 = 1 + 2 + "3";
    $(".answer3").html(ans3);
    
    var ans4 = 1 + 2 + 3;
    $(".answer4").html(ans4);
})
</script>

(JsFiddle Link: http://jsfiddle.net/roeburg/N5RhP/1/)

JavaScript Scoping and Hoisting

JavaScript has two scopes: global and local. A variable that is declared outside a function definition is a global variable, and its value is accessible and modifiable throughout your program. A variable that is declared inside a function definition is local. It is created and destroyed every time the function is executed, and it cannot be accessed by any code outside the function. JavaScript does not support block scope (in which a set of braces {. . .} defines a new scope), except in the special case of block-scoped variables. (JsFiddle Link: http://jsfiddle.net/roeburg/pp9Pv/)

$(function () {
    // Global definition of aCentaur.
    var aCentaur = "a horse with rider,";

    // A local aCentaur variable is declared in this function.
    function antiquities() {

        var aCentaur = "A centaur is probably a mounted Scythian warrior";
    }

    antiquities();
    aCentaur += " as seen from a distance by a naive innocent.";

    $("div").html(aCentaur);

    // Output: "a horse with rider, as seen from a distance by a naive innocent."
})

In JavaScript function declarations and variable declarations are 'hoisted' i.e. are silently moved to the very top of the scope.

(JsFiddle Link: http://jsfiddle.net/roeburg/vNhLp/)