From jQuery JavaScript Library

JavaScript provides several built-in datatypes. In addition to those, this page documents also virtual types like Selectors, enhanced pseudo-types like Events and all and everything you wanted to know about Functions.

You should be able to try out most of the examples below by just copying them to the Firebug console (note: Firebug requires Firefox).

Whenever an example mentions that a types defaults to a boolean value, the result is good to know when using that type in a boolean context:

 var x = ""
 if ( x )
   console.log("x defaulted to true")
 else
   console.log("x defaulted to false")

In this case, "x defaulted to false" is printed.

To keep the examples short, the invert-operator is used to show a boolean context:

 !x // true

On to the actual types.

Contents 1 String 1.1 Quoting 1.2 Built-in Methods 1.3 Length Property 1.4 Boolean Default 2 Number 2.1 Boolean Default 2.2 Math 2.3 Parsing Numbers 2.4 Numbers to Strings 2.5 NaN and Infinity 2.6 Integer 2.7 Float 3 Boolean 4 Object 4.1 Dot Notation 4.2 Array Notation 4.3 Iteration 4.4 Boolean default 4.5 Prototype 5 Options 6 Array 6.1 Iteration 6.2 Boolean Default 6.3 Array<Type> Notation 7 Function 7.1 Arguments 7.2 Context, Call and Apply 7.3 Scope 7.4 Closures 7.5 Proxy Pattern 8 Callback 9 Selector 10 Event 11 Element

String

 "I'm a String in JavaScript!"
 'So am I!'

A string in JavaScript is an immutable object that contains none, one or many characters.

The type of a string is "string".

 typeof "some string"; // "string"

Quoting

A string can be defined using single or double quotes. You can nest single quotes inside of double quotes, and the other way round. To mix double quotes with double quotes, the nested ones have to be escaped with a backslash.

 "You make 'me' sad."
 'Holy "cranking" moses!'
 "<a href=\"home\">Home</a>"

Built-in Methods

A string in JavaScript has some built-in methods to manipulate the string, though the result is always a new string - or something else, eg. split returns an array.

 "hello".charAt(0) // "h"
 "hello".toUpperCase() // "HELLO"
 "Hello".toLowerCase() // "hello"
 "hello".replace(/e|o/g, "x") // "hxllx"
 "1,2,3".split(",") // ["1", "2", "3"]

Length Property

All strings have a length property.

 "Hello".length // 5
 "".length // 0

Boolean Default

An empty string defaults to false:

 !"" // true
 !"hello" // false

Number

 12
 3.543

Numbers in JavaScript are double-precision 64-bit format IEEE 754 values. They are immutable, just as strings. All operators common in c-based languages are available to work with numbers (+, -, *, /, %, =, +=, -=, *=, /=, ++, --).

The type of a number is "number".

 typeof 12 // "number"
 typeof 3.543 // "number"

Boolean Default

If a number is zero, it defaults to false:

 !0 // true
 !1 // false
 !-1 // false

Due to the implementation of numbers as double-precision values, the following result is not an error:

 0.1 + 0.2 // 0.30000000000000004

Math

JavaScript provides utilities to work with numbers in the Math object:

 Math.PI // 3.141592653589793
 Math.cos(Math.PI) // -1

Parsing Numbers

parseInt and parseFloat help parsing strings into numbers. Both do some implicit conversion if the base isn't specified:

 parseInt("123") = 123 (implicit decimal)
 parseInt("010") = 8 (implicit octal)
 parseInt("010", 10) = 10 (explicit decimal)
 parseInt("11", 2) = 3 (explicit binary)
 parseFloat("10.10") = 10.1

Numbers to Strings

When appending numbers to string, the result is always a string. The operator is the same, so be careful: If you want to add numbers and then append them to a string, put parentheses around them:

"" + 1 + 2; // "12"
"" + (1 + 2); // "3"

NaN and Infinity

Parsing something that isn't a number results in NaN. isNaN helps to detect those cases:

 parseInt("hello", 10) // NaN
 isNaN(parseInt("hello", 10)) // true

Division through zero results in Infinity:

 1 / 0 // Infinity

Both NaN and Infinity are of type "number":

 typeof NaN // "number"
 typeof Infinity // "number"

Integer

An integer is a plain Number type, but whenever explicitly mentioned, indicates that a non-floating-point number is expected.

Float

A float is a plain Number type, just as Integer, but whenever explicitly mentioned, indicates that a floating-point number is expected.

Boolean

A boolean in JavaScript can be either true or false:

 if ( true ) console.log("always!")
 if ( false ) console.log("never!")

When an option is specified as a boolean, it often looks like this:

$("...").somePlugin({
  hideOnStartup: true,
  onlyOnce: false
});

Object

Everything in JavaScript is an object, though some are more objective (haha). The easiest way to create an object is the object literal:

 var x = {};
 var y = {
   name: "Pete",
   age: 15
 };

The type of an object is "object":

 typeof {} // "object"

Dot Notation

