JS-Tricks.com

typeof null === “object”

An initially confusing and counter-intuitive behavior of JavaScript is that the type determination of a variable being null using typeof returns "object".

var demo = null;
typeof demo; // "object"

The reason for this is that typeof will always return "object" for native non-callable objects. Actually, this stands since the beginning of JavaScript and the operator simply returns the type string of a given reference according to the table specified in the ECMAScript language specification ECMA-262 (see page 81).

image

A fix that would have resulted in typeof null === "null" has been proposed (via an opt-in), but was rejected as it was too late to fix the “problem” as a change of typeof null would break existing code like incorrect implementations of type checks.

Default arguments/parameters in JavaScript

When designing your functions, it’s often helpful to be able to assign default values for arguments/parameters that aren’t passed later. Unlike programming languages like PHP, JavaScript doesn’t provide this functionality inherently. Undefined arguments are, well: undefined.

var sayHello = function(name) {
    console.log('Hello, ' + name);
}

By using the shortcut computation of boolean expressions, you can define a default value for each argument which is assigned if the argument is originally undefined.

var sayHello = function(name) {
    name = name || 'Nobody';
    console.log('Hello, ' + name);
}

While sayHello('Peter') still works, sayHello() (called without any arguments) would now result Hello, Nobody. Neat.

Class constructors without using “new” in JavaScript

When creating a class constructor in JavaScript, you may prefer to allow its instantiation without using the new keyword—just like jQuery does with their $() factory function. Let’s assume the following class as a simple example.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

While var jack = new Person('Jack', 32) would work, var jim = Person('Jim', 34) doesn’t—so far. Actually jim would be simply undefined after the call. But even worse: if someone calls the constructor without using new, the global scope will be poluted by the two variables name and age as calling a function without specifying its context forces the browser to pass it in the global object (which is window). By checking whether the requested object is already an instance of the class, you can return a new instance if it isn’t or execute the actual constructor if it is.

function Person(name, age) {
    if (this instanceof Person) {
        this.name = name;
        this.age = age;
    } else {
        return new Person(name, age);
    }
}

Both var jack = new Person('Jack', 32) and var jim = Person('Jim', 34) would work now. The following way does exactly the same but is a bit shorter and handier.

function Person(name, age) {
    if (!(this instanceof Person)) return new Person(name, age);
    this.name = name;
    this.age = age;
}

jQuery’s .load() callback for cached images in Internet Explorer

jQuery’s .load() function is often used if a callback function is required be executed as soon as an element is completely loaded. This is gladly used for loading images completely at first and processing certain attributes of an image (e.g. its width and height) afterwards. However, Microsoft’s Internet Explorer doesn’t execute the callback if images are cached already.

While often appending a random number (to prevent caching) is recommended for this known issue, there’s a much more resource-efficient trick: simply set the src attribute of an image after the definition of its .load() function.

$('img').load(function() {
    // do something
}).attr('src', '/new-image-source.jpg');

I see some JavaScript scripts using »!0« and/or »!1« occasionally. What does that mean exactly?

Anonymous

Those are shortcuts for true and false, making use of JavaScript’s logical NOT operator (the exclamation point) and the fact that JavaScript uses weak typing, meaning that 0, false and null all mean the same in comparisons unless you force JavaScript to compare the type as well (by using ===). Using this knowledge, you can shorten true using !0 and false using !1.

Prevent links in standalone web apps to be opened in Mobile Safari under iOS

iPhones, iPads, and iPods offer the opportunity to integrate Web apps (including an icon) just like conventional, native apps on the home screen. Those Web apps are then started in a standalone mode and behave optically just like real apps. However, a bad feature of iOS for Web app development is that links in such Web apps (which actually are simply websites that are displayed in full screen mode) automatically open in Mobile Safari — that is, the standalone app closes and switches to the Safari app. Annoying. You can use the following snippet of JavaScript (include it at the bottom of your HTML site) to prevent this.

var a = document.getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
    a[i].onclick = function() {
        window.location = this.getAttribute('href');
        return false;
    }
}

If you’re using jQuery in your Web app, you can use the following, much-shorter version of the snippet.

$(document).on('click', 'a[href]', function(event) {
    event.preventDefault();
    window.location = $(this).attr('href');
});

Detect Touch devices using JavaScript

The following function allows the detection of touch devices (smartphones, tablets, …) using JavaScript. As an example, this allows you to offer certain actions on a website or web application only for appropriate devices like disabling hover effects for touch devices.

function isTouchDevice() {
    return ('ontouchstart' in window);
}