API Development

Beginners: Javascript Objects and Arrays

3D architecture abstract

If you’re new to Titanium, first of all Welcome!
If you are just starting out with Javascript, this post will definitely help you understand two very important features of Javascript: Object and Array literals. Knowing their syntax will not only help you understand how Titanium works, but will speed up your understanding of CommonJS and JSON.
Perhaps you don’t know them by name, but the truth is that when you work with Javascript, you’re working with Objects all the time without realizing it. Take a look at the following example:

var carmake='Honda';
console.log(carmake.toUpperCase());

Where did toUpperCase come from? Here you have used an Object. Every time you create a String variable, you’re actually creating a String Object. This object has properties and methods, toUpperCase being just one of them. More details about the String object here. Get used to the word “Object”, because is the foundation of modern programming.

Object Literals


Object Literals are Objects that you create on the fly. The syntax for Object literals is simple:

  • Enclose it in curly brackets
  • separate properties with comma
  • separate keys and values with a colon
var person={
    name: 'jack',
    email: 'jack@ctu.com',
    twitter: '@jackb_ctu'
};

To access the values on this object, you can use “dot notation”, that is, the name of the object, a dot, and the name of the property.

console.log(person.name);
console.log(person.twitter);

Array Literals


Just like objects, arrays can also be created on the fly. The syntax rules for array literals:

  • Enclose it in square brackets
  • separate each element with comma
var arr=[
            'value1',
            'value2',
            'value3'
        ];

To access the values, you use a numerical index:

console.log(arr[0]);

The fun part


The power of Javascript Object and Array literals comes by combining them. A combination of Objects and Arrays make up a complex, multidimensional object.

Array literal with two objects as values

var arr=[
           {key1:'value1'},
           {key2:'value2'}
        ];
console.log(arr[0].key1);

Object literal with a two-item array as property

var obj={
            key:[
                   'value1',
                   'value2'
                ]
        };
console.log(obj.key[1]);

Array literal with one property that is a two-item array

var arr=[
           {
              key:[
                    'value1',
                    'value2'
                  ]
            }
         ];
console.log(arr[0].key[1]);

This syntax is very popular in today’s web services and perhaps you’ve heard of JSON (Javascript Object Notation). JSON is an implementation of this syntax designed to be a way of transporting data across the Internet.

Applying these concepts in Titanium


Titanium itself is a JavaScript SDK (Software Development Kit) that works as an “Object Factory”. This means that it has methods that generate Objects, and most of the times these methods receive Objects as arguments. It sounds more confusing than it is.

var win=Titanium.UI.createWindow({
    backgroundColor: '#fff',
    fullscreen: true
})

The result of this operation is a Titanium Window Object stored in the variable win. However, the createWindow method received an object as argument, and object with the properties backgroundColor and fullscreen. As you can see, knowing how an object is constructed allows you to understand that the createWindow() and the toUpperCase() methods are very similar. The difference is that you are sending an Object Literal to the createWindow method.
A full description of Titanium’s objects can be found at Titanium API Documentation.
I hope this short tutorial can help you understand Titanium’s syntax and how powerful it can be.
Codestrong!