Ubiqutous

Quirky

Fun!

A humane programming language (it has flaws)

Something boring

Something necessary

Something interesting

Something awesome

Something surprising

Something bad

Something creative

Boring: A brief history of JavaScript

Necessary: The type system

Interesting: Truthiness, Prototypal inheritance

Awesome: First class functions, Object literals, Closures

Surprising: Scoping, Concurrency

Bad: Global variables, Equals, and more

Creative: Visualisations, Games, Virtual reality, and more

In 1995, Netscape Navigator was the dominant web browser, but Microsoft was making inroads with Windows 95.

Netscape considered the web browser a new form of distributed OS, but it needed a lightweight scripting language.

They hired Brendan Eich in April 1995 and told him he had ten days to design a programming language.

Brendan created Mocha, later renamed to LiveScript, borrowing ideas from LISP, Smalltalk, Self and C.

Netscape Navigator 2.0 Beta was released in September 1995.

Java had just been released and was getting a lot of attention.

Netscape marketing changed the name from LiveScript to JavaScript in December 1995.

Netscape Navigator 2.0 with JavaScript support launched in March 1996.

Netscape delivered JavaScript to Ecma International for standardisation.

June 1997: First edition of ECMA-262 ECMAScript Language Specification.

Number

String

Boolean (true and false)

Null (null)

Undefined (undefined)

Object (a few types)

Arrays

Functions (more on this later!)

Regular expressions

Objects (duh!)

Containers of properties that are name/value pairs

Names can be any String

Values can be any expression

Mutable

Strings and Numbers are not objects (they are object-like but immutable)

All expressions are either truthy or falsy.

This can be used in conditional expressions:

if (someVariable) {
    console.log("this only executes if someVariable is truthy");
}

Can be used as a simple check for null, undefined, NaN and more.

A new object can inherit properties of an existing object.

Example: Arrays inherit properties of the Array prototype object, such as length

Another example:

var parent = {
    'name': "Alice",
    'greet': function() {
        console.log("Hello " + this.name);
    }
};

var child = Object.create(parent);
child['name'] = "Bob";
child.greet();  // prints "Hello Bob" to the console

Functions are objects and can be assigned to variables.

var simpleFunction = function() {
    console.log("Hello World");
};

This code doesn't print "Hello World" to the console, it only defines the function.

We can also pass functions as arguments to other functions.

And a function can return a function as output.

simpleFunction();  // prints "Hello World" to the console

function createFunction() {
    return function() {
        console.log("Hello World");
    }
}

var myArray = [1, 2, 3];

var person = {
    "firstName": "John",
    "lastName":  "Smith",
};

var nestedExample = {
    "firstName": "Jane",
    "lastName":  "Smith",
    "address": {
        "country": "Australia",
        "city":    "Sydney"
    },
    "greeting": function() {
        console.log("Hello World!");
    }
}

var counter = function() {
    var value = 0;

    return {
        getValue: function() {
            return value;
        },
        increment: function() {
            value += 1;
        }
    };
}

var myCounter = counter();  // create an instance

Encapsulation: value can't be directly manipulated.

Create a new function by supplying some arguments of an another function.

function describe(adjective) {
  return function(thing) {
    console.log(thing + " is " + adjective);
  }
}

var isAwesome = describe("awesome");
var isEvenBetter = describe("even better");

isAwesome("UNSW");
isEvenBetter("ThoughtWorks");

JavaScript uses C's block syntax (curly braces {}), but there's no block scope.

There are only two scopes: global scope and function scope.

A variable defined without var is global. Never do this!

A variable defined outside any function is global.

A variable defined in a function only exists in that function.

while (queue.waitForEventMessage()) {
  queue.processNextEventMessage();
}

Each event message is processed completely before any other message is processed.

No multi-threading support, as in C, Java, others.

How are event messages added to the queue?

• In a browser: When a user interface event happens and an event listener is is attached.
• Elsewhere: setTimeout() and friends

setTimeout(callbackFunction, delayMillis)

Adds callbackFunction as a message to the event queue, with a delay.

var counter = function() {
    for (var i = 1; i <= 3; i++) {
        setTimeout(function() { console.log(i); }, 0);
    }
}
counter();

>> 4
   4
   4

It's far too easy to create global variables!

var myFunction = function() {
    global1 = 1;
    var nonGlobal = "I only exist inside myFunction";
}
var global2 = 2;
window.global3 = 3;

global1 is global because we forgot var

global2 is global because we declared it outside of a function or object

global3 is global because we added it to the global web browser window object

JavaScript has both == and === (as well as != and !==)

== performs type coercion when the arguments are not of the same type, using strange rules:

0 == ''            // true
'0' == ''          // true
'' == '0'          // false

false == '0'       // true
null == undefined  // true

' \t\r\n ' == 0    // true

Lesson: Use === and !==

• Douglas Crockford: JavaScript: The Good Parts, O'Reilly
• es5: ECMAScript Language Specification, 5.1 Edition
• es6: ECMAScript 2015 Language Specification
• Mozilla Developer Network: JavaScript
• Trevor Burnham: The Origin of Javascript with Brendan Eich, JavaScript Jabber, Episode 124, 3 Sept 2014
• Charles Severance: JavaScript: Designing a Language in 10 Days, IEEE Computer, Feb 2012
• Paul Krill: JavaScript creator ponders past, future, 23 June 2008