JavaScript Object and String Definitions

HTML and JavaScript are much more accessible. In fact, their popularity among web programmers can be accredited to how easy it is to get started with them. The browser does the compiling and execution of your program. You just write the code.

In order to run a C++ application on a Windows computer, the program has to be first compiled, built into an executable file that the Operating System understands and then launched by executing the file. The browser such as Internet Explorer, Firefox and Chrome are all examples of a desktop application that was compiled and built into an executable file first. When you click on its icon to launch the browser, you are executing the file that has been built by developers of the browser.

But JavaScript and HTML code run directly inside the browser. There is nothing to compile or build. The program executes after it is processed (compiled and built into machine code) by the browser. This makes it incredibly easy for anyone to start writing JavaScript code. But that can be dangerous.

Very often people jump into memorizing what a line of code looks like from online tutorials and books and then try to recreate it in their own programs with different parameters. But this approach to learning a language leads to confusion in the long run because of the lack of understanding internal mechanics of a language.

Even though the process of writing the code was made easy by the automatic JIT (Just In Time) compilation right inside the browser, the problem still arises when it comes to learning JavaScript from scratch. If you are an absolute beginner, there are things you may not want to do. The understanding how to learn a programming language becomes important.

The right way of thinking about JavaScript programming lies in understanding the creation and manipulation of computer data. In other words, variables, functions, integers, strings, arrays, etc. are the blocks of data we will define. This data will be manipulated by JavaScript statements and logical constructs we create during the period of time our program executes, in other words the run-time.

One of these often overlooked concepts is the definition of objects in JavaScript. I have not seen many tutorials that actually spend time explaining this. They simply jump directly to practical examples. But in order to really get a grasp on the art of programming websites, we need to understand data creation and manipulation at the very root. We must thoroughly understand what's going on at the very core of computer language syntax. And at the core of JavaScript there are objects and object definitions.

Let's take a look at an object definition from one of my previous tutorials, the LightBulb object:

    var LightBulb =
    {

        shape: 0,

        socket_type: "European",

        state: 0,

        turn_on: function() { /* code that turns bulb on here */ },

        turn_off: function() { /* code that turns bulb off here */ }

    };

Notice how we still use the var keyword to define an object, not a variable. This can actually be thought of as a flaw in the language design as it surely can confuse us. Is it a variable, or is it an object? Let's analyze this structure in a slightly different way. Thinking of code using visual imagination, we can draw this diagram:

This can be thought of as a mental model of this construct as seen from a beginner developer's point of view. But with a little abstraction, it is possible to see even more.

As pointed out in Greg's  tutorial book, everything in JavaScript is an object. This means, all variables, integers, strings, arrays, functions, anonymous functions, all arguments passed to all functions, all results returned from functions are objects. So the diagram above can be, once again, simplified as:

This is the correct way to think about all objects. Even these branches of objects may contain more objects within them. And that can create an infinite chain of objects. Which isn't impossible.

Instead of saying that we are defining a variable using the var keyword it's best to get used to thinking of the data being created in terms of an object. Because that's what it is. As you can see, this gives us an abstract model to think about writing code that is much clearer.

Are Variables Objects Too?

 

Yes, they are. Even simple definitions such as var text = "hello"; will create an object of type String. It's just JavaScript conceals this from us. Theoretically, we should think of everything in JavaScript as an object.

It is still perfectly safe to think of data created using the var keyword as variables. And sometimes it is not required to think of them as objects. For example when we do something like:

    var a = 1 + 1;

But that's the simple stuff. If you want to understand how jQuery really works, and why it works the way it does, you will need to think of these things in terms of objects.

Objects by definition are of recursive nature. This means that objects could contain other objects within them. Objects within other objects are accessed using the object method and property access operator - the . (dot) operator.

For example, the object of type String (the variable whose value is set to"European" in the first diagram above is an object of type String. It's not just a variable, it actually contains within it methods (functions) and properties (variables) that can be used right away without us having to define them.

JavaScript's String object already contains functions defined within it so that we are ready to start using them. For example, let's access the LightBulb's String object's length property. We can do so using the dot operator:

    var len = LightBulb.socket_type.length;

Notice that the dot operator is used twice. First after LightBulb to access its methods or properties and then after socket_type. The length property itself is an object of type Integer. How can we know for sure? Javascript has a special function called typeof that we can use to determine the type of an object by simply passing its reference as the parameter. Let's use the good old alert function in combination with typeof to display the actual type of an object we're dealing with:

As you can see typedef will tell us the type of the object being passed to it. One little note to make is that the Integer object that is referred to as "number" is returned as the same type also for floating point numbers such as 1.572. In other words there is no distinction between an integer and a floating point number. They are both defined as an object of type "number" in JavaScript.

Using typeof in a Real-World Scenario

One interesting aspect of looking at everything as an object in JavaScript has to do with creating custom functions. This is something mentioned in Greg's jquery tutorial book all the time. Let's say we want to write a function. Then, based on the type of an object passed to this function as an argument we want to do something different. The typeof function to the rescue:

function func(value)
{
    if (typeof(value) == "string")
    {
        // it's a string, process the string... 
    }

    if (typeof(value) == "object")
    {
        // it's an object...
    }
}

But who would want to do it this way and why? This idea is actually utilized by jQuery's main object. Which is the same as the dollar sign $ object. Let's take a look at the following jQuery code:

Both functions do exactly the same thing - they select all div elements on the page located within the body element (which means all of them) and hide them. As you may know the second parameter of the jQuery object function we are seeing here is called context. The context is nothing more than the placeholder with which the search for "div" will occur. I chose "body" which is the main HTML container of the entire web page. We could have chosen any other element - that's up to your site's DOM structure. But that's not the point of this example. The difference is in the parameter type passed to the function. What happens when a string is passed? What happens when an object is passed?

The $("body") statement itself returns the object that contains the DOM that includes all elements within the "body" element.

Why does jQuery do exactly the same thing even though the second parameter passed in two different ways? The typeof function to the rescue. The jQuery function written in such a way that it first determines the type of the object being passed to it as a parameter. If the context parameter is a string like "body" it will take its literal meaning and find that element using the text in the string. If the parameter is passed as an object (remember that $("body") is a function that actually returns an object) then the work is already done - we already have the object here. Internally, the $ function will skip the seeking algorithm (since the object already contains all the data.) This doesn't mean that it's faster, $("body") will still take time to obtain the object itself, it's just that it's done before this object is passed to the main jQuery function for processing.