JavaScript History Object, Working with JavaScript Objects and Arrays (JavaScript)

var customer = {

first_name: 'Joe',

last_name: 'Smith',

phone: '999-999-9999'};

We've seen the "var" keyword before. This keyword tells JavaScript that we're creating a variable. In this example, we've created a custom object named "customer." We've then created properties named "first_name," "last_name," and "phone." After the colon, we've defined values for these properties.

What if you don't have data that you want to use for an object? No problem. JavaScript lets you create standard objects without defining any custom data on-the-fly. The following code also creates a customer object, but the data isn't filled until after the object is created.

var customer = new Object();

customer.first_name = 'Joe';

customer.last_name = 'Smith';

customer.phone = '999-999-9999';

Notice that this code instantiates the internal "Object()" object. This is the base object to create custom objects within your code. This object gives you the ability to instantiate an object without giving it any data. Both methods work for your JavaScript code, and you can instantiate an object as many times as you need to fill a database with information. You can also return data to the web page and print it on the user's browser. This will involve using a new method we haven't seen yet.

The "document" object contains a number of methods that help you interact with a web page's HTML. We'll discuss JavaScript with HTML in later chapters, but the "document.write()" method is convenient when you want to test your JavaScript code. Let's take the previous customer object and print it on the web page.

document.write(customer.first_name);

document.write("<br/>");

document.write(customer.last_name);

The above statement writes the customer's first and last name to the web page. This snippet of code is used to give you an example of how you can return data you stored in an object's properties. If you notice, the code that prints the text on the web page is similar to the customer object. That's because the document object is native to the JavaScript language. This object contains several properties and methods that you'll use to interact with a web page's document object model (DOM). We'll discuss the DOM in later lessons.

The Array Object.If you've performed any kind of programming before, you might be familiar with arrays. In JavaScript, an array is another object you use to hold values. Instead of assigning and calling properties, an array lets you call values using an index. An index describes the location of a value stored in memory. With an array object, you defined the number of values you want to store, and retrieve these values based on their associated index. It's important to remember that arrays start at the index 0. The index 0 is the first element of an array, the index 1 is the second element, index 2 is the third value, and so on.

Let's start off with defining an array. The following code defines an array that will hold three values.

var customer = new Array(3);

Notice that the number 3 in the array parenthesis indicates the number of values that the array can hold. However, again the values start with an index of 0. This concept is important to remember when assigning and retrieving values. You can also assign values to an array in the same way you assign them immediately in an object. The following code also creates a "customer" array but also assigns data to each array index.

var customer = [

'Joe',

'Smith',

'999-999-9999'];

Again, the above code holds three values. The first name is assigned the index of 0, last name is assigned index 1, and the phone number is given index 2.

Let's go back to the first array code. We've assigned a variable named "customer" to the "Array" object that allows for three values. Now, let's assign values based on index number. Look at the following code.

var customer = new Array(3);

customer[0] = 'Joe';

customer[1] = 'Smith';

customer[2] = '999-999-9999';

Notice that instead of assigning values on-the-fly, we've assigned values based on the index numbers. These index number serve not only the purpose of assigning values, but also a looping purpose. You can use loop structures to streamline your coding process and iterate through each array value based on its index. Let's take the following code as an example.

for (int j = 0; j < 3; j++)

{document.write(customer[j]);}

We discussed for loops in the previous chapter. For loops tie in with arrays in most programming languages. Notice that instead of calling an index by number, we use the j variable. The j variable is initialized with the value 0 in your opening for loop structure, so the first loop returns the value held in the customer array's index 0. The loop returns and j is incremented by 1. Now, j has a value of 1, so the JavaScript code prints out the value held in the array's 1 index or the second value, which is the customer's last name. Finally, the loop returns again, j is incremented again, and now j has a value of 2. The value (phone number) is printed to the web page. Now that j is incremented to 3, it is no longer less than three, which is the condition that must be met for the for loop to continue. The for loop exits and you've iterated through all values of your array. This type of loop and its logic is widely used across JavaScript and other programming languages, so it's a good idea to practice with this type of coding when you're a beginner.

Multidimensional arrays are also a big part of programming. You can think of multidimensional arrays as a matrix. For each row, there are a number of columns. Let's use the multiplication table as an example. Let's keep it simple and just use three rows and three columns. With this matrix, we have 9 values. You'll use multidimensional arrays with embedded for loops. Take a look at the following code example.

var row = new Array(3);

for (int j = 0; j < 3; j++)

{row[j] = new Array(3);

for (int k = 0; k < 3; k++)

{ row[j][k] = j * k;}}

The above code is more complex than the previous example. The first line of code defines the number of rows for the multiplication table. Remember, the number 3 defines the number of values but the index numbers are 0 to 2.

