Caparico / A slow walker

A Reference for Reference Types in JavaScript – Part 1

Reference Types Reading Time: 4 minutes

This is a write-up about 2 different reference types in JavaScript: the Object type and the Array type. I’m just gonna put it here so I’ll have a reference to go back to in the future. You can use it, too.

In JavaScript, reference types are structures which are used to group data & functionality together. While in other object-oriented programming languages you can spot constructs such as classes and interfaces, those do not really exist in JavaScript. Reference types describe the properties and methods that characterize a certain object on your code, and are sometimes called Object Definitions.

You create a new object using a constructor. A constructor is a function which creates a new object, using the new operator:

var band = new Object();

This will create a new instance of the Object reference type, and will store it in the variable band. The constructor here is Object(), which creates a basic, simple object with the default properties and methods.

An Object Type

Instances of Object don’t have much functionality, but they are often used for storing data in applications. There are 2 main ways to create an instance of Object:

Using the new operator with the Object constructor:

var band = new Object();
band.name = "Hozier";
band.music = "Rock";

Using the object literal notation, which is the shorthand form of defining an object which contains many properties:

var band = { 
name: "Hozier",
music : "Rock" 
};

The last property, which ends the object literal’s definition lacks the comma, which is used to separate every other property, because it’s the last one. That’s just how it works. If you do place a comma there too, you’ll get an error on earlier version of Internet Explorer (7 and below), and maybe on others, as well.

Either of the above mentioned ways is acceptable for creating Object instances, however, you’re likely to see the latter used far more often.

Why? Well, just look at it… it requires a lot less code to write, AND it’s visually easier to understand, because of the way it encapsulates all related data inside those curly braces.

An Array Type

Array Types are simply ordered lists of data, which can contain any type of data. Meaning that you can create an array that has a string in the 1st position, a number in the 2nd position, an Object on the 3rd, etc.

Arrays in JS will re size themselves to accommodate  for any data that is dynamically added to them. Here’s how you can create arrays:

Using the Array constructor:

var bands = new Array();

In case you already have the predicted number of of items which your array is going to contain – you can pass that number into the array constructor, and it will automatically affect the length of your array:

var bands = new Array(20);
You could, of course, already pass it the actual items to be included in it:

var bands = new Array("Arctic Monkeys", "Buttering Trio", "A-wa");

You could omit the new keyword when you use the Array constructor. It will still have the same result:

var bands = Array("Arctic Monkeys", "Buttering Trio", "A-wa"); // will still create an array with 3 items

Another way to create an Array is to use the square brackets (this is the array literal):

var bands = ["Arctic Monkeys", "Buttering Trio", "A-wa"]; // will create an array with 3 items

var bands = []; // creates an empty array

Music Tuning

Array Values

You can set a value to a certain item in an existing array bytargeting that item by it’s numeric index (remember that the array in JavaScript is zero based):

bands[0] = "Hozier"; // change the first item's value

You can also get an item’s value by calling it by its numeric index:

alert(bands[1]); // will alert: "Buttering Trio"

Finally, you can even add an item to an array, for example, to add a fourth band item to my bands array I’ll go:

bands[3] = "Balkan Beat Box";

The number of items in an array is stored in the length property:

var bands = ["Hozier", "Buttering Trio", "A-wa", "Balkan Beat Box"];

alert(bands.length);    //  4

The length method is not used only for reading the array’s items number, but is also very useful when you wish to remove the array’s last item, or add items to the end of the array:

var bands= ["Hozier", "Buttering Trio", "A-wa", "Balkan Beat Box"]; //creates an array with 4 strings
bands.length = 2; // removes items 3,4 from the array
alert(bands[3]); // item 4 was removed so this is 'undefined'

And to add items to the end of the array:

var bands= ["Hozier", "Buttering Trio", "A-wa"]; //creates an array with three string items
bands[bands.length] = “Balkan Beat Box”; //add a band (position 3)

Conclusion

There are quite a few array methods to manipulate & control an array’s items order, number and type, but I think that this should do it for this post. In the next post I’ll continue to learn about those manners, and also about other reference types available in JavaScript.

To be continued..