Advanced JavaScript Objects and Arrays Concepts

JavaScript and Ajax (JavaScript Objects) Week 5 Web site: http://fog.ccsf.edu/~hyip

Objects and Arrays JavaScript Objects and Arrays are collections of values. An object is a collection of named values. An array is a specialized kind of object that behaves as an ordered collection of numbered values.

Creating Objects An object is an unordered collection of properties, each of which has a name and a value. The named values may be primitive values (number or string or boolean), or may be another objects. There are two ways to create an Object: 1. The easiest way to create an object is to use object literal: (An object literal is a comma-separated list of property name/value pairs, enclosed within curly braces) var empty = { }; // an object with no properties var point = { x:0, y:0 }; // x or "x" are the same here var circle = { x:point.x, y:point.y+1, radius:2 }; var homer = {"name":"homer simpson", "age": 34, "married": true, "occupation": "plant operator", "email": "homer@example.com" }; 2. The new operator can create specialized kinds of objects: var obj = new Object(); obj.x = 1; obj.y = 2; var a = new Array(); var d = new Date(); // create an empty array // create an object with current date & time

Object Properties You normally use the (.) to access the value of an object s properties The value on the left of the . (dot) should be the object whose property you want to access (the name of the variable that contains the object reference or expression that evaluates to an object) The value on the right of the . (dot) should be the name of the property (must be an identifier, not a string or an expression) object_name.property_name You can create a new property of an object simply by assigning a value to it: var book = {}; // create a new object with empty object literal book.title = "JavaScript: the definitive Guide"; book.chapter1 = new Object(); book.chapter1.title = "Introduction to JavaScript"; book.chapter1.pages = 11; book.chapter2 = { title: "Lexical Structure", pages: 6}; alert("Outline: " + book.title + "\n\t" + "Chapter 1 " + book.chapter1.title + "\n\t" + "Chapter 2 " + book.chapter2.title);

Enumerating Properties The for/in loop provides a way to loop through, or enumerate, the properties of an object This can be useful when working with objects that may have arbitrary properties whose names you do not know in advance: function displayobj(obj) { var names = ""; for(var nm in obj) { names += nm + "\n"; } alert(names); } displayobj(document); NOTE: the for/in loop does not enumerate properties in any specific order, and it does not enumerate certain predefined properties or methods

Check Property Existence The in operator can be used to test for the existence of a property. The left side of this operator should be the name of the property as a string. The right side should be the object to be tested. If obj has a property named x , then 1 will assign to x . var obj = {x:0, y:2}; if ("x" in obj) { obj.x = 1; }

Delete Properties You can use the delete operator to delete a property of an object: delete book.chapter2; Note that deleting a property does not merely set the property to undefined; it actually removes the property from the object. After deletion, for/in will not enumerate the property And the in operator will not detect it.

Objects as Associative Arrays The . (dot) operator is used to access the properties of an object. It is possible to use the [ ] operator, which is more commonly used with arrays, to access these properties. The following two JavaScript expression have the same value: object.property object["property"] The first statement s property name is an identifier The second statement s property name is a string When you use the . (dot) operator to access a property of an object, the name of the property is expressed as an identifier. Identifiers must be typed literally; they are not a datatype, so they cannot be manipulated by the program. When you access a property of an object with the [ ] array notation, the name of the property is expressed as a string. Strings are JavaScript datatypes, so they can be manipulated and created while a program is running: var customer = {address0: "addr0", address1: "addr1", address2: "addr2"}; var addr = ""; for (var i = 0; i < 3; i++) { addr += customer["address" + i] + "\n"; } alert(addr); This code reads and concatenates the address0, address1, properties of the customer object. When an object is used in this fashion, it is often called an associative array a data structure that allows you to dynamically associate arbitrary values with arbitrary strings. The term map is often used to describe this situation as well: JavaScript objects map strings (property names) to values.

The toString() Method The toString( ) method takes no arguments; it returns a string that somehow represents the value of the object on which it is invoked. JavaScript invokes this method of an object whenever it needs to convert the object to a string (e.g. use in + operator, alert() method) When an array is converted to a string, you obtain a list of the array elements, each converted to a string. When a function is converted to a string, you obtain the source code for the function.