5 Minute JavaScript #11: Prototypes

Last week, we discussed the JSON format. Today we are going to take a deeper look in the object structure in JavaScript. In most object-oriented programming languages you have some kind of classical inheritance. This means that the language allows you to define a sort of blueprint of an object named a class. JavaScript doesn’t work with these concepts. Instead, it works with prototypes. The dynamic nature of JavaScript allows you to apply inheritance on object level instead of class level. Every object has a prototype object, you can set this prototype object and automatically you will be able to access properties or functions on the child object.

var parentObject = { x:1, y: 1 };
var childObject = { x: 2, a: 2 };
childObject.prototype = parentObject;

In the example above, the childObject has three properties: x, y and a. Whenever JavaScript is interpreted, the interpreter selects the first instance it finds of a property/function. So if we would look for the property x on childObject, we would find 2 instead of 1 because the childObject’s x definition is the first one the interpreter encounters.

In JavaScript native types also have a prototype object. That prototype contains all the methods you can use on the type. For example the String type has a prototype object that contains the following methods:

  • String.prototype.charAt()
  • String.prototype.slice()
  • String.prototype.trim()
  • String.prototype.split()
  • String.prototype.toUpperCase()

These prototype methods are easy to use, you can just call them from the object, e.g. “lowercase”.toUpperCase(). Not only the String type has these methods, also Object, Array, Number and even Function!

var char = 'my string'.charAt(0);

We use these prototype functions every day and the fun thing is that we can create our own. But that’s for the next blogpost.

5 Minute JavaScript #10 JSON

This week we’re taking a break from complex code structures (like modules in the previous issue) and we get back to basics. JSON is a lightweight data-interchange format. Easy to read/parse but also to write/generate. It’s related to the way we notate objects in JavaScript, that’s why it’s called JavaScript Object Notation. Visit the website: http://json.org/ for complete information about JSON.

An example of a JSON object

{
    "str": "string",
    "bool": false,
    "obj": {
        "arr": [ 1, 2, 3, "string", false ]
    }
}

JSON is a popular way of formatting data when dealing with REST services. Whenever you are generating data (at REST level at the back-end) for web applications, you know that your data will be read and parsed by JavaScript. What better format for JavaScript to parse than its own object notation? This is why JSON is such a great way to interchange data. It’s lightweight, fast, easy, readable…

There are also some useful tools that you can use regarding JSON. http://jsonlint.com/ for example checks if your JSON-string is formatted correctly. http://json-schema.org/ describes your JSON-object in a way very similar to XML-schemas.

5 Minute JavaScript #9 Module Design

In issue #8 we learned how we could create a framework with a closure and return object. We can extend this template for creating modules for a previously defined framework or parent module.

By modifying the framework template a little bit, we can create a module that plugs into another object.

(function (parent){
     var name = 'module';
     var version = 1;
     if (!parent[name] || parent[name].version < version) {
          parent[name] = function () {
               // Private members
               return {
                    version: version
                    // public members
               };
           }();
     }
}(Framework));

In the example above, we create a module with a certain name and version. We check if the parent (in this case Framework) doesn’t contain the module, if it does… we check if this is a newer version. Note that you can add your own versioning system to this declaration of modules, this is merely an example.

Instead of passing along the Framework, we could feed the closure Framework.module. The code will stay the same, but instead of creating a module on framework (with checks), we will create a sub-module.

By using a simple pattern (closure + return object) we are able to create frameworks, modules, plugging them into frameworks or other models. Also, we can hide functions/variables from outsiders and we choose explicitly which functions and variables are available.

5 Minute JavaScript #8 Framework Design

In the last blogpost we talked about closures and how they provide a great way to hide variables and functions from the outside world. We can combine our knowledge about namespaces and closures to create a simple framework.

In JavaScript, frameworks aren’t just for external libraries. It’s good and common practice to define a JavaScript framework for your own application. This framework handles: namespaces, conflicts, modules, etc.. This framework is used for giving structure to your application, making it accessible, extendable, structured and readable.

In previous posts we talked about namespaces. These objects are fine for grouping functionality, but they don’t allow you to have shared variables for a certain package. When you add a closure that returns the framework object, you have a scope in which you can define package-specific variables and functions.

