Up & Going Chapter 2

You Don't Know Javascript Yet

Up & Going

Chapter 2 : Into Javascript

In JavaScript, objects are king. If you understand objects, you understand JavaScript.- W3schools

We will introduce quite a few concepts in this chapter that will not be fully explored until subsequent YDKJS books. You can think of this chapter as an overview of the topics covered in detail throughout the rest of this series.

Especially if you're new to JavaScript, you should expect to spend quite a bit of time reviewing the concepts and code examples here multiple times. Any good foundation is laid brick by brick, so don't expect that you'll immediately understand it all the first pass through.

Click to view the full text.

Chapter 3 is a summary of what to expect from the other books in the series.You can find it here

typeof

var a;
typeof a; // "undefined"

a = "hello world";
typeof a; // "string"

a = 42;
typeof a; // "number"

a = true;
typeof a; // "boolean"

a = null;
typeof a; // "object" -- weird, bug

a = undefined;
typeof a; // "undefined"

a = { b: "c" };
typeof a; // "object"

Objects

object

var obj = {
  a: "hello world",
  b: 42,
  c: true
};

obj.a; // "hello world"
obj.b; // 42
obj.c; // true

obj["a"]; // "hello world"
obj["b"]; // 42
obj["c"]; // true

bracket notation

var obj = {
a: "hello world",
b: 42
};

var b = "a";

obj[b]; // "hello world"
obj["b"]; // 42

array

var arr = [
  "hello world",
  42,
  true
];

arr[0]; // "hello world"
arr[1]; // 42
arr[2]; // true
arr.length; // 3

typeof arr; // "object"

function

function foo() {
return 42;
}

foo.bar = "hello world";

typeof foo; // "function"
typeof foo(); // "number"
typeof foo.bar; // "string"

Build-in Type Methods

For Example

var a = "hello world";
var b = 3.14159;

a.length; // 11
a.toUpperCase(); // "HELLO WORLD"
b.toFixed(4); // "3.1416"

Comparing Values

explicit coercion

var a = "42";

var b = Number( a );

a; // "42"
b; // 42 -- the number!

implicit coercion

var a = "42";

var b = a * 1; // "42" implicitly coerced to 42 here

a; // "42"
b; // 42 -- the number!

falsy values

"" (empty string)
0,-0,
NaN (invalid number)
null,
undefined,
false,

equality

var a = "42";
var b = 42;

a == b; // true
a === b; // false

array equality

var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";

a == c; // true
b == c; // true
a == b; // false

variables

hoisting

var a = 2;

foo(); // works because `foo()`
// declaration is "hoisted"

function foo() {
  a = 3;

  console.log( a ); // 3

  var a; // declaration is "hoisted"
// to the top of `foo()`
}

  console.log( a ); // 2

nested scope

undeclared variable

function foo() {
a = 1; // `a` not formally declared
}

foo();
a; // 1 -- oops, auto global variable :(

let

function foo() {
  var a = 1;

  if (a >= 1) {
    let b = 2;

    while (b < 5) {
      let c = b * 2;
      b++;

      console.log( a + c );
    }
  }
}

foo();
// 5 7 9

conditionals

if... else... if

if (a == 2) {
  // do something
}
else if (a == 10) {
  // do another thing
}
else if (a == 42) {
  // do yet another thing
}
else {
  // fallback to here
}

switch

switch (a) {
  case 2:
    // do something
    break;
  case 10:
    // do another thing
    break;
  case 42:
    // do yet another thing
    break;
  default:
    // fallback to here
}

fall through

switch (a) {
  case 2:
  case 10:
    // some cool stuff
    break;
  case 42:
    // other stuff
    break;
  default:
    // fallback
}

ternary operator

var a = 42;

var b = (a > 41) ? "hello" : "world";

// similar to:

// if (a > 41) {
// b = "hello";
// }
// else {
// b = "world";
// }

strict mode

placement

function foo() {
"use strict";

// this code is strict mode

  function bar() {
    // this code is strict mode
  }

}

// this code is not strict mode

compare above to...

"use strict";

function foo() {
  // this code is strict mode

  function bar() {
    // this code is strict mode
  }

}

// this code is strict mode

prevents auto-global variable declaration

function foo() {
"use strict"; // turn on strict mode
a = 1; // `var` missing, ReferenceError
}

foo();

functions as values

consider

var foo = function() {
// ..
};

var x = function bar(){
// ..
};

immediately invoked function expression

IIFE

(function IIFE(){
console.log( "Hello!" );
})();
// "Hello!"

compare

function foo() { .. }

// `foo` function reference expression,
// then `()` executes it
foo();

// `IIFE` function expression,
// then `()` executes it
(function IIFE(){ .. })();

variable scope

var a = 42;

(function IIFE(){
  var a = 10;
  console.log( a ); // 10
})();

  console.log( a ); // 42

IIFE with return

var x = (function IIFE(){
return 42;
})();

x; // 42

closure

consider

function makeAdder(x) {
  // parameter `x` is an inner variable

  // inner function `add()` uses `x`, so
  // it has a "closure" over it
  function add(y) {
    return y + x;
  };

  return add;
}

use case

// `plusOne` gets a reference to the inner `add(..)`
// function with closure over the `x` parameter of
// the outer `makeAdder(..)`
var plusOne = makeAdder( 1 );

// `plusTen` gets a reference to the inner `add(..)`
// function with closure over the `x` parameter of
// the outer `makeAdder(..)`
var plusTen = makeAdder( 10 );

plusOne( 3 ); // 4 <-- 1 + 3
plusOne( 41 ); // 42 <-- 1 + 41

plusTen( 13 ); // 23 <-- 10 + 13

modules

consider

this identifier

a quick illustration

prototypes

Object.create ()

var foo = {
a: 42
};

// create `bar` and link it to `foo`
var bar = Object.create( foo );

bar.b = "hello world";

bar.b; // "hello world"
bar.a; // 42 <-- delegated to `foo`

polifilling

consider

if (!Number.isNaN) {
  Number.isNaN = function isNaN(x) {
    return x !== x;
  };
}

transpiling

Es6

function foo(a = 2) {
console.log( a );
}

foo(); // 2
foo( 42 ); // 42

pre-Es6

function foo() {
var a = arguments[0] !== (void 0) ? arguments[0] : 2;
console.log( a );
}

non-Javascript

DOM API

var el = document.getElementById( "foo" );

YDKJSY Up & Going Chapter 2