Javascript Notebook
  • Introduction
  • Intro to JavaScript
    • Section 1 - Getting Started
    • Section 2 - Execution Contexts and Lexical Environements
    • Section 3 - Types and Operators
    • Section 3 Part 2 - Closures and Callbacks
    • Section 4 - Objects and Functions
    • Section 5 - Object Oriented Javascript and Prototypal Inheritance
    • Section 6 - Building Objects
    • Section 7 - Odds and Ends
    • Section 8 - Examining Famous Frameworks and Libraries
    • Section 9 - Let's Build a Framework or Library!
  • Midterm Review
  • Final Review
  • jQuery
    • Section 1 - Selectors
    • Section 2 - Events
    • Section 3 - Effects
  • Node.js
    • The Node Core
    • Modules, Exports, and Require
    • Events and the Event Emitter
    • Databases and SQl
  • D3.js
    • Diving In
    • Bar Chart
    • Creating A Complex Bar Chart
Powered by GitBook
On this page
  • Dynamic Typing
  • Primitive Types
  • Operators
  • Operator Precedence and Associativity
  • Coersion
  • Comparison Operators
  • Existence and Booleans
  • Default values
  • Collisions

Was this helpful?

  1. Intro to JavaScript

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?

PreviousSection 1 - Getting StartedNextSection 3 - Types and Operators

Last updated 5 years ago

Was this helpful?