ECMAScript is the official name for JavaScript. A new name became necessary because there is a trademark on Java (held originally by Sun, now by Oracle). At the moment, Mozilla is one of the few companies allowed to officially use the name JavaScript because it received a license long ago. For common usage, the following rules apply:

JavaScript’s creator, Brendan Eich, had no choice but to create the language very quickly (or other, worse technologies would have been adopted by Netscape). He borrowed from several programming languages: Java (syntax, primitive values versus objects), Scheme and AWK (first-class functions), Self (prototypal inheritance), and Perl and Python (strings, arrays, and regular expressions).

JavaScript did not have exception handling until ECMAScript 3, which explains why the language so often automatically converts values and so often fails silently: it initially couldn’t throw exceptions.

On one hand, JavaScript has quirks and is missing quite a bit of functionality (block-scoped variables, modules, support for subclassing, etc.). On the other hand, it has several powerful features that allow you to work around these problems. In other languages, you learn language features. In JavaScript, you often learn patterns instead.

Given its influences, it is no surprise that JavaScript enables a programming style that is a mixture of functional programming (higher-order functions; built-in map, reduce, etc.) and object-oriented programming (objects, inheritance).

A few examples of syntax:

// Two slashes start single-line comments

var x;  // declaring a variable

x = 3 + y;  // assigning a value to the variable `x`

foo(x, y);  // calling function `foo` with parameters `x` and `y`
obj.bar(3);  // calling method `bar` of object `obj`

// A conditional statement
if (x === 0) {  // Is `x` equal to zero?
    x = 123;
}

// Defining function `baz` with parameters `a` and `b`
function baz(a, b) {
    return a + b;
}

Note the two different uses of the equals sign:

To understand JavaScript’s syntax, you should know that it has two major syntactic categories: statements and expressions:

The distinction between statements and expressions is best illustrated by the fact that JavaScript has two different ways to do if-then-else—either as a statement:

var x;
if (y >= 0) {
    x = y;
} else {
    x = -y;
}

or as an expression:

var x = y >= 0 ? y : -y;

You can use the latter as a function argument (but not the former):

myFunction(y >= 0 ? y : -y)

Finally, wherever JavaScript expects a statement, you can also use an expression; for example:

foo(7, 1);

The whole line is a statement (a so-called expression statement), but the function call foo(7, 1) is an expression.

Semicolons are optional in JavaScript. However, I recommend always including them, because otherwise JavaScript can guess wrong about the end of a statement. The details are explained in Automatic Semicolon Insertion.

Semicolons terminate statements, but not blocks. There is one case where you will see a semicolon after a block: a function expression is an expression that ends with a block. If such an expression comes last in a statement, it is followed by a semicolon:

// Pattern: var _ = ___;
var x = 3 * 7;
var f = function () { };  // function expr. inside var decl.

JavaScript has two kinds of comments: single-line comments and multiline comments. Single-line comments start with // and are terminated by the end of the line:

x++; // single-line comment

Multiline comments are delimited by /* and */:

/* This is
   a multiline
   comment.
 */

You can declare a variable and assign a value at the same time:

var foo = 6;

You can also assign a value to an existing variable:

foo = 4;  // change variable `foo`

There are compound assignment operators such as +=. The following two assignments are equivalent:

x += 1;
x = x + 1;

Identifiers are names that play various syntactic roles in JavaScript. For example, the name of a variable is an identifier. Identifiers are case sensitive.

Roughly, the first character of an identifier can be any Unicode letter, a dollar sign ($), or an underscore (_). Subsequent characters can additionally be any Unicode digit. Thus, the following are all legal identifiers:

arg0
_tmp
$elem
π

The following identifiers are reserved words—they are part of the syntax and can’t be used as variable names (including function names and parameter names):

The following three identifiers are not reserved words, but you should treat them as if they were:

Lastly, you should also stay away from the names of standard global variables (see Chapter 23). You can use them for local variables without breaking anything, but your code still becomes confusing.

JavaScript makes a somewhat arbitrary distinction between values:

A major difference between the two is how they are compared; each object has a unique identity and is only (strictly) equal to itself:

> var obj1 = {};  // an empty object
> var obj2 = {};  // another empty object
> obj1 === obj2
false
> obj1 === obj1
true

In contrast, all primitive values encoding the same value are considered the same:

> var prim1 = 123;
> var prim2 = 123;
> prim1 === prim2
true

The next two sections explain primitive values and objects in more detail.

The following are all of the primitive values (or primitives for short):

Primitives have the following characteristics:

All nonprimitive values are objects. The most common kinds of objects are:

Objects have the following characteristics:

Most programming languages have values denoting missing information. JavaScript has two such “nonvalues,” undefined and null:

if (x === undefined || x === null) {
    ...
}

if (!x) {
    ...
}

There are two operators for categorizing values: typeof is mainly used for primitive values, while instanceof is used for objects.

typeof looks like this:

typeof value

It returns a string describing the “type” of value. Here are some examples:

> typeof true
'boolean'
> typeof 'abc'
'string'
> typeof {} // empty object literal
'object'
> typeof [] // empty array literal
'object'

The following table lists all results of typeof:

typeof null returning 'object' is a bug that can’t be fixed, because it would break existing code. It does not mean that null is an object.

instanceof looks like this:

value instanceof Constr

It returns true if value is an object that has been created by the constructor Constr (see Constructors: Factories for Objects). Here are some examples:

> var b = new Bar();  // object created by constructor Bar
> b instanceof Bar
true

> {} instanceof Object
true
> [] instanceof Array
true
> [] instanceof Object  // Array is a subconstructor of Object
true

