Intro to JavaScript from Java

This introduction attempts to explain JavaScript to those with prior programming experience in Java, and will point out some common mistakes along the way. It is just for the JavaScript language and doesn't contain anything browser-related. The code examples use an arrow to indicate code that is typed in, which will be immediately followed by the result if there is one:

→ 2 + 2;
  4

Even if you have already used JavaScript, there will hopefully still be some useful information (especially towards the end). It is meant to be read from top to bottom but can also be used as a reference.

Booleans

Comparisons evaluate to true and false, just like in Java:

→ 1 != 2;
  true
→ 1 == 2;
  false

JavaScript also has the strict equality operators === and !==, which don't attempt to convert types before comparison. These should be preferred over == and != because they have a lower potential for bugs:

→ 0 == "";
  true
→ 0 === "";
  false

Strings

A String object is like a String in Java (they both use 16 bits per character). Strings can be declared using either single or double quotes. There is no separate character type in JavaScript, so instead characters are just strings of length 1. Strings in JavaScript and Java share many similar methods:

→ "hello".length;
  5
→ "hello".charAt(0);
  "h"
→ "hello, world".toUpperCase();
  "HELLO, WORLD"
→ "a" + "b" + 2;
  "ab2"

JavaScript strings are immutable (they can't be modified). A mutable operation such as changing a character is performed by constructing a new string with that character changed.

Numbers

A Number object is like a double in Java, which is a 64-bit floating-point value. Strings can be converted to numbers using the parseFloat function. JavaScript has no int type, although you can get rid of the fractional part of a number with the parseInt function (which works on both numbers and strings).

→ parseInt("04105");
  2117
→ parseInt("04105", 10);
  4105

JavaScript also has NaN (not a number) and Infinity, which are returned by some computations:

→ parseInt("text", 10);
  NaN
→ 1 / 0;
  Infinity
→ -1 / 0;
  -Infinity

Regular Expressions

JavaScript has built-in support for regular expressions. A regular expression can either be created using the literal syntax or using the RegExp constructor:

→ /\d+/.exec("abc");
  null
→ /\d+/.exec("123");
  ["123"]
→ new RegExp("^(.*)(\\d)$").exec("five5");
  ["five5", "five", "5"]

See Mozilla's documentation for more details.

Variables

A variable is declared with the var keyword:

→ var a = null;
→ a;
  null

Uninitialized variables are set to a special value called undefined:

→ var a;
→ a;
  undefined

→ var x;
→ x === undefined;
  true
→ x = 2;
→ x === undefined;
  false

→ var x;
→ x === undefined;
  true
→ undefined = 2;
→ x === undefined;
  false
→ typeof x == "undefined";
  true

Objects

An Object is similar to a HashMap<String, Object> in Java. Objects can be easily defined using the object literal syntax, and properties can be accessed using brackets or a dot:

→ var object = { a: 3.14159, b: "text" };
→ object["a"];
  3.14195
→ object.b;
  "text"

Object properties can be added via assignment, removed via delete, and queried via in:

→ var object = {};
→ object.a = 2;
→ "a" in object;
  true
→ delete object.a;
→ "a" in object;
  false

The properties in an object can be iterated through using a for-in loop:

→ var object = { a: 1, b: 2 }, total = 0;
→ for (var propertyName in object) {
    total += object[propertyName];
  }
→ total;
  3

→ var map = {}, key = '__proto__';
→ map[key] = 1;
→ map[key];
  Object.prototype
→ map[' ' + key] = 1;
→ map[' ' + key];
  1

→ function hasKey(obj, key) {
    return obj.hasOwnProperty(' ' + key);
  }
→ function getKey(obj, key) {
    return hasKey(obj, key) ? obj[' ' + key] : null;
  }
→ function setKey(obj, key, value) {
    obj[' ' + key] = value;
  }
→ var map = {}, key = '__proto__';
→ getKey(map, key);
  null
→ setKey(map, key, 1);
→ getKey(map, key);
  1

Arrays

Arrays can be created using the array literal syntax and indexed into using brackets. Arrays are actually just objects with properties that happen to be numbers and with a special length property:

→ var array = [3.14159, "text"];
→ array[0];
  3.14159
→ array["0"];
  3.14159
→ array.length;
  2

Inserting and removing elements from an array is all done with the splice() method, although there are special-case methods for adding and removing from the beginning and end of an array (push(), pop(), shift(), and unshift()). The filter() and map() methods are also very useful for concise array manipulations.

Functions

Functions are declared using the function keyword and have no type information for their arguments or return type. A function doesn't have to be named, in which case it's an anonymous function:

→ function f(x) { return x * x; }
→ var g = function(y) { return Math.sqrt(y); };

Variable scope is different from Java. There is only one scope per function and blocks do not introduce a child scope:

→ function func() {
    if (true) {
      var x = 2;
    }
    return x;
  }
→ f();
  2

Variables declared in the global scope are actually stored as properties on the window object:

→ var x = 2;
→ window.x;
  2

A function is a Function object, meaning it can be treated like any other data type. New functions can be constructed dynamically via the Function constructor:

→ var add = new Function("x", "y", "return x + y;");
→ add(1, 2);
  3

Functions can also be declared inside other functions, in which case they have access to the variable scope of the outer function. JavaScript functions are closures, which means they retain access to all variables they had access to when they were defined:

→ function createAdder(value) {
    return function(x) {
      return x + value;
    };
  }
→ var adder = createAdder(3);
→ adder(2);
  5

→ var funcs = [];
→ for (var i = 0; i < 3; i++) {
    var value = i * 2;
    funcs.push(function() {
      return value;
    });
  }
→ funcs[0]();
  4

→ var funcs = [];
→ for (var i = 0; i < 3; i++) {
    (function(value) {
      funcs.push(function() {
        return value;
      });
    })(i * 2);
  }
→ funcs[0]();
  0

Functions can have a variable number of arguments, which can be accessed using the magic arguments variable:

→ function sum() {
    var total = 0;
    for (var i = 0; i < arguments.length; i++) {
      total += arguments[i];
    }
    return total;
  }
→ sum(1, 2, 3);
  6

The value undefined is used when arguments are missing or when a function doesn't return anything:

→ function f(a, b) { return [a, b]; }
→ f(1);
  [1, undefined]
→ function g() {}
→ g();
  undefined

Every function has an associated execution context called this. You can think of this as "how we got to the function," which is the global window object for plain functions and the object before the dot for functions called on objects:

→ function func() { return this; }
→ func();
  window
→ var obj = { f: func };
→ obj.f();
  obj

The value of this can be explicitly set with the call or apply methods, which are properties of every function object. The first argument to both call and apply is the object to use as this inside the function:

→ function f(a, b) { return [this, a, b]; }
→ f(1, 2);
  [window, 1, 2]
→ f.call(window, 1, 2);
  [window, 1, 2]
→ f.apply(window, [1, 2]);
  [window, 1, 2]
→ f.call(0, 1, 2);
  [0, 1, 2]

Classes/Prototypes

While JavaScript is object-oriented, it is prototype-based rather than class-based. An object can inherit properties from another object, called its prototype. Instances retain a link to their prototype, and modifying the prototype modifies all instances of that prototype as well. Accessing a property on an object first checks for a value defined directly on that object. If there is no such definition, the object's prototype is checked next, then the prototype's prototype, and all the way up the prototype chain until the prototype for Object is reached. An object's prototype cannot be set directly and is fixed at construction time. Although most JavaScript engines will allow you to access and modify it directly via the __proto__ property, that property still non-standard and doesn't work in IE.

Java-like classes can still be emulated on top of prototypes. There are many different ways to do this and we will only cover one method here, although it is likely to be one of the more efficient methods in terms of memory and speed. Before we do that, however, we need to know how to set an object's prototype. There are two ways to do this, either the Object.create()¹ method or the new keyword. The core functionality of Object.create() is to create an empty object with its prototype set to the first argument:

→ var a = { value: 1 };
→ var b = Object.create(a);
→ b.value;
  1
→ a.value = 2;
→ b.value;
  2

The other way of setting the prototype of an object is using the new keyword. This is where it starts to get weird. Any function can serve as an object constructor:

→ function TestClass(value) {
    this.number = value;
  }
→ var t = new TestClass(1);
→ t.number;
  1
→ t instanceof TestClass;
  true

Every function has a prototype property that is initially set to an empty object. The new keyword in the above code creates a new object, sets the prototype of that object to TestClass.prototype, and calls the TestClass function with this set to the new instance. If we were implementing new manually, that would look something like this:

  // This implements "var t = new TestClass(1);"
→ var t = Object.create(TestClass.prototype);
→ TestClass.call(t, 1);

This allows a direct mapping of class concepts to prototype:

public class Vector {
  public double x;
  public double y;

  public Vector(double x, double y) {
    this.x = x;
    this.y = y;
  }

  public Vector add(Vector other) {
    return new Vector(x + other.x, y + other.y);
  }
}

function Vector(x, y) {
  this.x = x;
  this.y = y;
}

Vector.prototype.add = function(other) {
  return new Vector(this.x + other.x, this.y + other.y);
};

Because of how this works, we don't actually need prototypes to create a singleton. We can just create them directly using an object literal:

→ var singleton = {
    nextID: 0,
    getID: function() {
      return this.nextID++;
    }
  };
→ singleton.getID();
  0
→ singleton.getID();
  1

→ Object.prototype.problem = true;
→ var obj = { a: 1, b: 2 };
→ var names = [];
→ for (var x in obj) {
    names.push(x);
  }
→ names;
  ["a", "b", "problem"]

→ Object.prototype.problem = true;
→ var obj = { a: 1, b: 2 };
→ var names = [];
→ for (var x in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, x)) {
      names.push(x);
    }
  }
→ names;
  ["a", "b"]

Subclasses

To create subclasses, we need to extend the prototype chain of the subclass to include the superclass. Recall that the prototype for an existing object is inaccessible in JavaScript so we cannot set it directly (excluding non-standard extensions like __proto__), but we can set the prototype at creation time via either Object.create() or new. The key to subclassing is to set Subclass.prototype = Object.create(Superclass.prototype):

public class Field {
  public String value;
  public static String FONT = "Helvetica";

  public Field(String value) {
    this.value = value;
  }

  public String getHTML() {
    return "<input value=\"" + sanitize(value) + "\">";
  }

  public boolean validate() {
    return true;
  }

  public static Font getFont() {
    return new Font(FONT);
  }
}

public class EmailField extends Field {
  public String domain;

  public EmailField(String value, String domain) {
    super(value);
    this.domain = domain;
  }

  public boolean validate() {
    return super.validate() &&
      isValidEmail(this.value, this.domain);
  }
}

function Field(value) {
  this.value = value;
}

Field.FONT = "Helvetica";

Field.prototype.getHTML = function() {
  return "<input value=\"" + sanitize(this.value) + "\">";
}

Field.prototype.validate = function() {
  return true;
};

Field.getFont = function() {
  return new Font(Field.FONT);
};

function EmailField(value, domain) {
  Field.call(this, value);
  this.domain = domain;
}

EmailField.prototype = Object.create(Field.prototype);

EmailField.prototype.validate = function() {
  return Field.prototype.validate.call(this) &&
    isValidEmail(this.value, this.domain);
};

Tricks

This section contains common JavaScript syntactic shortcuts that you will likely see in the wild. While they are more concise, they will likely be confusing to people reading your code who are not familiar with JavaScript, so use them with caution.

The short-circuit || operator is often used to provide defaults for optional values that may be undefined. This operand evaluates to the right operand if the left operand is false, null, undefined, "", or 0, otherwise it evaluates to the left operand. In the example below, options.host and options.port are undefined when not specified, and so revert to their defaults via the || operator:

→ function createURL(path, options) {
    options = options || {};
    var host = options.host || "localhost";
    var port = options.port || 80;
    return { path: path, host: host, port: port };
  }
→ createURL("/");
  { path: "/", host: "localhost", port: 80 }
→ createURL("/dev", { port: 8080 });
  { path: "/dev", host: "localhost", port: 8080 }

The short-circuit && operator is sometimes used to guard against values that may be null. This operand evaluates to the left operand if the left operand is false, null, undefined, "", or 0, otherwise it evaluates to the right operand. The code below uses the && operator to avoid accessing the name property of null (which would cause an error):

→ function getName(obj) { return obj && obj.name; }
→ getName(null);
  null
→ getName({ name: "Steve" });
  "Steve"

Casting is sometimes done using the unary + operator or a double application of the unary ! operator. These cast to a Number or a Boolean, respectively:

→ function test(value) {
    return [Number(value), +value, Boolean(value), !!value];
  }
→ test("52");
  [52, 52, true, true]
→ test(null);
  [0, 0, false, false]

¹ Note that Object.create() isn't available in versions of IE before IE 9. Luckily we can emulate it using new, the other way to set an object's prototype. While Object.create() has more functionality than we used in this article, this replacement will cover setting the prototype:

→ Object.create = Object.create || function(proto) {
    function proxy() {}
    proxy.prototype = proto;
    return new proxy();
  };

Written by Evan Wallace in 2011.