Don’t mistake JavaScript objects for simple maps (dictionaries)! They can be used as maps from strings to values, but they are also real objects. Object literals are one of JavaScripts standout features: They allow you to directly create objects – no classes necessary. That is true object-orientation: You can start with concrete objects and introduce abstractions later, as needed. The abstraction for an object factory is a class in most mainstream languages, in JavaScript it is the constructor function (see below).

The do-while loop continues looping over its body while its condition holds. As the condition follows the body, the body is always executed at least once.

do {
// ...
} while(condition);

In all loops:

break leaves the loop.

continue starts a new loop iteration.

6. Functions and variable declarations

A variable always exists within the complete function, even if it is declared inside a block: JavaScript performs hoisting – any var declaration is always moved to the beginning of a function. The following is code where hoisting is performed (internally).

function foo(x) {
x++;
if (x > 100) {
var tmp = x - 100;
}
}

Due to hoisting, the above code is equivalent to

function foo(x) {
var tmp;
x++;
if (x > 100) {
tmp = x - 100;
}
}

You should be fine, as long as you remember that JavaScript is function-scoped: Wherever a variable is declared, its scope is the complete innermost enclosing function. You can simulate a block by defining a function and immediately invoking it.

This pattern is called an IIFE (immediately-invoked function expression) and pronounced “iffy”. Notes:

The IIFE must be wrapped in parentheses. Otherwise, you will get a syntax error. (Explanation: Without parentheses, JavaScript assumes that you are starting a statement – a function declaration. Such a declaration must have a name and cannot be immediately invoked.)

Adding a trailing semicolon is safer. (Explanation: If not and you write two IIFEs in a row, the first one will be interpreted as something callable – which it isn’t – and the second one as its argument.)

7. Array methods

Arrays have many methods. Especially the iteration methods are very useful, because you can avoid the for loop.

[3, 4, 5].forEach(function (elem) {
console.log(elem);
});

8. Simple objects

A method is a property whose value is a function. For example, sayHello() in the code above. In contrast to many mainstream languages, JavaScript lets you directly work with objects. That is very handy, because you can work with concrete objects first and introduce abstractions (constructors in JavaScript, classes in most other languages) later on.

Pitfall: every function has its own this

Problem: If a method m hands a function f to another method or function then f cannot access m’s this, because it has its own this. And that is unfortunate, because with JavaScript’s asynchronous programming style (on either the web or Node.js), one frequently uses callbacks. Example:

The reason is that by accessing the value of counter.inc, you have turned the method into a function. Then this does not point to counter, any more and counter.count does not get incremented. The solution is to use the bind() method that every function has. It creates a new function where this has the value specified by its first argument.

> repeat(2, counter.inc.bind(counter))

This time, everything worked fine:

> counter.count
2

9. Constructors

The closest equivalent to classes that JavaScript has are constructor functions, normal functions that are invoked via new:

Extending a constructor is non-trivial. You can either do it yourself or use an API. Note that you don’t need inheritance as often in JavaScript, because you can add arbitrary properties to an instance.

10. Strict mode

ECMAScript 5 has a so-called strict mode that performs more error checks and has less quirks. It is recommended that you use it. You switch it on by putting the following line at the beginning of a file or at the beginning of a function. In the latter case, strict mode is only active inside that function.

"use strict";

Older versions of ECMAScript simply ignore the above statement.

11. Where to go from here

The 2ality blog has many posts on JavaScript (including ones on iterating over arrays, exception handling, primitives versus objects, etc.). The posts you should read next are: