JavaScript The language

JavaScript (ECMA-262)

JavaScript is a scripting language, interpreted, dynamic, weakly typed,
supporting object-oriented, functional and imperative programming styles.

Interpreted: code is distributed in source format, and interpreted on the fly.

Dynamically typed: variables can change type during execution.

Weakly typed: variables with different types can be combined without explicit conversions.

Object-oriented: everything is an object in JavaScript.

Functional: functions are first class objects.

JavaScript is not Java. It is much closer to Python or Ruby.

1996 JavaScript 1.0 First version introduced by Netscape.
1997 ECMA 1 (JavaScript 1.3) First standardized version.
…    
2011 ECMA 5.1 (JavaScript 1.8.x) Implemented by most browsers.
2015 ECMA 6 (ES2015) Adds classes, for ... of, arrow functions, promises, …
… ECMA 7,8,… (ES2016, ES2017, …) Yearly revisions. See the compatibility table.

Hello world

Old style

Test it! (only works in a browser)

alert('Hello world!');

Avoid it, any time!

Modern style

Test it! (Firefox: Shift+Ctrl+K, Chrome: F12)

console.log('Hello world!');

Also works outside a browser, e.g., in Node.js.

JavaScript syntax

Types

Numbers

0, 1, -1, 1.32, 1e10, 0x3E, NaN, Infinity

Strings

"Hello world"
'Hello world'
`Hello world`

Booleans

true
false

Other constants

undefined
null

Objects

{ a: 1, 
  b: "hello", 
  c: { a: 1 } }

Arrays

[ 1, 2,
  [ "a", "b" ] ]

Variables

Always declare your variables

let a = 0;
a += 1;

  • Variables are dynamically typed

    let a = 1;
a = 'something';

  • Scope is local to the block

    let a = 1;
if (true) {
    let a = 2;
    console.log(a);   // prints 2
}
console.log(a);       // prints 1

Other types of variables

Alternative old-style syntax (scope local to the function)

var a = 1;
if (true) {
    var a = 2;        // this is useless
    console.log(a);   // prints 2
}
console.log(a);       // prints 2

Constants

const b = 1;
const b = 2;

TypeError: invalid assignment to const `b'

const b = [1, 2];
b[2] = 10;
console.log(b);

Array [ 1, 2, 10 ]

Conditionals

if (x == 1) {
    ...
} else if (x == 2) {
    ...
} else {
    ...
}

switch (2+x) {
case 4:
    ...
    break;
case 5+1:
    ...
    break;
default:
    ...
}

Loops

for ( let i = 0 ; i < 3 ; i++ ) {
    console.log(i);
}

0
1
2

let obj = { a: 1, b: "hello" };
for ( let x in obj ) {
    console.log(x, obj[x]);
}

a 1
b hello

let array = ["a", "b", "c"];
for ( let x of array ) {     // New in ES6
    console.log(x);
}

a
b
c

while (true) {
    console.log("hello");
}

hello
hello
...

do {
    console.log("hello");
} while (true);

hello
hello
...

Exceptions

try {
    ...
} catch (e) {
    if (e instanceof SyntaxError) {
        ...
    } else {
        ...
    }
} finally {
    ...
}

Note: contrary to other languages (e.g., Python), it is not allowed to have more than one catch clause.

Some operators

Weak comparison

let x = 2;
x == '2';     // true

Strong comparison

let x = 2;
x === '2';    // false

Property existence (tests si une propriété est définie dans un object)

let obj = { a: 1, b: 'hello' };
'a' in obj;                      // true
'hello' in obj;                  // false

Arithmetic: +, -, *, /, …

Boolean: <, >, <=, >=, !, &&, ||, ^, …

String concatenation: +

Strings

Single ' and double " quote are equivalent.

"Hello world"
'Hello world'

Backquotes ` (new in ES6)

  • Newlines allowed in backquotes:

    `Hello
 world`

  • Template strings

    let x = "brave new";
`Hello ${x} world`;

    Hello brave new world

Arrays

Dynamic allocation

let myarray = ['one', 'two', 'three'];
myarray[5] = 'five';
myarray.length;                        // gives 6

Common methods

['one', 'two', 'three'].join('+')

one+two+three

['one', 'two', 'three'].indexOf('four')

-1

Other methods

  • Functional iterators: map, filter, reduce, every, some, forEach, …
  • New in ES6: from, of, find, fill, …

Functions

Simple syntax

(Do not use var/let with function arguments)

function incr(a) {
    return a+1;
}

Functions are first-class objects

function apply(f, x) {
    return f(x);
}

apply(incr, 4);          // gives 5

Anonymous functions

let myFun = function (a, b) {
    ...
}

New in ES6:

let myOtherFun = (a, b) => {   // New in ES6
    ...
}

More on arrow functions

Shorter version:

let f = (a, b) => a + b;

Is equivalent to:

let f = (a, b) => {
    return a + b;
}

Arrow functions have slightly different semantics when used inside classes.

Variadic functions

Omit arguments

function maybe(x, y) {
    if (undefined === y) 
        return x;
    else
        return x+y;
}

maybe(1);          // gives 1
maybe(1, 2);       // gives 3

Default arguments (new in ES6)

function val(x=0) {
    return x;
}

val();               // gives 0
val(1);              // gives 1

Nested functions (and closures)

function counter() {
    let c = 0;
    return function(step) {
        return c += step;
    }
}

let cnt = counter();
[cnt(1), cnt(2), cnt(1)]      // gives [1, 3, 4]

The anonymous function is closed around the outer variable c:

  • c acts like a global variable for the anonymous function,
  • c is local to counter.

Objects

Anonymous objects

(similar to Python dicts, associative arrays, …)

let myObj = {
    car: "Peugeot",
    color: "blue"
};

'car' in myObj;              // true
myObj.car == "Peugeot";      // true
myObj['car'] == "Peugeot";   // true

let prop = 'car';
myObj[prop] == "Peugeot";    // true

An object contents can change dynamically

let myObj = {};
myObj.car = "Renault";

Classes (new in ES6)

class Car {
    constructor(speed) {
        this.speed = speed;
    }
    vroom() {
        console.log('VR' + 'O'.repeat(this.speed) + 'M!');
    }
}
class Ferrari extends Car {
    constructor() {
        super(20);
    }
}

v = new Ferrari();
v.vroom();

VROOOOOOOOOOOOOOOOOOOOM!

More on classes

  • Classes are just functions producing objects;

    class A{}
typeof(A)
typeof(new A())
new A() instanceof A

      
"function"
"object"
true

  • Only single inheritance allowed.

  • Learn more on MDN.

Some predefined classes

String, Array, Boolean, Number, Date: name says everything

Math: Mathematical functions (exp, log, etc.)

Math.PI;         // the pi constant
Math.sqrt(16);   // gives 4

RegExp: regular expressions (Perl-like syntax)

let pattern = new RegExp("sub", "i");

// same as the previous line
pattern = /sub/i;

// gives true
pattern.test("Substring");

References

Eloquent JavaScript by Marijn Haverbeke
https://eloquentjavascript.net/, with interactive examples!
JavaScript Éloquent by Marijn Haverbeke, 1st edition (in French)
http://fr.eloquentjavascript.net/,
MDN guide on JavaScript
https://developer.mozilla.org/docs/JavaScript/Guide,
W3Schools tutorials
https://www.w3schools.com/js/,

More references in the course main page.

Fork me on GitHub