JavaScript Introduction to Objects and Arrays

Charles Russell

Bennu Bird Media

Objects

Objects in programming are things just like in the real world

Objects in the real world have characteristics Software objects have properties

Many Objects in the real world perform some type of action Software objects have methods

Creating an Object

MyObject = {} This creates an empty object

The Object literal

Properties are variables Methods are functions Objects created this way exist as soon as they are

declared

var myObject = {

property: null,

property2: 0,

property3: ' ',

method1: function(parameterList) {

//statements and expressions

},

Method2: function(parameterList) {

//statments and expressions

}

};

Referencing Methods and properties

myObject.property = value; myObject.method(parameters);

Arrays

Arrays are like a tray of variables. They can contain more than 1 value. Shopping list A series of test scores A seating chart

Row of Drawers

Think of an array as a row of numbered drawers Numbers start at 0 You can add more drawers to the row A particular drawer is called an element Because of weak typing, an element can contain any

data type including undefined It is possible to have an array with no elements

Creating an Array

myArray =[] This creates an empty array

Array Literal myArray[value1, value2, value3,...]

Adding to an array

Add element by using index myArray[0] = value

Array length property MyArray.length Often used to append values to the end of an array

− myArray[myArray.length] = value Remember that arrays are 0 based but length returns a count

Array.push(); Appends values to the end of an array and returns

new length Array.unshift()

Prepends values to the beginning of the array and returns new length

Getting values back from an array

var aVar = myArray[index]; Index is a numeric value from 0 to myArray.lenght -1

Associative Arrays

Other languages allow you to use a string as an index to the array Something like employee = personArray['Charles'];

You can simulate the behaviour personArray['Charles'] = 'Web Engineer'; Reference would be the same

At first this appears to be the same but it is not

Arrays as a Special Object

When you use JavaScript for associative arrays like this myArray['Charles'] and myArray.Charles are the same So what apparently happens is myArray gets a new

property. If you look at the array literal you don't see

reference to what is stored in 'Charles'. If this the only thing in the array then the array

and you try to reference myArray[0] you get undefined

After the assignment the Array still has a length of 0

typeof myArray returns 'Object'

Just a little more confusion

MyObject = {'0': 'zero', '1': 'one', '2': 'two'} MyObject[0] returns 'zero' just like an array Arrays are normally an area in memory that is

linear and refrenced by offset from the starting point. This is not JavaScript. In this language you have an object with array like

properties and methods

When do I use arrays and when do I use Objects

The rule is simple: when the property names are small sequential integers, you should use an array. Otherwise, use an object. Douglas Crockford JavaScript the Good Parts page 61

Some other methods of Array

sort - sorts the array indexOf - returns the index of some element pop - removes the last element and returns its

value reverse – reverses the order of an array

Live Code