Js objects


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Js objects

  1. 1. JavaScript Introduction to Objects and Arrays Charles Russell Bennu Bird Media
  2. 2. 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
  3. 3. Creating an Object  MyObject = {}  This creates an empty object
  4. 4. 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
  5. 5. Referencing Methods and properties  myObject.property = value;  myObject.method(parameters);
  6. 6. 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
  7. 7. 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
  8. 8. Creating an Array  myArray =[]  This creates an empty array  Array Literal  myArray[value1, value2, value3,...]
  9. 9. 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() 
  10. 10. Getting values back from an array  var aVar = myArray[index];  Index is a numeric value from 0 to myArray.lenght -1
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. Live Code