> undefined instanceof Object
false
> null instanceof Object
false

Whenever JavaScript expects a boolean value (e.g., for the condition of an if statement), any value can be used. It will be interpreted as either true or false. The following values are interpreted as false:

All other values (including all objects!) are considered true. Values interpreted as false are called falsy, and values interpreted as true are called truthy. Boolean(), called as a function, converts its parameter to a boolean. You can use it to test how a value is interpreted:

> Boolean(undefined)
false
> Boolean(0)
false
> Boolean(3)
true
> Boolean({}) // empty object
true
> Boolean([]) // empty array
true

Binary logical operators in JavaScript are short-circuiting. That is, if the first operand suffices for determining the result, the second operand is not evaluated. For example, in the following expressions, the function foo() is never called:

false && foo()
true  || foo()

Furthermore, binary logical operators return either one of their operands—which may or may not be a boolean. A check for truthiness is used to determine which one:

JavaScript has two kinds of equality:

Normal equality considers (too) many values to be equal (the details are explained in Normal (Lenient) Equality (==, !=)), which can hide bugs. Therefore, always using strict equality is recommended.

Strings are concatenated via the plus (+) operator, which converts the other operand to a string if one of the operands is a string:

> var messageCount = 3;
> 'You have ' + messageCount + ' messages'
'You have 3 messages'

To concatenate strings in multiple steps, use the += operator:

> var str = '';
> str += 'Multiple ';
> str += 'pieces ';
> str += 'are concatenated.';
> str
'Multiple pieces are concatenated.'

Strings have many useful methods (see String Prototype Methods). Here are some examples:

> 'abc'.slice(1)  // copy a substring
'bc'
> 'abc'.slice(1, 2)
'b'

> '\t xyz  '.trim()  // trim whitespace
'xyz'

> 'mjölnir'.toUpperCase()
'MJÖLNIR'

> 'abc'.indexOf('b')  // find a string
1
> 'abc'.indexOf('x')
-1

The if statement has a then clause and an optional else clause that are executed depending on a boolean condition:

if (myvar === 0) {
    // then
}

if (myvar === 0) {
    // then
} else {
    // else
}

if (myvar === 0) {
    // then
} else if (myvar === 1) {
    // else-if
} else if (myvar === 2) {
    // else-if
} else {
    // else
}

I recommend always using braces (they denote blocks of zero or more statements). But you don’t have to do so if a clause is only a single statement (the same holds for the control flow statements for and while):

if (x < 0) return -x;

The following is a switch statement. The value of fruit decides which case is executed:

switch (fruit) {
    case 'banana':
        // ...
        break;
    case 'apple':
        // ...
        break;
    default:  // all other cases
        // ...
}

The “operand” after case can be any expression; it is compared via === with the parameter of switch.

The for loop has the following format:

for (⟦«init»⟧; ⟦«condition»⟧; ⟦«post_iteration»⟧)
    «statement»

init is executed at the beginning of the loop. condition is checked before each loop iteration; if it becomes false, then the loop is terminated. post_iteration is executed after each loop iteration.

This example prints all elements of the array arr on the console:

for (var i=0; i < arr.length; i++) {
    console.log(arr[i]);
}

The while loop continues looping over its body while its condition holds:

// Same as for loop above:
var i = 0;
while (i < arr.length) {
    console.log(arr[i]);
    i++;
}

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:

Function declarations are hoisted—moved in their entirety to the beginning of the current scope. That allows you to refer to functions that are declared later:

function foo() {
    bar();  // OK, bar is hoisted
    function bar() {
        ...
    }
}

Note that while var declarations are also hoisted (see Variables Are Hoisted), assignments performed by them are not:

function foo() {
    bar();  // Not OK, bar is still undefined
    var bar = function () {
        // ...
    };
}

You can call any function in JavaScript with an arbitrary amount of arguments; the language will never complain. It will, however, make all parameters available via the special variable arguments. arguments looks like an array, but has none of the array methods:

> function f() { return arguments }
> var args = f('a', 'b', 'c');
> args.length
3
> args[0]  // read element at index 0
'a'

Let’s use the following function to explore how too many or too few parameters are handled in JavaScript (the function toArray() is shown in Converting arguments to an Array):

function f(x, y) {
    console.log(x, y);
    return toArray(arguments);
}

Additional parameters will be ignored (except by arguments):

> f('a', 'b', 'c')
a b
[ 'a', 'b', 'c' ]

Missing parameters will get the value undefined:

> f('a')
a undefined
[ 'a' ]
> f()
undefined undefined
[]

The following is a common pattern for assigning default values to parameters:

function pair(x, y) {
    x = x || 0;  // (1)
    y = y || 0;
    return [ x, y ];
}

In line (1), the || operator returns x if it is truthy (not null, undefined, etc.). Otherwise, it returns the second operand:

> pair()
[ 0, 0 ]
> pair(3)
[ 3, 0 ]
> pair(3, 5)
[ 3, 5 ]

If you want to enforce an arity (a specific number of parameters), you can check arguments.length:

function pair(x, y) {
    if (arguments.length !== 2) {
        throw new Error('Need exactly 2 arguments');
    }
    ...
}

arguments is not an array, it is only array-like (see Array-Like Objects and Generic Methods). It has a property length, and you can access its elements via indices in square brackets. You cannot, however, remove elements or invoke any of the array methods on it. Thus, you sometimes need to convert arguments to an array, which is what the following function does (it is explained in Array-Like Objects and Generic Methods):

function toArray(arrayLikeObject) {
    return Array.prototype.slice.call(arrayLikeObject);
}

The scope of a variable is always the complete function (as opposed to the current block). For example:

function foo() {
    var x = -512;
    if (x < 0) {  // (1)
        var tmp = -x;
        ...
    }
    console.log(tmp);  // 512
}

We can see that the variable tmp is not restricted to the block starting in line (1); it exists until the end of the function.

Each variable declaration is hoisted: the declaration is moved to the beginning of the function, but assignments that it makes stay put. As an example, consider the variable declaration in line (1) in the following function:

function foo() {
    console.log(tmp); // undefined
    if (false) {
        var tmp = 3;  // (1)
    }
}

Internally, the preceding function is executed like this:

function foo() {
    var tmp;  // hoisted declaration
    console.log(tmp);
    if (false) {
        tmp = 3;  // assignment stays put
    }
}

Each function stays connected to the variables of the functions that surround it, even after it leaves the scope in which it was created. For example:

function createIncrementor(start) {
    return function () {  // (1)
        start++;
        return start;
    }
}

The function starting in line (1) leaves the context in which it was created, but stays connected to a live version of start:

> var inc = createIncrementor(5);
> inc()
6
> inc()
7
> inc()
8

A closure is a function plus the connection to the variables of its surrounding scopes. Thus, what createIncrementor() returns is a closure.

Sometimes you want to introduce a new variable scope—for example, to prevent a variable from becoming global. In JavaScript, you can’t use a block to do so; you must use a function. But there is a pattern for using a function in a block-like manner. It is called IIFE (immediately invoked function expression, pronounced “iffy”):

(function () {  // open IIFE
    var tmp = ...;  // not a global variable
}());  // close IIFE

Be sure to type the preceding example exactly as shown (apart from the comments). An IIFE is a function expression that is called immediately after you define it. Inside the function, a new scope exists, preventing tmp from becoming global. Consult Introducing a New Scope via an IIFE for details on IIFEs.

var result = [];
for (var i=0; i < 5; i++) {
    result.push(function () { return i });  // (1)
}
console.log(result[1]()); // 5 (not 1)
console.log(result[3]()); // 5 (not 3)

for (var i=0; i < 5; i++) {
    (function () {
        var i2 = i; // copy current i
        result.push(function () { return i2 });
    }());
}

Like all values, objects have properties. You could, in fact, consider an object to be a set of properties, where each property is a (key, value) pair. The key is a string, and the value is any JavaScript value.

In JavaScript, you can directly create plain objects, via object literals:

'use strict';
var jane = {
    name: 'Jane',

    describe: function () {
        return 'Person named '+this.name;
    }
};

The preceding object has the properties name and describe. You can read (“get”) and write (“set”) properties:

> jane.name  // get
'Jane'
> jane.name = 'John';  // set
> jane.newProperty = 'abc';  // property created automatically

Function-valued properties such as describe are called methods. They use this to refer to the object that was used to call them:

> jane.describe()  // call method
'Person named John'
> jane.name = 'Jane';
> jane.describe()
'Person named Jane'

The in operator checks whether a property exists:

> 'newProperty' in jane
true
> 'foo' in jane
false

If you read a property that does not exist, you get the value undefined. Hence, the previous two checks could also be performed like this:

> jane.newProperty !== undefined
true
> jane.foo !== undefined
false

The delete operator removes a property:

> delete jane.newProperty
true
> 'newProperty' in jane
false

A property key can be any string. So far, we have seen property keys in object literals and after the dot operator. However, you can use them that way only if they are identifiers (see Identifiers and Variable Names). If you want to use other strings as keys, you have to quote them in an object literal and use square brackets to get and set the property:

> var obj = { 'not an identifier': 123 };
> obj['not an identifier']
123
> obj['not an identifier'] = 456;

Square brackets also allow you to compute the key of a property:

> var obj = { hello: 'world' };
> var x = 'hello';

> obj[x]
'world'
> obj['hel'+'lo']
'world'

If you extract a method, it loses its connection with the object. On its own, the function is not a method anymore, and this has the value undefined (in strict mode).

As an example, let’s go back to the earlier object jane:

'use strict';
var jane = {
    name: 'Jane',

    describe: function () {
        return 'Person named '+this.name;
    }
};

We want to extract the method describe from jane, put it into a variable func, and call it. However, that doesn’t work:

> var func = jane.describe;
> func()
TypeError: Cannot read property 'name' of undefined

The solution is to use the method bind() that all functions have. It creates a new function whose this always has the given value:

> var func2 = jane.describe.bind(jane);
> func2()
'Person named Jane'

Every function has its own special variable this. This is inconvenient if you nest a function inside a method, because you can’t access the method’s this from the function. The following is an example where we call forEach with a function to iterate over an array:

var jane = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    logHiToFriends: function () {
        'use strict';
        this.friends.forEach(function (friend) {
            // `this` is undefined here
            console.log(this.name+' says hi to '+friend);
        });
    }
}

Calling logHiToFriends produces an error:

> jane.logHiToFriends()
TypeError: Cannot read property 'name' of undefined

Let’s look at two ways of fixing this. First, we could store this in a different variable:

logHiToFriends: function () {
    'use strict';
    var that = this;
    this.friends.forEach(function (friend) {
        console.log(that.name+' says hi to '+friend);
    });
}

Or, forEach has a second parameter that allows you to provide a value for this:

logHiToFriends: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name+' says hi to '+friend);
    }, this);
}

Function expressions are often used as arguments in function calls in JavaScript. Always be careful when you refer to this from one of those function expressions.

