Section 2 - Execution Contexts and Lexical Environements

Dynamic Typing

• Variables are figured out on the fly. Its like the auto keyword in C++.

• This is possible:

var a = 'string';
a = 1;
a = true;

Primitive Types

• Variables that hold a single type of value.

• E.g.

  • undefined - initializes variables

  • null - similiar to undefined, but is intended for the user to use.

  • boolean

  • number - floating type

  • string

  • symbol - used in es6

Operators

• Basic operators like + are infixed functions, meaning they act exactly like functions, for example:

    var a = 1 + 2;
    console.log(a); // prints 3
  
    //what is happening:
    function +(a,b) {
        console.log( a + b );
    }
  
    // calling this function:
  
    +(1,2);
  
    //and infix notation means the operator is placed inbetween 1 and 2.
    1 + 2;

• also includes other primative type operators like > , - , *, etc. These are essentially functions.

Operator Precedence and Associativity

• Operaters like + , * , = , << , etc are have a unique priority for their evaluation.

• A full list reference can be found here:

Coersion

• • can also work as a concatenation.

     var a= 1 + '2' // prints 12

• 1 was coersed into a string. So the engine concantenated 1 and 2, and evaulated them into a string before.

• This was done for us - so their there is a certain precedence that does this for us. It 'does it best' to understand what it should be.

Comparison Operators

console.log( 1 < 2 < 3); // returns true as expected
console.log( 3 < 2 < 1); // returns true???

• Precedence and coersion. (3 < 2) evaluates to false.

• Then false < 1 gets coersed.

  • false try's to evaluate itself as some number

• Javscript has a nice handy built in function for this.

    //browser console
    Number(false) // returns 0;
  
    //for fun
    Number('3') // returns the numeric type 3

• false and true respectively evaluate to 0 and 1, as expected.

• and finally, 0 < 1 evaluates to false. These are how the sequence of operations evaluate from the javascript perspective.

Number(undefined) // NaN
Number(null) // 0

• NaN = not a number

• There are also special circumstances for these special kind of operations and when they coerse, or not. For example,

null < 4 // true null gets coersed to 0
null == 0 // false ?! <-- ex of a special circumstance
"" == 0 // true... ok
false == "" // true as well

• This can get pretty strange, so how to we solve this?

• ===

3 === 3 // true
3 === '3' // false
0 === false // false
3.0 === 3 // true
'a' === "a" // true

• why this is awesome -> values are not coerced. So its a great way for us to actually test for values are what we s

• trictly want them to identify with. Pretty cool.

• Different type will always evaluate to false

• But this doesnt mean coersion is not helpful. There are circumstances where dont want to use strict operations.

• Sameness operations link ->

Existence and Booleans

Boolean(undefined);
Boolean(null);
Boolean("");

• All evaluate to false.

• How this can work to our advantage

var a;

if (a || a === 0) {
    console.log('something is here');
}

• During the first memory allocation phase of the program, 'a' is undefined. Within the if statement, a is coerced into a boolean automatically. And because we know understand that undefined evaluates to false, we can use this method 'check' for nondefinitions.

• a === 0 is added for a special case, where a = 0 - which is an explicit case.

Default values

 function greet(name) {
    console.log('hello ' + name);
 }

 greet() // hello undefined

• First thing to notice is that greet() can be called without a parameter.

• Name is recognized as a variable, but is initiallize as undefined. Thats why this works.

• undefined is also coerced into a string before it becomes conncatinated.

• This is not good behavior. How can we fix this with a default value?

  • 'hello [student name]

 function greet(name) {
    name = name || [your name here];
    console.log('hello ' + name);
 }

 greet() // hello undefined

• What this does:

• This is a neat little trick to set default values.

• || will evaluate to a variable that can be coerced to true.

//console
undefined || 'hello' // hello -> because Boolean('hello') evaluates to true.
'hi' || 'hello' //hi, because hi is evaluate left to right

• Evaluates the first value that coerces to true.

Collisions

• Suppose we have 3 js files.

    <!doctype html>
    <html class="no-js" lang="">
        <head>
  
        </head>
  
        <body>
  
        <script src="scratchpad1.js"></script>
        <script src="scratchpad2.js"></script>
  
        </body>
    </html>

• What happens when we have colliding variables?

    //js1
    var a = 1;

    //js2
    var a = 2;


    //console
    console.log(a); // prints 2

• The scratchpad3 overwrote var a, since it was read before 1 and 2

• To fix this we can do something like before:

    //js 2

    window.a = window.a || 2;

    //console
    console.log(a) // prints 1

• Why this works. Because a has been define before as a global variable, previously it does not become coerced.

• This helps us recognize conflicting global variables.

• I dont know about the practice in js, but maybe its better to avoid using globals?