The for loop creates a new array for each row. This new array is used for the columns in our multiplication matrix. The embedded loop with the k variable loops through each column and assigns a value to the row's columns. The main outer loop continues for 2 more runs and creates a multiplication table.

Arrays and objects are common in most JavaScript apps. When you work with libraries such as AngularJs or KnockoutJs, you'll use objects extensively. Objects also allow you to customize your JavaScript structures as you define them on your web pages. Use objects to represent the properties and information on your pages, so they are more easily readable when you need to document or edit your code.

Advanced Javascript: Objects, Arrays, and Array-Like objects

Javascript objects and arrays are both incredibly useful. They're also incredibly easy to confuse with each other. Mix in a few objects that look like arrays and you’ve got a recipe for confusion!

We're going to see what the differences between objects and arrays are, how to work with some of the common array-like objects, and how to get the most performance out of each.

What Objects Are? A javascript object is a basic data structure:

varbasicObj = {}; // an empty object - {} is a shortcut for "new Object()"

basicObj.suprise= "cake!";

basicObj['suprise']; // returns "cake!"

Using {} instead of new Object(); is know as “Object Literal” syntax.

varfancyObj = {

favoriteFood: "pizza",

add: function(a, b){

return a + b;}};

fancyObj.add(2,3); // returns 5

fancyObj['add'](2,3); // ditto.

As you can see, and probably already knew, properties can be accessed a couple of different ways. However, it’s an important point that we’ll come back to in a minute.

Everything in javascript is an object. Everything. Arrays, functions, even numbers! Because of this, you can do some really interesting things, such as modifying the prototypes of Objects, Arrays, etc.

// an example of something you probably shouldn't do. Ever.Seriously.

Number.prototype.addto = function(x){

return this + x;}

(8).addto(9); // returns 17

// other variations:

8.addto(9); // gives a syntax error, because the dot is assumed to be a decimal point

8['addto'](9); // works but is kind of ugly compared to the first method

var eight = 8;

eight.addto(9); // works

What Arrays Are? Javascript arrays are a type of object used for storing multiple values in a single variable. Each value gets numeric index and may be any data type.

vararr = []; // this is a shortcut for new Array();

arr[0] = "cat";

arr[1] = "mouse";

See how that syntax is so similar to the syntax used for setting object properties? In fact, the only difference is that objects use a string while arrays use a number. This is why arrays get confused with objects so often.

Length.Arrays have a length property that tells how many items are in the array and is automatically updated when you add or remove items to the array.

vararr = [];

arr[0] = "cat"; // this adds to the array

arr[1] = "mouse"; // this adds to the array

arr.length; // returns 2

arr["favoriteFood"] = "pizza"; // this DOES NOT add to the array. Setting a string parameter adds to the underlying object

arr.length; // returns 2, not 3

The length property is only modified when you add an item to the array, not the underlying object.The length is always 1 higher than the highest index, even if there are actually fewer items in the array.

vararr = [];

arr.length; // returns 0;

arr[100] = "this is the only item in the array";

arr.length; // returns 101, even though there is only 1 object in the array

This is somewhat counter-intuitive. PHP does more what you would expect:

<?php

arr = array();

arr[100] = "php behaves differently";

sizeof(arr); // returns 1 in PHP

?>

You can manually set the length also. Setting it to 0 is a simple way to empty an array.In addition to this length property, arrays have lots of nifty built in functions such as push(), pop(), sort(), slice(), splice(), and more. This is what sets them apart from Array-Like Objects.

Array-like Objects.Array-like objects look like arrays. They have various numbered elements and a length property. But that’s where the similarity stops. Array-like objects do not have any of Array’s functions, and for-in loops don’t even work!

You’ll come across these more often than you might expect. A common one is the arguments variable that is present inside of every js function.

Also included in the category are the HTML node sets returned by document.getElementsByTagName(), document.forms, and basically every other DOM method and property that gives a list of items.

document.forms.length; // returns 1;

document.forms[0]; // returns a form element.

document.forms.join(", "); // throws a type error. this is not an array.

typeofdocument.forms; // returns "object"

Did you know you can send any number of arguments you want to a javascript function? They're all stored in an array-like object named arguments.

functiontakesTwoParams(a, b){

// arguments is an array-like variable that is automatically created

// arguments.length works great

alert ("you gave me "+arguments.length+" arguments");

for(i=0; i&lt; arguments.length; i++){

alert("parameter " + i + " = " + arguments[i]);}}

takesTwoParams("one","two","three");

// alerts "you gave me 3 arguments",

// then "parameter 0 = one"

// etc.

Tip: Parameters are the named variables in a function's signature: a and b in the previous example.

Arguments, by contrast, are the expressions that are used when calling the function: "one", "two", and "three" in this case.

This works great. But that's about as far as you can go with array-like objects. The flowing example does not work:

functiontakesTwoParams(a, b){

alert(" your parameters were " + arguments.join(", "));

// throws a type error because arguments.join doesn't exist}

So what can you do?Well you could make your own join() function, but that adds a lot of unnecessary overhead to your code because it has to loop over everything. If only there were a quick way to get an array out of an array like object…

It turns out there is.The array functions can be called on non-array objects as long as you know where to find the function (usually they’re attached to the array, but this isn’t an array remember

Prototype to the win:

functiontakesTwoParams(a, b){

varargs = Array.prototype.slice.call(arguments);

alert(" your parameters were " + args.join(", "));

// yay, this works!}

Let’s take a look at that a bit more in-depth:

Array: This object is the original array that all other arrays inherit their properties from.

Array.prototype:This gives us access to all the methods properties that each array inherits

Array.prototype.slice: The original slice method that is given to all arrays via the prototype chain. We can’t call it directly though, because when it runs internally, it looks at the this keyword, and calling it here would make this point to Array, not our arguments variable.

Array.prototype.slice.call(): call() and apply() are prototype methods of the Function object, meaning that they can be called on every function in javascript. These allow you to change what the this variable points to inside a given function.

And finally, you get a regular array back! This works because javascript returns a new object of type Array rather than whatever you gave it. This causes a lot of headaches for a few people who are trying to make subclasses of Array, but it’s very handy in our case!Gotchas

First, in Internet Explorer, DOM NodeLists are not considered to be javascript objects, so you cannot call Array.prototype.slice on them. If you want an array, you’ll have to loop through it the old fashioned way. Or use a hybrid function that tries it the fast way first, then the slow way if that doesn’t work.

functionhybridToArray(nodes){

try{

// works in every browser except IE

vararr = Array.prototype.slice.call(nodes);

returnarr;

} catch(err){

// slower, but works in IE

vararr = [],

length = nodes.length;

for(var i=0; i &lt; length; i++){

arr.push(nodes[i]);}

returnarr;}}

See an example here: http://nfriedly.com/demos/ie-nodelist-to-array.Second, arrays are objects, so you can do this, but it can get you some serious inconsistencies:

arr = [];

arr[0] = "first element"; // adds item to the array

arr.length; // returns 1

arr.two = "second element"; // adds an item to the underlying object that array is built on top of.

arr.length; // still returns 1 !

// BUT...

for(i in arr){

// this will hit both 0 and "two"}

Another solution: wrap arrays in an object if you need both worlds. This is basically a less efficient method of the array subclassing links I mentioned above. While less efficient, it has the advantage of being simple and reliable.That said, I wouldn’t recommend that you use this in most cases due to issues with speed and extra code requirements. It’s provided here as an example.

// an example of a wrapper for an array.

// not recommended for most situations.

varArrayContainer = function(arr){

this.arr = arr || [];

this.length = this.arr.length;};

ArrayContainer.prototype.add= function(item){

index = this.arr.length;

this.arr[index] = item;

this.length = this.arr.length;

return index;};

ArrayContainer.prototype.get= function(index){

returnthis.arr[index];};

ArrayContainer.prototype.forEach= function(fn){

if (this.arr.forEach) this.arr.forEach(fn);// use native code if it's there

else {

for(i in this.arr){

fn( i, this.arr[i], this.arr );}}};

varmySuperDooperArray = new ArrayContainer();

Now that your array is (somewhat) protected on the inside, you can loop through it’s items with forEach() and know that they will match it’s length. You can also add arbitrary properties to ArrayContainer or mySuperDooperArray and they won’t get pulled into your forEach() loop.

This example could be extended to completely protect the array if the need arose.

Objects and Arrays (JavaScript). JavaScript objects are collections of properties and methods. A method is a function that is a member of an object. A property is a value or set of values (in the form of an array or object) that is a member of an object. JavaScriptsupportsfourkindsofobjects:

· Intrinsic objects, such as Array and String.

· Objectsyoucreate.

· Host objects, such as window and document.

· ActiveXobjects.

Expando Properties and Methods.All objects in JavaScript support expando properties and methods, which can be added and removed at run time. These properties and methods can have any name and can be identified by numbers. If the name of the property or method is a simple identifier, it can be written after the object name with a period, such as myObj.name, myObj.age, and myObj.getAge in the following code:

varmyObj = newObject(); 

myObj.name = "Fred"; 

myObj.age = 42; 

myObj.getAge =  

function () {

returnthis.age; }; 

document.write(myObj.name); 

document.write("<br/>"); 

document.write(myObj.age); 

document.write("<br/>");

document.write(myObj.getAge()); 

// Output: 

// Fred 

// 42 

// 42