Until now, you may think that JavaScript objects are only maps from strings to values, a notion suggested by JavaScript’s object literals, which look like the map/dictionary literals of other languages. However, JavaScript objects also support a feature that is truly object-oriented: inheritance. This section does not fully explain how JavaScript inheritance works, but it shows you a simple pattern to get you started. Consult Chapter 17 if you want to know more.

In addition to being “real” functions and methods, functions play another role in JavaScript: they become constructors—factories for objects—if invoked via the new operator. Constructors are thus a rough analog to classes in other languages. By convention, the names of constructors start with capital letters. For example:

// Set up instance data
function Point(x, y) {
    this.x = x;
    this.y = y;
}
// Methods
Point.prototype.dist = function () {
    return Math.sqrt(this.x*this.x + this.y*this.y);
};

We can see that a constructor has two parts. First, the function Point sets up the instance data. Second, the property Point.prototype contains an object with the methods. The former data is specific to each instance, while the latter data is shared among all instances.

To use Point, we invoke it via the new operator:

> var p = new Point(3, 5);
> p.x
3
> p.dist()
5.830951894845301

p is an instance of Point:

> p instanceof Point
true

Array literals are handy for creating arrays:

> var arr = [ 'a', 'b', 'c' ];

The preceding array has three elements: the strings 'a', 'b', and 'c'. You can access them via integer indices:

> arr[0]
'a'
> arr[0] = 'x';
> arr
[ 'x', 'b', 'c' ]

The length property indicates how many elements an array has. You can use it to append elements and to remove elements:

> var arr = ['a', 'b'];
> arr.length
2

> arr[arr.length] = 'c';
> arr
[ 'a', 'b', 'c' ]
> arr.length
3

> arr.length = 1;
> arr
[ 'a' ]

The in operator works for arrays, too:

> var arr = [ 'a', 'b', 'c' ];
> 1 in arr // is there an element at index 1?
true
> 5 in arr // is there an element at index 5?
false

Note that arrays are objects and can thus have object properties:

> var arr = [];
> arr.foo = 123;
> arr.foo
123

Arrays have many methods (see Array Prototype Methods). Here are a few examples:

> var arr = [ 'a', 'b', 'c' ];

> arr.slice(1, 2)  // copy elements
[ 'b' ]
> arr.slice(1)
[ 'b', 'c' ]

> arr.push('x')  // append an element
4
> arr
[ 'a', 'b', 'c', 'x' ]

> arr.pop()  // remove last element
'x'
> arr
[ 'a', 'b', 'c' ]

> arr.shift()  // remove first element
'a'
> arr
[ 'b', 'c' ]

> arr.unshift('x')  // prepend an element
3
> arr
[ 'x', 'b', 'c' ]

> arr.indexOf('b')  // find the index of an element
1
> arr.indexOf('y')
-1

> arr.join('-')  // all elements in a single string
'x-b-c'
> arr.join('')
'xbc'
> arr.join()
'x,b,c'

There are several array methods for iterating over elements (see Iteration (Nondestructive)). The two most important ones are forEach and map.

forEach iterates over an array and hands the current element and its index to a function:

[ 'a', 'b', 'c' ].forEach(
    function (elem, index) {  // (1)
        console.log(index + '. ' + elem);
    });

The preceding code produces the following output:

0. a
1. b
2. c

Note that the function in line (1) is free to ignore arguments. It could, for example, only have the parameter elem.

map creates a new array by applying a function to each element of an existing array:

> [1,2,3].map(function (x) { return x*x })
[ 1, 4, 9 ]

> /^a+b+$/.test('aaab')
true
> /^a+b+$/.test('aaa')
false

> /a(b+)a/.exec('_abbba_aba_')
[ 'abbba', 'bbb' ]

The returned array contains the complete match at index 0, the capture of the first group at index 1, and so on. There is a way (discussed in RegExp.prototype.exec: Capture Groups) to invoke this method repeatedly to get all matches.

> '<a> <bbb>'.replace(/<(.*?)>/g, '[$1]')
'[a] [bbb]'

The first parameter of replace must be a regular expression with a /g flag; otherwise, only the first occurrence is replaced. There is also a way (as discussed in String.prototype.replace: Search and Replace) to use a function to compute the replacement.

In the area of graphical user interfaces, JavaScript benefits from being part of HTML5. In this section, I use the term HTML5 for “the browser platform” (HTML, CSS, and browser JavaScript APIs). HTML5 is deployed widely and making constant progress. It is slowly becoming a complete layer for writing full-featured, cross-platform applications; similar to, say, the Java platform, it’s almost like an embedded operating system. One of HTML5’s selling points is that it lets you write cross-platform graphical user interfaces. Those are always a compromise: you give up some quality in exchange for not being limited to a single operating system. In the past, “cross-platform” meant Windows, Mac OS, or Linux. But we now have two additional interactive platforms: web and mobile. With HTML5, you can target all of these platforms via technologies such as PhoneGap, Chrome Apps, and TideSDK.

Additionally, several platforms have web apps as native apps or let you install them natively—for example, Chrome OS, Firefox OS, and Android.

There are more technologies than just HTML5 that complement JavaScript and make the language more useful:

An expression produces a value and can be written wherever a value is expected—for example, as an argument in a function call or at the right side of an assignment. Each of the following lines contains an expression:

myvar
3 + x
myfunc('a', 'b')

Roughly, a statement performs an action. Loops and if statements are examples of statements. A program is basically a sequence of statements.^[6]

Wherever JavaScript expects a statement, you can also write an expression. Such a statement is called an expression statement. The reverse does not hold: you cannot write a statement where JavaScript expects an expression. For example, an if statement cannot become the argument of a function.