You can write and read properties of an object using the dot notation:

 y.name // "Pete"
 y.age // 15
 x.name = y.name + " Pan" // "Pete Pan"
 x.age = y.age + 1 // 16

Array Notation

Or you write and read properties using the array notation, which allows you to dynamically choose the property:

 var operations = {
   increase: "++",
   decrease: "--"
 }
 var operation = "increase";
 operations[operation] // "++";
 operations["multiply"] = "*"; // "*"

Iteration

Iterating over objects is easy with the for-in-loop:

 var obj = {
   name: "Pete",
   age: 15
 };
 for(key in obj) {
   console.log("key", key, "value", obj[key]);
 }
 // "key", "name", "value", "Pete"
 // "key", "age", "value", 15

Note that for-in-loop can be spoiled by extending Object.prototype (see Object.prototype is verboten) so take care when using other libraries.

jQuery provides a generic each-function to iterate over properties of objects, as well as elements of arrays:

 jQuery.each(obj, function(key, value) {
   console.log("key", key, "value", value);
 });

The drawback is that the callback is called in the context of each value, therefore you lose the context of your own object if applicable. More on this below at Functions.

Boolean default

An object, no matter if it has properties or not, never defaults to false:

 !{} // false

Prototype

All objects have a prototype property. Whenever the interpreter looks for a property, it also checks the prototype. jQuery uses that extensively to add methods to jQuery instances.

 var form = $("#myform");
 form.clearForm; // undefined
 form.fn.clearForm = function() {
   return this.find(":input").each(function() {
     this.value = "";
   }).end();
 };
 form.clearForm() // works for all instances of jQuery objects, because the new method was added to the prototype

Options

Options are plain JavaScript objects. Whenever Options is mentioned as a type, that object and also all of its properties should be optional. There are exceptions where at least one option is required. jQuery's most prominent use of Options is its ajax-method. Nearly all jQuery plugins provide a Options-based API: They work without any configuration, but offer the user to specify whatever customization she needs.

Lets look at an example from the form plugin. It allows you to submit a form via ajax with this simple line of code:

 $("#myform").ajaxForm();

In that mode, it uses the form's action-attribute as the AJAX-URL and the form's method-attribute to determine whether to GET or POST the form. You can override both defaults by specifiying them as options:

 $("#myform").ajaxForm({
   url: "mypage.php",
   type: "POST"
 });

Array

Arrays in JavaScript are mutable lists with a few built-in methods. You can define arrays using the array literal:

 var x = [];
 var y = [1, 2, 3];

The type of an array is "object":

 typeof []; // "object"
 typeof [1, 2, 3]; // "object"

Reading and writing elements to an array uses the array-notation:

 x[0] = 1;
 y[2] // 3

Iteration

An array has a length property that is useful for iteration:

 for (var i = 0; i < a.length; i++) {
   // Do something with a[i]
 }

When performance is critical, reading the length property only once can help to speed things up. This should be used only when a performance bottleneck was discovered:

 for (var i = 0, j = a.length; i < j; i++) {
   // Do something with a[i]
 }

Another variation defines a variable that is filled for each iteration, removing the array-notation from the loop-body. It does not work when the array contains 0 or empty strings!

 for (var i = 0, item; item = a[i]; i++) {
   // Do something with item
 }

jQuery provides a generic each-function to iterate over element of arrays, as well as properties of objects:

 var x = [1, 2, 3];
 jQuery.each(x, function(index, value) {
   console.log("index", index, "value", value);
 });

The drawback is that the callback is called in the context of each value, therefore you lose the context of your own object if applicable. More on this below at Functions.

The length property can also be used to add elements to the end of an array. That is equivalent to using the push-method:

 var x = [];
 x.push(1);
 x[x.length] = 2;
 x // 1, 2

You'll see both variations a lot when looking through JavaScript library code.

Other built-in methods are reverse, join, shift, unshift, pop, slice, splice and sort:

 var x = [0, 3, 1, 2];
 x.reverse() // [2, 1, 3, 0]
 x.join(" – ") // "2 - 1 - 3 - 0"
 x.pop() // [2, 1, 3]
 x.unshift(-1) // [-1, 2, 1, 3]
 x.shift() // [2, 1, 3]
 x.sort() // [1, 2, 3]
 x.splice(1, 2) // [2, 3]

Note: .unshift() method does not return a length property in Internet Explorer.

Boolean Default

An array, no matter if it has elements or not, never defaults to false:

 ![] // false

Array<Type> Notation

In the jQuery API you'll often find the notation of Array<Type>:

dragPrevention	Array<String>

This indicates that the method doesn't only expect an array as the argument, but also specifies the expected type. The notation is borrowed from Java 5's generics notation (or C++ templates).

Function

A function in JavaScript can be either named or anonymous. An anonymous function can be assigned to a variable or passed to a method.

function named() {}
var handler = function() {}

You see a lot of anonymous functions in jQuery code:

 $(document).ready(function() {});
 $("a").click(function() {});
 $.ajax({
   url: "someurl.php",
   success: function() {}
 });

The type of a function is "function".

Arguments

Inside a function a special variable "arguments" is always available. Its similar to an array, ie. it has a length property, but it lacks the built-in methods of an array. The elements of the pseudo-array are the argument of the function call.

function log(x) {
  console.log(typeof x, arguments.length);
}
log(); // "undefined", 0
log(1); // "number", 1
log("1", "2", "3"); // "string", 3

Context, Call and Apply

In JavaScript, the variable "this" always refers to the current context. By default, "this" refers to the window object. Within a function this context can change, depending on how the function is called.

All event handlers in jQuery are called with the handling element as the context.

$(document).ready(function() {
  // this refers to window.document
});
$("a").click(function() {
  // this refers to an anchor DOM element
});

You can specify the context for a function call using the function-built-in methods call and apply. The difference between them is how they pass arguments. Call passes all arguments through as arguments to the function, while apply accepts an array as the arguments.

function scope() {
  console.log(this, arguments.length);
}
scope() // window, 0
scope.call("foobar", [1,2]); // "foobar", 1
scope.apply("foobar", [1,2]); // "foobar", 2

Scope

In JavaScript, all variables defined inside a function are only visible inside that function scope. Consider the following example:

 // global
 var x = 0;
 (function() {
   // private
   var x = 1;
   console.log(x); // 1
 })();
 console.log(x); // 0

It defines a variable x in the global scope, then defines an anonymous function and executes it immediately (the additional parentheses are required for immediate execution). Inside the function another variable x is defined with a different value. It is only visible within that function and doesn't overwrite the global variable.

Closures

Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope. In the following example, the variable counter is visible within the create, increment, and print functions, but not outside of them.

function create() {
  var counter = 0;
  return {
    increment: function() {
      counter++;
    },
    print: function() {
      console.log(counter);
    }
  }
}
var c = create();
c.increment();
c.print(); // 1

The pattern allows you to create objects with methods that operate on data that isn't visible to the outside—the very basics of object-oriented programming.

Proxy Pattern

Combining the above knowledge gives you as a JavaScript developer quite a lot of power. One way to combine that is to implement a proxy pattern in JavaScript, enabling the basics of aspect-oriented programming (AOP):

(function() {
  // log all calls to setArray
  var proxied = jQuery.fn.setArray;
  jQuery.fn.setArray = function() {
    console.log(this, arguments);
    return proxied.apply(this, arguments);
  };
});

The above wraps its code in a function to hide the "proxied"-variable. It saves jQuery's setArray-method in a closure and overwrites it. The proxy then logs all calls to the method and delegates the call to the original. Using apply(this, arguments) guarantees that the caller won't be able to notice the difference between the original and the proxied method.

Callback

A callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered. jQuery's event system uses such callbacks everywhere:

 $("body").click(function(event) {
   console.log("clicked: " + event.target);
 });

Most callbacks provide arguments and a scope. In the event-handler example, the callback is called with one argument, an Event. The scope is set to the handling element, in the above example, document.body.

Some callbacks are required to return something, others make that return value optional. To prevent a form submission, a submit event handler can return false:

 $("#myform").submit(function() {
   return false;
 });

Instead of always returning false, the callback could check fields of the form for validity, and return false only when the form is invalid.

Selector

A selector is used in jQuery to select DOM elements from a DOM document. That document is, in most cases, the DOM document present in all browsers, but can also be a XML document received via AJAX.

The selectors are a composition of CSS and custom additions. XPath selectors are available as a plugin.

All selectors available in jQuery are documented on the Selectors API page.

There are lot of plugins that leverage jQuery's selectors in other ways. The validation plugin accepts a selector to specify a dependency, whether an input is required or not:

 emailrules: {
   required: "#email:filled"
 }

This would make a checkbox with name "emailrules" required only if the user entered an email address in the email field, selected via its id, filtered via a custom selector ":filled" that the validation plugin provides.

If Selector is specified as the type of an argument, it accepts everything that the jQuery constructor accepts, eg. Strings, Elements, Lists of Elements.

Event

jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.

Those properties are all documented, and accompanied by examples, on the Event page.

Element

An element in the Document Object Model (DOM) has attributes, text and children. It provides methods to traverse the parent and children and to get access to its attributes. Due to a lot of flaws in DOM API specifications and implementations, those methods are no fun to use. jQuery provides a wrapper around those elements to help interacting with the DOM. But often enough you will be working directly with DOM elements, or see methods that (also) accept DOM elements as arguments.

Whenever you use jQuery's each-method, the context of your callback is set to a DOM element. That is also the case for event handlers.

Some properties of DOM elements are quite consistent among browsers. Consider this example of a simple on-blur-validation:

$(":text").blur(function() {
  if(!this.value) {
   alert("Please enter some text!");
  }
});

You could replace this.value with $(this).val() to access the value of the text input via jQuery, but in that case you don't gain anything.