Web Programming @ MIPT

ES6 (Javascript)

Web Programming @ MIPT, 2015-2016

What is Javascript

The language which drives the web; also used for embedded scripting and general-purpose programming
Standard is named ECMAScript
Not related to Java in any way
Dynamic
Weakly typed (objects can implicitly change type)
Prototype-based (no class types)
Functions are first class citizens (functions are ordinary objects)

Annotation

This presentation is devoted to client-side Javascript (aka "in browser"); server-side (aka "general-purpose") JS is addressed in node.js.

History

First version was developed in 10 days in 1995 at Netscape
ECMAScript 1.0 standard was issued in 1997
3.0 appeared in 1999
4.0 was never completed; 5.0 went live in 2009
Latest is 6.0 (June 2015)
See the ES6 compatibility table

Engines

Chromium (Chrome): v8
Firefox: SpiderMonkey
Safari: JavaScriptCore

Modern JS engines use just-in-time compilation to achieve better performance.

There is asm.js subset of JS, normally generated by special tools, which becomes very close to ideal (about 2x-1.5x slowdown).

Objects

Everything in Javascript is an Object
Basically, object is a dictionary (key-value collection)
Object can be callable (a function). Not callable objects can be made callable^*.
Objects are passed by reference, except strings and numbers, the only immutable ones
There is no build-in way to deep clone objects, but third-party libs help
Objects derive from each other using prototype special attribute

obj = {a: 45, "b": "test", 'c': /^abc\d+$/}

Functions

Functions are special objects which can be called
this points to function's properties
Function can return another function to make a closure
Parameter names can be specified in the signature. Objects which were passed to a function but not specified in it's signature are available in arguments
Function returns either an object or undefined in case of empty return

Arrow functions

Arrow functions are anonymous functions (lambda functions)
They do not impose the change of context (this)
They are shorter to write

((msg) => console.log(msg))()

Semicolons

Variables

a = 10; - assign this.a to 10. this is often window - that is, global scope.
var a = 10; - declare variable a in function scope, move the declaration to the beginning of the function; assign a to 10.
let a = 10; - declare variable a in enclosing block scope, move the declaration to the beginning of that block; assign a to 10.
All uninitialized variables equal to undefined

for (var a = 0; a < 10; a++) {}
console.log(a);  // prints "10"

for (let a = 0; a < 10; a++) {}
console.log(a);  // prints "undefined"

null vs undefined

null is very similar to undefined
Use null to explicitly state the object's absence, though it should exist
Use undefined in all other cases
Article

new and delete

new is used to create new objects with constructor functions
delete is used to remove properties
prototype property is used to change all objects which have been "derived"

function Car() {}
var car = new Car();
console.log(car.color);  // undefined
Car.prototype.color = null;
console.log(car.color);  // null
car.color = "black";
console.log(car.color);  // black

Classes

class is similar to constructor function, but with fair semantics.
extends avoids the need of setting prototype
constructor marks the initialization method
super gives access to inherited object
static makes static methods

getters and setters

Prepend get to object's function name to make it a getter
Prepend set to object's function name to make it a setter

var obj = {
  get foo() { return 10; }
};
obj.foo;  // 10

=, == and ===

= is for assignment
== (!=) is for equality checking with implicit type cast
=== (!==) is for equality checking without implicit type cast

var a = 4, b = '4';
a == b;  // true
a === b;  // false

Primitives

if (cond) { ... } elseif (cond) { ... } - conditional
for var|let i = 0; i < arr.length; i++) { ... } - for
while (cond) { ... }; do { ... } while (cond) - while
switch (expression) {} - switch-case (=== is used for comparison)

Loops

for var|let i in obj - iterates over enumerable properties of obj in arbitrary order
for var|let i of obj - yields values of iterable obj, e.g., Array

let arr = [3, 5, 7];
arr.foo = "hello";


for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}


for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

Exceptions

Exceptions can be any objects, even undefined.
finally always have a priority over try...catch

try {
  throw "error";
} catch (err) {
  return true;
} finally {
  return false;
}

Generators

Reference

function* gen() {
  yield 2;
  yield 3;
  yield 1;
}
for (let i of gen()) {
  console.log(i);
}


// 2
// 3
// 1

eval and inspection

eval() executes arbitrary JS code.

eval('console.log("test");');

Object.keys(obj) returns all the properties of obj

f.toString() returns function f's source code'

Modes

default - silences many errors
strict

function foo() {
  "use strict";
}

WTF?!

Javascript can be awkward. There is even a dedicated collection of it's dark sides: wtfjs. Some examples taken from StackOverflow:

'5' + 3  // '53'
'5' - 3  // 2
'5'- - '3'  // 8

function four() {
  return
    2 + 2;
}
four();  // undefined

''        ==   '0'           // false
0         ==   ''            // true
0         ==   '0'           // true
false     ==   'false'       // false
false     ==   '0'           // true
false     ==   undefined     // false
false     ==   null          // false
null      ==   undefined     // true
" \t\r\n" ==   0             // true

CoffeeScript

Javascript used to be ugly; there are special projects to improve client-side programming experience, e.g. CoffeeScript.

Python look, better syntax
Compiles to Javascript without any runtime
Unfortunately, still requires the knowledge of JS
There is a book
Influenced ES6 much
ES6 makes it a bit obsolete

Minification

In order to obfuscate and reduce the resulting JS file size, the sources can be minified
Example tool: UglifyJS
Modern browsers support source maps - mapping of original files to their minified variants, so that developers see originals during debug
Name mangling means shortening variable names, internal function names, etc. to just 1-3 symbols
Comments and whitespace characters are removed
Dead (unused) code can be removed, too

API: DOM manipulation

Read the introduction
There are document and window global variables which serve the party
All global variables are attached to window; window.window === window is true

Example of DOM manipulation:

var heading = document.createElement("h1");
heading.appendChild(document.createTextNode("Hello, World!"));
document.body.appendChild(heading);

API: deferred execution

setTimeout() deferrs function execution by the given interval in millisecs
setInterval() calls function each specified number of millisecs
clearTimeout() and clearInterval() cancel execution by identifier returned from setTimeout() and setInterval()

setInterval((txt) => console.log(txt), 1000, "hello, world");

API: JSON

There are cases when it is needed to convert an object into some text/binary representation which can be stored on disk or sent over the internet. This convertion is called serialization.

JSON is a versatile open format ideal for the web
JSON.stringify() performs the conversion object -> JSON
JSON.parse() restores object from JSON

var a = {field: 10};  // Object {field: 10}
JSON.stringify(a);  // "{"field":10}"
JSON.parse(JSON.stringify(a));  // Object {field: 10}

jQuery

Official site
Appeared in 2006
Simplifies DOM manipulation, event handling, AJAX
Has two versions: 2.x (for modern browsers) and 1.x (for IE and legacy browsers)
Very widespread

$("#jqlist").toggle();

d3.js

Stands for Data-Driven Documents
Allows creating all sort of graphs, diagrams, charts, plots, etc.
Very useful in scientific visualization
There are tutorials
You can use it for your cool personal page eyecandy

Next steps

Read http://www.ecma-international.org/ecma-262/6.0
Read books: 1, 2
Pass interactive tutorials: 1, 2
Download cheatsheet: 1, 2
Continue to Methodology