var salutation;
if (male) {
    salutation = 'Mr.';
} else {
    salutation = 'Mrs.';
}

var salutation = (male ? 'Mr.' : 'Mrs.');

> eval('{ foo: 123 }')
123
> eval('({ foo: 123 })')
{ foo: 123 }

> (function () { return 'abc' }())
'abc'

> function () { return 'abc' }()
SyntaxError: function statement requires a name

> function foo() { return 'abc' }()
SyntaxError: Unexpected token )

The following statements are not terminated by semicolons if they end with a block:

Here’s an example of while versus do-while:

while (a > 0) {
    a--;
} // no semicolon

do {
    a--;
} while (a > 0);

And here’s an example of a function declaration versus a function expression. The latter is followed by a semicolon, because it appears inside a var declaration (which is terminated by a semicolon):

function foo() {
    // ...
} // no semicolon

var foo = function () {
    // ...
};

A semicolon on its own is an empty statement and does nothing. Empty statements can appear anywhere a statement is expected. They are useful in situations where a statement is demanded, but not needed. In such situations, blocks are usually also allowed. For example, the following two statements are equivalent:

while (processNextItem() > 0);
while (processNextItem() > 0) {}

The function processNextItem is assumed to return the number of remaining items. The following program, consisting of three empty statements, is also syntactically correct:

;;;

The goal of automatic semicolon insertion (ASI) is to make semicolons optional at the end of a line. The image invoked by the term automatic semicolon insertion is that the JavaScript parser inserts semicolons for you (internally, things are usually handled differently).

Put another way, ASI helps the parser to determine when a statement ends. Normally, it ends with a semicolon. ASI dictates that a statement also ends if:

if (a < 0) a = 0
console.log(a)

if (a < 0) a = 0;
console.log(a);

function add(a,b) { return a+b }

function add(a,b) { return a+b; }

// Don't do this
return
{
    name: 'John'
};

return;
{
    name: 'John'
};

func()
[ 'ul', 'ol' ].foreach(function (t) { handleTag(t) })

func()['ol'].foreach(function (t) { handleTag(t) });

You switch strict mode on by typing the following line first in your JavaScript file or inside your <script> element:

'use strict';

Note that JavaScript engines that don’t support ECMAScript 5 will simply ignore the preceding statement, as writing strings in this manner (as an expression statement; see Statements) normally does nothing.

You can also switch on strict mode per function. To do so, write your function like this:

function foo() {
    'use strict';
    ...
}

This is handy when you are working with a legacy code base where switching on strict mode everywhere may break things.

In general, the changes enabled by strict mode are all for the better. Thus, it is highly recommended to use it for new code you write—simply switch it on at the beginning of a file. There are, however, two caveats:

The following sections explain the strict mode features in more detail. You normally don’t need to know them, as you will mostly get more warnings for things that you shouldn’t do anyway.

All variables must be explicitly declared in strict mode. This helps to prevent typos. In sloppy mode, assigning to an undeclared variable creates a global variable:

function sloppyFunc() {
    sloppyVar = 123;
}
sloppyFunc();  // creates global variable `sloppyVar`
console.log(sloppyVar);  // 123

In strict mode, assigning to an undeclared variable throws an exception:

function strictFunc() {
    'use strict';
    strictVar = 123;
}
strictFunc();  // ReferenceError: strictVar is not defined

Strict mode limits function-related features.

function strictFunc() {
    'use strict';
    {
        // SyntaxError:
        function nested() {
        }
    }
}

function strictFunc() {
    'use strict';
    {
        // OK:
        var nested = function () {
        };
    }
}

function sloppyFunc() {
    console.log(this === window);  // true
}

function strictFunc() {
    'use strict';
    console.log(this === undefined);  // true
}

function Point(x, y) {
    'use strict';
    this.x = x;
    this.y = y;
}

> var pt = Point(3, 1);
TypeError: Cannot set property 'x' of undefined

Illegal manipulations of properties throw exceptions in strict mode. For example, attempting to set the value of a read-only property throws an exception, as does attempting to delete a nonconfigurable property. Here is an example of the former:

var str = 'abc';
function sloppyFunc() {
    str.length = 7;  // no effect, silent failure
    console.log(str.length);  // 3
}
function strictFunc() {
    'use strict';
    str.length = 7; // TypeError: Cannot assign to
                    // read-only property 'length'
}

In sloppy mode, you can delete a global variable foo like this:

delete foo

In strict mode, you get a syntax error whenever you try to delete unqualified identifiers. You can still delete global variables like this:

delete window.foo;  // browsers
delete global.foo;  // Node.js
delete this.foo;    // everywhere (in global scope)

In strict mode, the eval() function becomes less quirky: variables declared in the evaluated string are not added to the scope surrounding eval() anymore. For details, consult Evaluating Code Using eval().

Two more JavaScript features are forbidden in strict mode:

JavaScript has only six types, according to Chapter 8 of the ECMAScript language specification:

Therefore, constructors technically don’t introduce new types, even though they are said to have instances.

In the context of language semantics and type systems, static usually means “at compile time” or “without running a program,” while dynamic means “at runtime.”

In a statically typed language, variables, parameters, and members of objects (JavaScript calls them properties) have types that the compiler knows at compile time. The compiler can use that information to perform type checks and to optimize the compiled code.

Even in statically typed languages, a variable also has a dynamic type, the type of the variable’s value at a given point at runtime. The dynamic type can differ from the static type. For example (Java):

Object foo = "abc";

The static type of foo is Object; its dynamic type is String.

JavaScript is dynamically typed; types of variables are generally not known at compile time.

If you have type information, you can check whether a value used in an operation (calling a function, applying an operator, etc.) has the correct type. Statically type-checked languages perform this kind of check at compile time, while dynamically type-checked languages do so at runtime. A language can be both statically type-checked and dynamically type-checked. If a check fails, you usually get some kind of error or exception.

JavaScript performs a very limited kind of dynamic type checking:

> var foo = null;
> foo.prop
TypeError: Cannot read property 'prop' of null

Mostly, however, things silently fail or work. For example, if you access a property that does not exist, you get the value undefined:

> var bar = {};
> bar.prop
undefined

In JavaScript, the main way of dealing with a value whose type doesn’t fit is to coerce it to the correct type. Coercion means implicit type conversion. Most operands coerce:

> '3' * '4'
12

JavaScript’s built-in conversion mechanisms support only the types Boolean, Number, String, and Object. There is no standard way to convert an instance of one constructor to an instance of another constructor.

Here we review the various scenarios where undefined and null occur.

> var foo;
> foo
undefined

> function f(x) { return x }
> f()
undefined

> var obj = {}; // empty object
> obj.foo
undefined

> function f() {}
> f()
undefined

> function g() { return; }
> g()
undefined

In the following sections we review how to check for undefined and null individually, or to check if either exists.

if (x === null) ...

if (x === undefined) ...

// Does x have a value?
if (x !== undefined && x !== null) {
    ...
}
// Is x a non-value?
if (x === undefined || x === null) {
    ...
}

// Does x have a value (is it truthy)?
if (x) {
    ...
}
// Is x falsy?
if (!x) {
    ...
}

A single nonvalue could play the roles of both undefined and null. Why does JavaScript have two such values? The reason is historical.

JavaScript adopted Java’s approach of partitioning values into primitives and objects. It also used Java’s value for “not an object,” null. Following the precedent set by C (but not Java), null becomes 0 if coerced to a number:

> Number(null)
0
> 5 + null
5

Remember that the first version of JavaScript did not have exception handling. Therefore, exceptional cases such as uninitialized variables and missing properties had to be indicated via a value. null would have been a good choice, but Brendan Eich wanted to avoid two things at the time:

As a result, Eich added undefined as an additional nonvalue to the language. It coerces to NaN:

> Number(undefined)
NaN
> 5 + undefined
NaN

undefined is a property of the global object (and thus a global variable; see The Global Object). Under ECMAScript 3, you had to take precautions when reading undefined, because it was easy to accidentally change its value. Under ECMAScript 5, that is not necessary, because undefined is read-only.

To protect against a changed undefined, two techniques were popular (they are still relevant for older JavaScript engines):

Primitive values such as 'abc' are fundamentally different from wrapper instances such as new String('abc'):

> typeof 'abc'  // a primitive value
'string'
> typeof new String('abc')  // an object
'object'
> 'abc' instanceof String  // never true for primitives
false
> 'abc' === new String('abc')
false

Wrapper instances are objects, and there is no way of comparing objects in JavaScript, not even via lenient equals == (see Equality Operators: === Versus ==):

> var a = new String('abc');
> var b = new String('abc');
> a == b
false

There is one use case for wrapper objects: you want to add properties to a primitive value. Then you wrap the primitive and add properties to the wrapper object. You need to unwrap the value before you can work with it.

Wrap a primitive by invoking a wrapper constructor:

new Boolean(true)
new Number(123)
new String('abc')

Unwrap a primitive by invoking the method valueOf(). All objects have this method (as discussed in Conversion to Primitive):

> new Boolean(true).valueOf()
true
> new Number(123).valueOf()
123
> new String('abc').valueOf()
'abc'

Converting wrapper objects to primitives properly extracts numbers and strings, but not booleans:

> Boolean(new Boolean(false))  // does not unwrap
true
> Number(new Number(123))  // unwraps
123
> String(new String('abc'))  // unwraps
'abc'

The reason for this is explained in Converting to Boolean.

Primitives don’t have their own methods and borrow them from wrappers:

> 'abc'.charAt === String.prototype.charAt
true

Sloppy mode and strict mode handle this borrowing differently. In sloppy mode, primitives are converted to wrappers on the fly:

String.prototype.sloppyMethod = function () {
    console.log(typeof this); // object
    console.log(this instanceof String); // true
};
''.sloppyMethod(); // call the above method

In strict mode, methods from the wrapper prototype are used transparently:

String.prototype.strictMethod = function () {
    'use strict';
    console.log(typeof this); // string
    console.log(this instanceof String); // false
};
''.strictMethod(); // call the above method

Therefore, JavaScript rarely complains about a value having the wrong type. For example, programs normally receive user input (from online forms or GUI widgets) as strings, even if the user has entered a number. If you treat a number-as-string like a number, you will not get a warning, just unexpected results. For example:

var formData = { width: '100' };

// You think formData.width is a number
// and get unexpected results
var w = formData.width;
var outer = w + 20;

// You expect outer to be 120, but it’s not
console.log(outer === 120);  // false
console.log(outer === '10020');  // true

In cases such as the preceding one, you should convert to the appropriate type early on:

var w = Number(formData.width);

The following functions are the preferred way of converting a value to a boolean, number, string, or object:

Note that Boolean(), Number(), String(), and Object() are called as functions. You normally don’t use them as constructors. Then they create instances of themselves (see Wrapper Objects for Primitives).

To convert a value to either a number or a string, it is first converted to an arbitrary primitive value, which is then converted to the final type (as discussed in Functions for Converting to Boolean, Number, String, and Object).

