JavaScript is a dynamic programming language that can be used client-side as well server-side. On the client, JavaScript creates interactive elements that perform business logic and engage the user.
JavaScript was introduced in 1995 by Netscape, the company that created the first browser by the same name. Other browsers followed, and JavaScript quickly gained acceptance as the de-facto client-side scripting language on the internet. Today it is used by millions of websites to add functionality and responsiveness, validate forms, communicate with the server, and much more.
Originally, JavaScript was named LiveScript but was renamed JavaScript as a marketing strategy to benefit from the exploding popularity of the Java programming language at that time. As it turned out, Java evolved into a server-side language and did not succeed on the browser, whereas JavaScript did. The change of name is unfortunate because it has caused a lot of confusion.
Soon after its initial release the JavaScript language was submitted to ECMA International -- an international non-profit standards organization -- for consideration as an industry standard. It was accepted and today we have a standardized version which is called EcmaScript. There are several implementations of the EcmaScript standard, including JavaScript, Jscript (Microsoft), and ActionScript (Adobe). The EcmaScript language is undergoing continuous improvements.
Developers initially felt that JavaScript was an inferior language because of its perceived simplicity. Also, users would frequently disable JavaScript in their browsers because of security concerns. However, over time, starting with the introduction of AJAX and the related Web 2.0 transition, it became clear that JavaScript allows developers to build powerful and responsive web applications. Today JavaScript is considered the Web language and an essential tool for building modern and responsive web apps.
Some developers are finding it difficult to start building serious apps with JavaScript;
in particular those that are coming from mature, object-oriented, statically-typed languages,
such as Java, C++, and C#. This is understandable because JavaScript is dynamically typed
and a rather forgiving language which makes it easy to program, but also easy to make mistakes.
In addition, mistakes and coding errors in JavaScript can be difficult to identify because of
less mature developer tools, such as editors, compilers, debuggers, integration, deployment, etc.
Fortunately, better tooling is becoming available but, as an example, JavaScript's
console.log
is still a common debugging facility.
In this tutorial we cover the JavaScript language and we will highlight those aspects of the language that are painful and error prone. We will explain how to avoid these.
A common misconception is that JavaScript is closely related to Java. It is not. However, it is true that both languages have a C-like syntax but that is where the similarity ends. With Java you create standalone applications, but this is not how JavaScript works. JavaScript requires a hosting environment which most commonly is the browser. The JavaScript code is embedded in an HTML documents and its primary use is to add interactivity to HTML pages. Many developers don't realize this, but JavaScript itself does not have the facilities to provide input and output to the user, it relies on the DOM and the browser for that.
Another difference is that Java is statically typed whereas JavaScript is a dynamically typed language. In a statically typed language, like Java, C#, or C++, you declare variables that are of a certain type, such as, integer, double, or string. At runtime these types do not change. Assigning a string to an integer variable will result in an error.
In Java, assigning a string value to an integer causes an error.
// Java int total = 131; total = "This is Java"; // Error. In fact, won't even compile
In JavaScript, which is a dynamically typed language, a variable can hold any type of value, such as integer, string, boolean, etc. Moreover, at runtime, the type can be changed. For instance, a variable that is bound to a number can easily be re-assigned to a string.
A JavaScript variable is assigned a number value, a string, an object, and even a function. It all works perfectly fine.
// JavaScript var total = 131; // number total = "This is JavaScript"; // string total = {"Customer": "Karen McGrath"}; // object total = function () {alert("Hello");}; // function total(); // => Hello (executes function)
Both Java and JavaScript borrow their programming syntax from C.
For example, for
, do while
,
while
loops, and if
,
switch
, break
,
and continue
statements all
exist in JavaScript. Here are some examples:
var count = 0;
for (var i = 0; i < 10; i++) {
count += i;
}
console.log("count = " + count); // => count = 45
var i = 0;
count = 100;
while (i < count){
i++;
}
console.log("i = " + i); // => i = 100
// switch statement
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Today is Sunday.");
break;
case 1:
console.log("Today is Monday.");
break;
case 2:
console.log("Today is Tuesday.");
break;
case 3:
console.log("Today is Wednesday.");
break;
case 4:
console.log("Today is Thursday.");
break;
case 5:
console.log("Today is Friday.");
break;
case 6:
console.log("Today is Saturday.");
break;
default:
console.log("Today is a strange day.");
}
var value = 9;
if (value < 0) {
console.log("Negative value.");
} else if (value < 10) {
console.log("Between 0 and 9, inclusive.");
} else {
console.log("Greater than or equal to 10.");
}
for (var i = 0; i < 100; i++) {
if (i < 5) {
continue;
} else if (i > 7) {
break;
}
console.log(i); // => 5, 6, 7
}
try {
doesNotExist();
}
catch (ex) {
console.log("Error: " + ex.message); // => Error details
}
Most languages support block-level scoping. Block level variables only
exist within the context of a block of code, such as an if
or a for
statement. In the Java example below, the variable
count
only exists inside the curly braces. It is not visible or
accessible outside the block.
// Java if (accept == true) { int count = 0; // block level scope ... }
In JavaScript there is no block level scoping, but it does support function-level scoping. Function level variables that are declared inside a function are only available and visible to that function.
// JavaScript function calculate () { var count = 0; // function level scope ... }
JavaScript variables that are declared outside functions have global scope and are visible to the entire program.
// JavaScript var accept = true; // global scope if (accept === true) { var count = 0; // global scope }
Statements in JavaScript are delimited with semicolons. You can omit semicolons because the JavaScript engine has an auto-insertion mechanism which adds semicolons where it thinks they are missing. The problem is that this may cause unintended side effects.
For this reason, it is best to always end your statements with semicolons explicitly. Below is an example of how JavaScript looks at statements differently from what the developer intended.
Consider these 2 statements without semi-colons.
// anti-pattern! sum = total1 + total2 (total3 + total4).x()
JavaScript will interpret this as:
sum = total1 + total2(total3 + total4).x();
Another example of what can go wrong.
// anti-pattern!
function sumSquared(x, y) {
return
(x * x) + (y * y);
}
console.log(sumSquared(3, 4)); // => undefined
This function will always return undefined because it executes the code with a
semicolon following return
.
function sumsquared(x,y) { return; // semicolon added! (x * x) + (y * y); }
As mentioned earlier, JavaScript is a weakly-typed language. A variable can be bound to any data type and then change its type. For instance, a variable with a value of 1 an be changed to "Hello", followed by an object assignment.
Sometimes this has confusing consequences. For example, when JavaScript encounters the
expression "2" + 1
, it implicitly converts the numeric 1 to a
string and returns "21"
. Even this expression: null + 0
.
is legal in JavaScript and returns 0
. Such implicit conversions
can cause program errors that are difficult to detect.
console.log(null + 34); // => 34
JavaScript supports a functional programming style. Functions in JavaScript are first-class citizens which it derives from the Scheme programming language. In fact, functions are objects and therefore a function can also have properties and methods.
There is more you can do with functions; you can store them in variables, pass them around as function arguments, and return them as the return value of a function. In JavaScript the difference between code and data can be blurry at times, a characteristic it borrows from the Lisp programming language. Here is an example of a function assigned to a variable. The function is executed by appending the variable name with two parentheses.
var say = function () {
console.log("Hello");
};
say(); // => Hello
Next is an example of a function that is passed as an argument to another function.
var say = function () {
console.log("Hello");
};
function execute(callback) {
callback();
}
execute(say); // => Hello
Finally, an example of a function that is returned by another function.
function go() {
return function () {
console.log("I was returned");
};
}
var result = go();
result(); // => I was returnedh
JavaScript supports functions nested within other functions. The nested functions are
called methods. Methods have access to all parameters and local variables of the functions
it is nested within.
In this example the nested say function has access to the
name variable in the outer function.
function person(first, last) {
var name = first + " " + last;
function say() { // method, nested function
console.log(name);
}
say();
};
person("Joe", " McArthur "); // => Joe McArthur
Arrays are also objects and the built-in array methods such as map, filter, and reduce possess the characteristics of a functional programming style; so they also have access to all array values. Arrays are discussed in a later chapter.
JavaScript does not support classes, but objects play a central role. Since there are no classes you may wonder 1) how are objects created, and 2) does JavaScript support inheritance? The short answers are: there are a few different ways to created objects and as far as inheritance, yes, JavaScript does support inheritance but through a mechanism that uses prototypes. The class-less, prototypal nature of JavaScript will be explored shortly, but first we'll review the types and objects supported by JavaScript.
First the basic types: JavaScript offers several primitive types: Numbers, String and Booleans, and also null type and undefined type. The first three, Numbers Strings, and Booleans, do have properties and methods but they are not objects. When reading a property or method from these types, JavaScript creates a wrapper object, by calling the Number(), String(), or Boolean() constructor behind the scenes. You can also explicitly create these wrapper objects yourself. Below is an example where JavaScript implicitly (i.e. behind the scenes) uses the String constructor to perform a substring operation. The second example uses the Number constructor to convert the number to a string while keeping only two decimals.
var text = "excellent";
console.log(text.substring(0, 5)); // => excel
var count = 20.1045;
console.log(count.toFixed(2)); // => 20.10
A JavaScript object is a collection of properties where each property has a name and a value. Just imagine it as a structure made up of key-value pairs. In more formal terms, JavaScript objects are associative arrays -- similar to Hash, Map, or Dictionary in other languages.
At runtime, you can create an empty object and then add properties of any type, such as primitive types, other objects, and functions to the object. Properties and values can be modified and deleted at any point in time. Properties can be enumerated using the for-in loop. Let's look at some examples.
// Note: the use of new Object() is generally discouraged
var o = new Object();
o.firstName = "Joan";
o.lastName = "Holland";
o.age = 31;
console.log(o.firstName + " " + o.lastName); // => Joan Holland
console.log(typeof o.age); // => number
delete o.firstName;
console.log(o.firstName + " " + o.lastName); // => undefined Holland
for (var prop in o) {
// name: firstName, value: Joan, type: string
// name: age, value: 31, type: number
console.log("name: " + prop + " ,value: " + o[prop] +
" ,type: " + typeof o[prop]);
}
In this example an empty object is created. Then three properties are added by assigning
two strings and a numeric value. After displaying the values and the number type, the
firstName property is deleted. Finally, a for-in
loop displays
the remaining properties (with name, value, and type) on the object.
There are 3 categories of objects in JavaScript:
1. Built-in (native) objects like Math
, Date
, and Array
2. User-defined objects like Book
, Employee
, etc., and
3. Host objects defined by the runtime environment (usually the browser) such as DOM objects
and the window global object.
Objects in the first two categories conform to the EcmaScript specification. However, objects made available by the hosting environment are outside the realm of EcmaScript.
The code below confirms that functions are indeed objects in JavaScript.
function say(name) {
console.log("Hello " + name);
}
console.log(typeof say); // => function
console.log(say instanceof Object); // => true
say.volume = "high";
console.log(say.volume); // => high
The function is of type function
, but it is also an instance
of type Object
. In the last two lines a property named volume is
assigned to the object without a problem, confirming that it behaves like an object.
Functions can also be used to create objects; these are called constructor functions.
First you declare a function and then assign properties and functions (i.e. methods) using
the this
keyword. This example assigns two properties and one method
to this
.
function Book (title, author) { this.title = title; // book properties this.author = author; this.details = function() { // book method return this.title + " by " + this.author; } }
By convention, constructor functions start with an upper-case letter (i.e. Book
).
When a constructor function is called with a new
operator it will create a
new book instance. Internally, the function creates a new blank object and binds it to this
.
Then it executes the function body which commonly assigns properties and methods to this
.
At the end the function returns the newly created objects by an implicit return this
statement.
In the code below a new Book instance is created and we invoke its details
method.
function Book(title, author) {
this.title = title; // book properties
this.author = author;
this.details = function () { // book method
return this.title + " by " + this.author;
}
}
var book = new Book("Ulysses", "James Joyce");
console.log(book.details()); // => Ulysses by James Joyce
Functions and objects are not the only objects in JavaScript; arrays are objects and regular expressions are objects also.
A property of an object can be another object, which in turn can have one or more objects. All these objects provide a lot of flexibility and allow the creation of complex tree and graph structures.
JavaScript has no classes, only objects. So, without classes, is there perhaps another way that objects can derive functionality from other objects? In other words, is inheritance supported by JavaScript? The answer is yes; you can achieve inheritance by using prototypes. This is called prototypal inheritance, a concept borrowed from a language named Self. Prototypal inheritance is implicit, meaning it exists even if you do nothing special.
Let's look at prototypal inheritance. Each object in JavaScript is linked to a prototype object
from which it inherits properties and methods. The default prototype for an object is
Object.prototype
. You can access this property via a property called
prototype
. In the code below we have a constructor function and check its
prototype
property. This is the prototype object that will be assigned
to each book instance that is created by this constructor function.
var Book = function (author) {
this.author = author;
};
console.log(Book.prototype); // => [object Object], so there is something
Since each object has a prototype, it is easy to imagine a series of objects linked together to
form a prototype chain. The beginning of the chain is the current object, linked to its prototype,
which, in turn, is linked to its own prototype, etc. all the way until you reach the root prototype
at Object.prototype
.
Following the prototype chain is how a JavaScript object retrieves its properties and values. When evaluating an expression to retrieve a property, JavaScript determines if the property is defined in the object itself. If it is not found, it looks for the property in the immediate prototype up in the chain. This continues until the root prototype is reached. If the property is found, it is returned, otherwise undefined is returned.
Every function in JavaScript automatically gets a prototype property including constructor function(s).
When you use a function as a constructor, its prototype property is the object that will be assigned as
the prototype to all instances created.
Here is an example.
function Rectangle(width, height) {
this.width = width;
this.height = height;
}
Rectangle.prototype.area = function () {
return this.width * this.height;
};
var r1 = new Rectangle(4, 5);
var r2 = new Rectangle(3, 4);
console.log(r1.area()); // => 20
console.log(r2.area()); // => 12
In the example, r1 and r2 objects are created by the same constructor, so they both inherit from the
same prototype which includes the area
method.
There is considerable confusion surrounding prototypes and prototypal inheritance among JavaScript developers. Many books, blogs, and other references define prototypal inheritance but unfortunately most are rather fuzzy and lack clear code samples.
Our JavaScript JS is designed to solve this confusion once and for all. It takes you step-by-step through JavaScript's prototype system with easy-to-understand diagrams and clear code samples. It may take 20 minutes or more, but once you 'get it' your understanding of JavaScript will have gone up exponentially -- not to mention your confidence in the language. To learn more click here.
When JavaScript was first released the language was interpreted. The source code would be parsed and execute immediately without preliminary compilation into byte code. However, recent versions of browsers include highly optimized JavaScript compilers. Usually this involves the following steps: first it parses the script, checks the syntax, and produces byte code. Next, it takes the byte code as input, generates native (machine) code, and then executes it on the fly.
JavaScript applications need an environment to run in. The JavaScript interpreter/JIT-compiler is implemented as part of the host environment such as a web browser. The script is executed by the JavaScript engine of the web browser, which is by far the most common host environment for JavaScript.
More recently JavaScript is also being used outside the browser. Examples include Mozilla's Rhino and node.js – the latter is a Chrome-based platform to build fast, scalable network applications. JavaScript is also found on the desktop with applications like Open Office, Photoshop, Dreamweaver, and Illustrator, which allow scripting through JavaScript type languages.
JavaScript is a small language; it defines basic types, such as strings, numbers, and a few more advanced
objects and concepts, such Math
, Date
, regular expressions,
events, objects, functions, and arrays. However, JavaScript does not natively have the ability to receive
input from the user and display output back to the user. Neither does it provide an API for graphics,
networking, or storage. For this, it has to rely on its hosting environment. With JavaScript running
in a browser, to communicate back and forth with the user, it needs to interact with the document
object model, commonly known as the 'DOM'.
DOM is an internal representation of the HTML elements that appear in a web page. When the browser
loads a page, it builds the page's DOM in memory and then displays the page. The HTML elements that
represent the structure of a web page are called host objects that provide special access to the host
environment. Based on user input, your JavaScript code modifies the DOM and as a consequence the web
page is updated. Every piece of text, tag, attribute, and style can be accessed and manipulated
using the DOM API. The document object lets you work with the DOM. A simple way to interact with
the user is to use document.write
which writes a message directly into
the web page (note: the use of document.write
is generally not recommended).
var today = new Date(); var day = today.getDay(); if (day === 0 || day === 6) { document.write("It's weekend"); } else { document.write("It's a weekday!"); }
Consider the following textbox on the web page.
<input id="email" type="text" />
Here is how you can access and change this element on the page.
var email = document.getElementById("email"); // gets ref to textbox email.disabled = true; // disable textbox var address = "me@company.com"; document.getElementById("email").value = address; // update value
When JavaScript runs in the browser, it makes a special object available called
window
which is the global object. Note that window
is not
part of the standard JavaScript language, but part of the hosting environment. The alert
method of the window
object is widely used to display messages in a
dialog box in the web browser. Since window
is a global object, JavaScript lets you
use this method without prefixing it with the window
object name and dot operator.
When JavaScript is not running on the browser an entirely different set of host objects will be made
available by the hosting environment. For example, node.js which is hosted on server machines frequently
interacts with HTTP request
and response
objects allowing
the JavaScript program to generate web pages at runtime; indeed very different from the browser.
EcmaScript is the official, standardized version of JavaScript and several well-known implementations exist, including JavaScript, Jscript (Microsoft) and ActionScript (Adobe).
EcmaScript version 5 (ES 5) was introduced in late 2009. This version adds some new features, such as getters
and setters, which allow you to build useful shortcuts for accessing and changing data within an object
(similar to C# properties). Also new is built-in support for JSON, with methods such as
JSON.parse()
and JSON.stringify()
, removing the need to
use external libraries to work with JSON.
In addition, ES 5 added "strict mode", a feature which aims to enforce a restricted variant of the language
by providing thorough error checking and making the scripts less error-prone, simpler, more readable, and
reliable. You enable strict mode, by adding "use strict";
as the first line to your
script, like so.
"use strict"; var text = "Yes, I'm strict now!";
This will apply strict mode to the entire script. You need to be careful when concatenating different scripts from different sources, because strict mode will apply to all scripts and you may include script that was not meant to run in strict mode, which is very likely to cause errors.
To solve this you can limit the scope of strict mode to a function by including "use strict";
as the first line in the function body, like so.
function f() { "use strict"; ... }
Adding "use strict";
changes both syntax and runtime behavior.
For example, strict mode prevents you from accidentally creating global variables by requiring
that each variable is declared explicitly. If you forget to properly declare a variable you
will get an error.
For example, the following will not work.
"use strict"; x = 4; // error function f() { var a = 2; b = a; // error ... }
Adding a var
before x
and before b
will
solve the issue.
Strict mode disallows (i.e. deprecates) certain undesirable features including the with()
construct, the arguments.callee
feature, and octal numbers; if it encounters any of
these JavaScript will throw an error. Furthermore, the use of certain keywords is restricted; for instance
virtually all attempts to use the keywords eval and arguments as variable or function names will throw an error.
var eval = 10; // error function getArea(eval){} // error function eval(){} // error var arguments = []; // error
Because of security concerns, the use of eval()
is generally discouraged, but you can
still use it (even in strict mode). In strict mode, the code passed to eval()
will
also be evaluated in strict mode. Furthermore, eval()
does not let you introduce new
variables which is considered risky because it may hide an existing function or global variable.
"use strict";
var code = "var num = 10;"
eval(code); // variable creation not allowed
console.log(typeof num); // undefined (some browsers return number)
Be aware that strict mode is currently not reliable implemented across all browsers, and, of course, older browsers don't support it at all. It is very important that you test your code with browsers that support it and those that don't. If it works in one it may not work in the other and vice versa.
An easy way to find out whether strict mode is supported is with the following expression:
(function() { "use strict"; return !this; })();
Here is how you use it.
var strict = (function () { "use strict"; return !this; })();
console.log(strict); // => true or false
When strict
is true you can assume strict mode is supported.
ES 5 has a new object model which provides great flexibility on how objects are manipulated and used. For example, objects allow getters and setters; they can prevent enumeration, deletion or manipulation of properties; and they can even block others from adding new properties.
Getters and setters are useful shortcuts to accessing and changing data values in an object.
A getter is invoked when the value of the property is accessed (read). A setter is invoked when the
value of the property is modified (write). The obvious advantage is that the 'private' name variable
in the object is hidden from direct access.
The syntax is rather awkward, but here is an example.
function Person(n) {
var name = n;
this.__defineGetter__("name", function () {
return name;
});
this.__defineSetter__("name", function (val) {
name = val;
});
}
var person = new Person("John");
console.log(person.name); // => John // uses getter
person.name = "Mary"; // uses setter
console.log(person.name); // => Mary // uses getter
In ES 5, each object property has several new attributes. They are: enumerable
,
writable
, and configurable
. With enumerable
you indicate whether the property can be enumerated (using a for-in
loop);
writable
indicates that a property is changeable, and configurable
indicates whether it can be deleted or its other attributes can be changed.
Object.defineProperty
is how you define these properties and their attributes.
Below we are creating a car with 4 wheels. The attributes ensure that the wheels property cannot
be changed or deleted, but wheel will show up when iterating over car's properties (with for-in
).
var car = {}; Object.defineProperty(car, "wheels", { value: 4, writable: false, enumerable: true, configurable: false }); car.wheels = 3; // => not allowed (not writable) for (var prop in car) { alert(prop); // => wheels (enumerable) } delete car.wheels; // => not allowed (not configurable)
ES 5 provides two methods to control object extensibility: Object.preventExtensions
prevents
the addition of new properties to an object, and Object.isExtensible
tells whether an
object is extensible or not.
This below demonstrates their use.
var rectangle = {}; rectangle.width = 10; rectangle.height = 20; if (Object.isExtensible(rectangle)) { // true Object.preventExtensions(rectangle); // disallow property additions } rectangle.volume = 20; // not allowed
With ES 5 you have the ability to seal an object. A sealed object won't allow new properties
to be added nor will it allow existing properties or its descriptors be changed. But it does
allow reading and writing the property values. Two methods support this feature:
Object.seal
and Object.isSealed
; the first one to seal the object,
the second one to determine whether an object is sealed.
var employee = { firstName: "Jack", lastName: "Watson" };
Object.seal(employee);
console.log(Object.isSealed(employee)); // => true
employee.firstName = "Tommie"; // okay
Freezing is equivalent to sealing, but disallows reading or writing property values.
The two method involved are Object.freeze
and
Object.isFrozen
.
var employee = { firstName: "Jack", lastName: "Watson" };
Object.freeze(employee);
console.log(Object.isFrozen(employee)); // => true
employee.firstName = "Tommie"; // not allowed