var Framework = function () {
	var privateVar = 'private';
	var publicVar = 'public';
    // you can declare functions inside functions!
	var privateFun = function () {}
	return {
		publicVar: 'public',
		publicVar: publicVar,
		getPublicVar: function () { return publicVar; },
		publicFun: function () {}
	};
}();

Note that the Framework function is executed immediately, resulting in an object that is stored in the Framework variable. However, the function allows you to define scoped variables and functions that are not accessible from outside the function.

This template provides you with an easy and elegant way to encapsulate code while still being able to export functions and properties.

5 Minute JavaScript #7 Closures

In the previous blogpost we discussed a way to reduce the amount of global variables by using namespaces. Today, we will be looking into a different way to hide functions and variables.

If you write JavaScript code on a regular basis (without being an expert) you might have heard about ‘closures’. While closures are becoming increasingly popular in other programming languages as well, JavaScript allows you to take them one step further.

Sometimes you want to run a block of code, define properties, etc without having to worry about the global object (5 MIN JS #4). If this is the case you could use a closure function to which you can bind your variables.

&lt;script&gt;
    var free = 'We want this variable to be global';
    var bound = 'We want to make this variable non-global';
&lt;/script&gt;

Replaced this by:

&lt;script&gt;
var free = 'A free variable';
(function(){
    var bound = 'A bound variable to an anonymous function';
    function boundFunction () { /* cannot be called outside the closure */ }
}());
&lt;/script&gt;

This is a function that is executed immediately. This means that the code result might be the same, but in the second example the ‘bound’ variable isn’t added to the global object. The difference between the ‘free’ and ‘bound’ variable is that the ‘bound’ variable is cleaned up after the function execution ends. This happens because its context is finished executing and it isn’t bound to a higher scope (such as the global object).

Some frameworks help you in writing better code without you knowing it. For example in jQuery, you are advised to use the $(document).ready(function() { }); function. Thanks to jQuery the programmer is actually using a closure, he’s defining a function that is passed along as parameter to the ready function. But this also means that all the variables defined while initializing are also set to ‘non-global’.

5 Minute JavaScript #6 Namespaces

Last post we noticed that variables can easily be attached to the global scope. This isn’t a good thing. The more variables are linked to the global scope the more chance you have creating conflicts.

A great way to reduce the impact of your code on the global object is to define namespaces. We do this by creating one global object that we extend with extra modules which on their turn can be extended with new functionality and properties.

// Initialize this first before any other code
var Application = {};

// might be in another file for example module1.js
Application.module1 = {
	calculate: function () {},
	redirectTo: function () {}
};

// might be in another file for example module2.js
Application.module2 = {
	calculate: function () {},
	doSomething: function () {}
};

// In application
Application.module1.calculate();
Application.module2.calculate();

By defining the Application namespace (and the two module ‘packages’) we have no conflict between the two difference calculate functions. We also know at all times what function we are calling from which subproject or module.

This is a first step into creating frameworks, but it’s not the best solution. Most daily JavaScript users know this pattern and are using it to reduce conflicts. However, we know that in JavaScript functions are very important, so maybe we are able to improve this solution by throwing in some functions?

5 Minute JavaScript #5 Globally Implied

JavaScript uses the var-statement to declare variables and bind them to a scope. But this statement isn’t mandatory. In JavaScript you are allowed to define a value without this statement. When you do not use the var-statement, the variable will be added to the Global Object (see previous post).

function f () {
	x = 1;
}

Whenever we execute f we won’t bind the x variable to f, instead we will define a new property named x on the global object. So, it definitely seems like a good plan to always use the var statement! But sometimes you can just forget to define the value before using it…

function f () {
    var x;  // (= undefined)
    /* some code */
    if (/* something is true */) {
	  x = 'something';
    } else {
	  x = 'something else';
    }	

    return x;
}

If in this example you had forgotten to declare x before using it (in the if-statement), you would have declared x globally. Since these kinds of issues are hard to detect, you will need to be disciplined in your variable declaration because JavaScript won’t force you to do it.

When you define x without any value, you are actually saying “in this scope there is a variable with name x, but its value is undefined”. The next time you will attach a value to the variable you won’t need to use the var-statement.