Dofactory.com
Dofactory.com
Earn income with your JavaScript skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

What is JavaScript?

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 Tutorial

History

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.

JavaScript versus Java

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:


for loop

#

var count = 0;
for (var i = 0; i < 10; i++) {
    count += i;
}
console.log("count = " + count);         // => count = 45

while loop

#

var i = 0;
count = 100;
while (i < count){
   i++;
}
console.log("i = " + i);            // => i = 100

switch statement

#

// 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.");
}

if then else

#

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.");
}

break and continue

#

for (var i = 0; i < 100; i++) {
    if (i < 5) {
        continue;
    } else if (i > 7) {
        break;
    }
    console.log(i);         // => 5, 6, 7
}

try, catch

#

try {
    doesNotExist();
}
catch (ex) {
    console.log("Error: " + ex.message);    // => Error details
}

Scoping

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
   ...  
}

Function 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
   ...                   
}

Global 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   
}

Semicolons

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);
}

JavaScript is Weakly Typed

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

Functional programming

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 is Object-Oriented, but Class-less

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

Objects

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.


Functions

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.


Prototypes

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.


JavaScript runtime and hosting environment

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

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

Last updated on Sep 30, 2023

Earn income with your JavaScript skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.
Guides