The ECMAScript specification has an internal function, ToPrimitive() (which is not accessible from JavaScript), that performs this conversion. Understanding ToPrimitive() enables you to configure how objects are converted to numbers and strings. It has the following signature:

ToPrimitive(input, PreferredType?)

The optional parameter PreferredType indicates the final type of the conversion: it is either Number or String, depending on whether the result of ToPrimitive() will be converted to a number or a string.

If PreferredType is Number, then you perform the following steps:

If PreferredType is String, steps 2 and 3 are swapped. The PreferredType can also be omitted; it is then considered to be String for dates and Number for all other values. This is how the operators + and == call ToPrimitive().

> var empty = {};
> empty.valueOf() === empty
true
> empty.toString()
'[object Object]'

> Number({})
NaN

> var n = { valueOf: function () { return 123 } };
> Number(n)
123
> String(n)
'[object Object]'

> var s = { toString: function () { return '7'; } };
> String(s)
'7'
> Number(s)
7

A compound assignment operator is written as op=, where op is one of several binary operators and = is the assignment operator. The following two expressions are equivalent:

myvar op= value
myvar = myvar op value

In other words, a compound assignment operator op= applies op to both operands and assigns the result to the first operand. Let’s look at an example of using the plus operator (+) via compound assignment:

> var x = 2;
> x += 3
5
> x
5

The following are all compound assignment operators:

Values with different types are never strictly equal. If both values have the same type, then the following assertions hold:

> NaN === NaN
false

x !== y

!(x === y)

The algorithm for comparing via normal equality works as follows. If both operands have the same type (one of the six specification types—Undefined, Null, Boolean, Number, String, and Object), then compare them via strict equality.

Otherwise, if the operands are:

Otherwise—if none of the aforementioned cases apply—the result of the lenient comparison is false.

x != y

!(x == y)

> 2 == true  // 2 === 1
false
> 2 == false  // 2 === 0
false

> 1 == true  // 1 === 1
true
> 0 == false  // 0 === 0
true

> '' == false   // 0 === 0
true
> '1' == true  // 1 === 1
true
> '2' == true  // 2 === 1
false
> 'abc' == true  // NaN === 1
false

> 'abc' == new String('abc')  // 'abc' == 'abc'
true
> '123' == 123  // 123 === 123
true

> '\n\t123\r ' == 123  // usually not OK
true
> '' == 0  // 0 === 0
true

> {} == '[object Object]'
true
> ['123'] == 123
true
> [] == 0
true

> new Boolean(true) === new Boolean(true)
false
> new Number(123) === new Number(123)
false
> new String('abc') == new String('abc')
false

You sometimes read about valid use cases for lenient equality (==). This section lists them and points out better alternatives.

if (x != null) ...

if (x) ...

if (x !== undefined && x !== null) ...

if (x == 123) ...

if (Number(x) === 123) ...

> 'abc' == new String('abc')
true

> new String('abc') == new String('abc')
false

if (wrapped.valueOf() === 'abc') ...

You evaluate a comparison:

x < y

by taking the following steps:

The other ordering operators are handled similarly.

You evaluate an addition:

value1 + value2

by taking the following steps:

The conditional operator is an expression:

«condition» ? «if_true» : «if_false»

If the condition is true, the result is if_true; otherwise, the result is if_false. For example:

var x = (obj ? obj.prop : null);

The parentheses around the operator are not needed, but they make it easier to read.

«left» , «right»

The comma operator evaluates both operands and returns the result of right. Roughly, it does for expressions what the semicolon does for statements.

This example demonstrates that the second operand becomes the result of the operator:

> 123, 'abc'
'abc'

This example demonstrates that both operands are evaluated:

> var x = 0;
> var y = (x++, 10);

> x
1
> y
10

The comma operator is confusing. It’s better to not be clever and to write two separate statements whenever you can.

The syntax for the void operator is:

void «expr»

which evaluates expr and returns undefined. Here are some examples:

> void 0
undefined
> void (0)
undefined

> void 4+7  // same as (void 4)+7
NaN
> void (4+7)
undefined

> var x;
> x = 3
3
> void (x = 5)
undefined
> x
5

Thus, if you implement void as a function, it looks as follows:

function myVoid(expr) {
    return undefined;
}

The void operator is associated closely with its operand, so use parentheses as necessary. For example, void 4+7 binds as (void 4)+7.

The typeof operator:

typeof «value»

returns a string describing what kind of value value is. Here are some examples:

> typeof undefined
'undefined'
> typeof 'abc'
'string'
> typeof {}
'object'
> typeof []
'object'

typeof is used to distinguish primitives and objects and to categorize primitives (which cannot be handled by instanceof). Unfortunately, the results of this operator are not completely logical and only loosely correspond to the types of the ECMAScript specification (which are explained in JavaScript’s Types):

function isObject(value) {
    return (value !== null
       && (typeof value === 'object'
           || typeof value === 'function'));
}

> isObject(123)
false
> isObject(null)
false
> isObject({})
true

typeof x === 'undefined'

> var foo;
> typeof foo === 'undefined'
true

> typeof undeclaredVariable === 'undefined'
true

> var foo;
> foo === undefined
true

> undeclaredVariable === undefined
ReferenceError: undeclaredVariable is not defined

The instanceof operator:

«value» instanceof «Constr»

determines whether value has been created by the constructor Constr or a subconstructor. Here are some examples:

> {} instanceof Object
true
> [] instanceof Array  // constructor of []
true
> [] instanceof Object  // super-constructor of []
true

As expected, instanceof is false for the nonvalues undefined and null:

> undefined instanceof Object
false
> null instanceof Object
false

But it is also false for all other primitive values:

> 'abc' instanceof Object
false
> 123 instanceof Object
false

For details on instanceof, consult The instanceof Operator.

There are three ways any value can be converted to a boolean:

I prefer Boolean(), because it is more descriptive. Here are some examples:

> Boolean(undefined)
false
> Boolean(null)
false

> Boolean(0)
false
> Boolean(1)
true
> Boolean(2)
true

> Boolean('')
false
> Boolean('abc')
true
> Boolean('false')
true

Wherever JavaScript expects a boolean, you can provide any kind of value and it is automatically converted to boolean. Thus, there are two sets of values in JavaScript: one set is converted to false, while the other set is converted to true. These sets are called falsy values and truthy values. Given the preceding table, the following are all falsy values:

All other values—including all objects, even empty objects, empty arrays, and new Boolean(false)—are truthy. Because undefined and null are falsy, you can use the if statement to check whether a variable x has a value:

if (x) {
    // x has a value
}

The caveat is that the preceding check interprets all falsy values as “does not have a value,” not just undefined and null. But if you can live with that limitation, you get to use a compact and established pattern.

> Boolean(new Boolean(false))
true
> Boolean([])
true
> Boolean({})
true

> Number({ valueOf: function () { return 123 } })
123
> String({ toString: function () { return 'abc' } })
'abc'

Binary logical operators are:

If the first operand can be converted to false, return it. Otherwise, return the second operand:

> true && false
false
> false && 'def'
false
> '' && 'def'
''
> 'abc' && 'def'
'def'

If the first operand can be converted to true, return it. Otherwise, return the second operand:

> true || false
true
> true || 'def'
true
> 'abc' || 'def'
'abc'
> '' || 'def'
'def'

theValue || defaultValue

function saveText(text) {
    text = text || '';
    ...
}

setTitle(options.title || 'Untitled');

function countOccurrences(regex, str) {
    // Omitted: check that /g is set for `regex`
    return (str.match(regex) || []).length;
}

The logical not operator ! converts its operand to boolean and then negates it:

> !true
false
> !43
false
> !''
true
> !{}
false

An exponent, eX, is an abbreviation for “multiply with 10^X”:

> 5e2
500
> 5e-2
0.05
> 0.5e2
50

With number literals, the dot for accessing a property must be distinguished from the decimal dot. This leaves you with the following options if you want to invoke toString() on the number literal 123:

123..toString()
123 .toString()  // space before the dot
123.0.toString()
(123).toString()

The two most common ways to convert any value to a number are:

I prefer Number(), because it is more descriptive. Here are some examples:

> Number('')
0
> Number('123')
123
> Number('\t\v\r12.34\n ')  // ignores leading and trailing whitespace
12.34

> Number(false)
0
> Number(true)
1

The global function parseFloat() provides another way to convert values to numbers. However, Number() is usually a better choice, as we shall see in a moment. This code:

parseFloat(str)

converts str to string, trims leading whitespace, and then parses the longest prefix that is a floating-point number. If no such prefix exists (e.g., in an empty string), NaN is returned.

Comparing parseFloat() and Number():

The error value NaN (an abbreviation for “not a number”) is, ironically, a number value:

> typeof NaN
'number'

It is produced by errors such as the following:

> NaN === NaN
false

> [ NaN ].indexOf(NaN)
-1

> isNaN(NaN)
true
> isNaN(33)
false

> isNaN('xyz')
true

function myIsNaN(value) {
    return typeof value === 'number' && isNaN(value);
}

function myIsNaN(value) {
    return value !== value;
}

Infinity is an error value indicating one of two problems: a number can’t be represented because its magnitude is too large, or a division by zero has happened.

Infinity is larger than any other number (except NaN). Similarly, -Infinity is smaller than any other number (except NaN). That makes them useful as default values—for example, when you are looking for a minimum or maximum.

> Math.pow(2, 1023)
8.98846567431158e+307
> Math.pow(2, 1024)
Infinity

> 3 / 0
Infinity
> 3 / -0
-Infinity

> Infinity - Infinity
NaN
> Infinity / Infinity
NaN

> Infinity + Infinity
Infinity
> Infinity * Infinity
Infinity

> var x = Infinity;
> x === Infinity
true

> isFinite(5)
true
> isFinite(Infinity)
false
> isFinite(NaN)
false

Because JavaScript’s numbers keep magnitude and sign separate, each nonnegative number has a negative, including 0.

The rationale for this is that whenever you represent a number digitally, it can become so small that it is indistinguishable from 0, because the encoding is not precise enough to represent the difference. Then a signed zero allows you to record “from which direction” you approached zero; that is, what sign the number had before it was considered zero. Wikipedia nicely sums up the pros and cons of signed zeros:

> -0
0

> (-0).toString()
'0'
> (+0).toString()
'0'

> +0 === -0
true

> [ -0, +0 ].indexOf(+0)
0
> [ +0, -0 ].indexOf(-0)
0

> -0 < +0
false
> +0 < -0
false

> 3 / -0
-Infinity
> 3 / +0
Infinity

> Math.pow(-0, -1)
-Infinity
> Math.pow(+0, -1)
Infinity

> Math.atan2(-0, -1)
-3.141592653589793
> Math.atan2(+0, -1)
3.141592653589793

function isNegativeZero(x) {
    return x === 0 && (1/x < 0);
}

> isNegativeZero(0)
false
> isNegativeZero(-0)
true
> isNegativeZero(33)
false

The previously mentioned representation of numbers is called normalized. In that case, the exponent e is in the range −1023 < e < 1024 (excluding lower and upper bounds). −1023 and 1024 are special exponents: