Intro to 

JavaScript

(Part Two)

Fancy Stuff...

Objects

...so, I guess this involves declaring a new class, giving it various public/private attributes and methods, and then using a constructor to bring one into existence.
NO!
> person = {name: "pat", age: 47}
Object {name: "pat", age: 47}
> person.name
"pat"
> person["name"]
"pat"
> person["Name"]
undefined
> property = "name"
"name"
> person[property]
"pat"
> person["property"]
undefined

Object Comparison


> me = person
Object {name: "pat", age: 47}
> me === person
true
> impostor = {name: "pat", age: 47}
Object {name: "pat", age: 47}
> imposter === me
false

The full rules for comparison are summarised here.
Some painful workarounds to support unit-testing here.

Cloning objects is difficult too.

Object Mutation


> person
Object {name: "pat", age: 47}
> me
Object {name: "pat", age: 47}
> impostor
Object {name: "pat", age: 47}
> me.age += 1
48
> me.job = "programmer"  // creating a new member "on the fly"!
"programmer"
> me
Object {name: "pat", age: 48, job: "programmer"}
> person
Object {name: "pat", age: 48, job: "programmer"}
> impostor
Object {name: "pat", age: 47}

Object Property Ordering

(and the lack thereof)

> orderTest = {foo:"foo", 3:3, 2:2, 1:1, bar:"bar", 99:99}
Object {1: 1, 2: 2, 3: 3, 99: 99, foo: "foo", bar: "bar"}

The ordering of properties is not guaranteed,
and shouldn't be relied upon. 

Different implementations do it differently,
and they are free to change at any time.

It is an "implementation detail".

Inspecting Stuff


This is very useful...
> console.dir(me)
V Object
    age: 48
    job: "programmer"
    name: "pat"
   >__proto__: Object

This exposes the true inner structure of objects, including the "secret" links to the prototype chain.

Also, in Chrome, you can use "dir" as a shortcut.

Messing With Arrays


Try evaluating 'a' and expanding 'dir(a)' after each line:
> a
["apple", 99, "cherry", undefined × 2, "pear"]
> a[2] = [10, 20, 30]
[10, 20, 30]
> a[2] = person
Object {name: "pat", age: 48, job: "programmer"}
> a.crazy = "madness"
"madness"
> a[1.5] = "WTF!"
"WTF!"
> a[Math.PI] = "delicious!"
"delicious!"
> a[-5] = "You must be kidding!"
"You must be kidding!"
> a[10] = a                                          // "INCEPTION!!!"
["apple", 99, Object, undefined × 2, "pear", undefined × 4, Array[11]]

Differences between 

JavaScript and Java...



Dynamic Typing


Variables do not have explicit fixed types in JS.

A variable can hold a reference to any type of data
i.e. the language is "dynamically typed"
(like Python and Ruby and LISP),
rather than "statically typed"
(like C++, Java and Pascal).

Dynamic typing can often be quite convenient and flexible,
but it can also be a source of confusion and error.

Objects and Classes


JavaScript has "objects", but it doesn't define them via "classes". In fact, JavaScript objects are really just flexible associative-arrays (also known as "maps" or "dictionaries").

They contain a set of arbitrary <name>:<value> pairs, where the <name> has to be a string, but the <value> can be anything (including other "objects").

You can change the set of <names> (aka "properties") which an object has at runtime i.e. you can add, modify, or remove things whenever you like.

Prototypes


JavaScript removes the conventional Object Oriented distinction between "object" instances and the "classes" which define their properties and behaviours.

Instead, object instances may "inherit" behaviour directly from each other. When an object is created it may nominate another object as its "prototype" and, in so doing, the prototype becomes a kind of parent object which implements default behaviour, which the child may then over-ride in the conventional manner.

First Class Functions


In JavaScript, functions are "data" too. This means that you can assign them to variables, and pass them in and out of other functions. You can also create them at runtime.

This turns out to be an immensely powerful facility,
and is the central requirement for being a so-called
"functional" language.

In fact, this feature is often used to work-around the other deficiencies of the language.

Numbers


In JavaScript, there is only one numeric type:
double-precision floating-point

There is no dedicated "integer" type (but you can, of course, use doubles to represent integers as long as you are careful with them).

Error-Checking


Ha!

In JavaScript, everything happens at runtime, and there is no (conventional) "compilation" phase at which basic errors can be detected for you.

There is very little "sanity checking" and the language is highly (and, arguably, dangerously) permissive.

Programming errors tend to manifest as runtime errors, and sometimes in quite non-obvious ways.






JavaScript gives you enough rope to hang yourself with.

Language Overview


This is a decent overview, covering primitive types,
objects, arrays and functions.

http://crockford.com/javascript/survey.html

It also talks about method-calls on objects,
and the role of the special `this` parameter.

JavaScript in the Browser


Basic Browser Architecture:

[URL] -> Fetch -> [Cache]
[Cache] -> Parse -> [Tree]
[Tree] -> Flow -> [Display List]
[Display List] -> Paint -> [Pixels]

Enter Scripting


Flow -> Paint -> Event -> Script -> Flow ->
..and repeat



(Source: The Theory of the DOM)

Embedding Scripts


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Trivial Script Embedding</title>
  </head>
  <body>

    <div id="output"></div>
    <script src="myScript.js"></script>

  </body>
</html>

NB: HTML5 validated via
https://validator.w3.org/
http://html5.validator.nu/

myScript.js


// Output to console, and to my special "output" element.
output = function (thing) {
    console.log(thing);
    document.getElementById("output").innerHTML += thing + "<br>";
};

// The simplest "useful" function: return `x` squared
square = function (x) {
    return x * x;
};

output(square(5));
output(square(10));
output("");

See it in jsFiddle
...or, in an actual web-page, here

Opinions


"..everybody has one"


From "Crock"


Douglas Crockford,
in his book "JavaScript: The Good Parts":

"In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders. The best nature of JavaScript is so effectively hidden that for many years the prevailing opinion of JavaScript was that it was an unsightly, incompetent toy."

More Crock


"The very good ideas include functions, loose typing, dynamic objects, and an expressive object literal notation.
The bad ideas include a programming model based on global variables."

Yet More Crock


JavaScript's functions are first class objects with (mostly) lexical scoping. JavaScript is the first lambda language to go mainstream.
Deep down, JavaScript has more in common with Lisp and Scheme than with Java. It is Lisp in C's clothing. This makes JavaScript a remarkably powerful language."

Criticism


From Crockford's "JavaScript: The Good Parts"...

The Awful Parts


  • Global Variables
  • Scope
  • Semicolon Insertion
  • Reserved Words
  • Unicode
  • typeof
  • +
  • Floating Point
  • NaN
  • Phony Arrays
  • Falsy Values

The Bad Parts


  • ==
  • with
  • eval
  • continue
  • switch fall-through
  • Blockless statements
  • ++ and --
  • Bitwise operators
  • "function" as a statement
  • new

Equality


"...but some are more equal than others"

> 0 == "0"
true
> 0 == ""
true
> "" == 0
true
> "" == "0"
false
i.e. == is not transitive!

Use === (and !==) instead, always.

Taming The Beast


Use a "safe" subset of the language, use "strict" mode,
and run your code against a "lint" tool which detects
violations and likely errors.

Crockford's own:
http://www.jslint.com/

A more tolerant alternative: 
http://www.jshint.com/ 

Praise

(or, perhaps, simply "defence")
From Brendan Eich, inventor of JavaScript...

The Best Parts


  • First Class functions
  • Closures
  • Prototypes
  • obj = {p:1, q:2, r:3}
  • arr = ["hi", "there"]

That´s it!

Outright Mockery


"mistakes were made"

WAT!

https://www.destroyallsoftware.com/talks/wat

WHY?

References


  1. W3C's "A Short History of JavaScript"
  2. JavaScript: How it all began
  3. Eich on "popularity"
    (this corrects the first, dead, link from ref 2)
  4. The ECMA standard

Putting the language in historical context (humour!)