Associative arrays are arrays that use strings in place of index numbers, for key elements.
- Using an associative array is quite similar to using a property name with a regular object; you just do it in an array format.

Syntax:
var array_name = new Array();
 array_name['key1'] = value1;
 array_name['key2'] = value2;
 // ...
- "array_name" is the name of the array.
- 'key1', 'key2' are indices (keys) associated with each element (can be written between double or simple quotes, but if they are numbers, do not add quotes).
- "value1", "value2" are the values of the elements (can be: strings, numbers, variables, expressions, or another array). - You can add any number of elements in the Array, with the sintax:
array_name['key'] = value;

• Accessing an associative array is the same as a normal array, except that you use an index string rather than an index number (array_name['key']).
Example:
<script type="text/javascript"><!--
var arrex = new Array();
 arrex['site'] = 'http://coursesweb.net';
 arrex['course'] = 'Web programming';
 arrex['tutorials'] = 'JavaScript';

alert(arrex['site']);         // http://coursesweb.net
--></script>

Traversing Arrays

You can walk through, or traverse, an array with the "for ... in" or "for each ... in".

- Using for ... in

<script type="text/javascript"><!--
var arrex = new Array();
 arrex['site'] = 'coursesweb.net';
 arrex['course'] = 'Web programming';
 arrex['tutorials'] = 'JavaScript';

// parsing the "arrex"
for(var key in arrex) {
  // write the index and the value of each element
  document.write('Index='+ key+ ' - value='+ arrex[key]+ '<br />');
}
--></script>
- "key" is a variable that holds the index of the current element (can be any variable name) of the array "arrex".
- Will display the following result:
Index=site - value=coursesweb.net
Index=course - value=Web programming
Index=tutorials - value=JavaScript

- Using for each ... in

<script type="text/javascript"><!--
var arrex = new Array();
 arrex['site'] = 'coursesweb.net';
 arrex['course'] = 'Web programming';
 arrex['tutorials'] = 'JavaScript';

// parsing the "arrex"
for each (var elm in arrex) {
  document.write(elm+ '<br />');
}
--></script>
- Note the difference from the "for ... in". The "for each ... in" does not get the index component, the variable declared in brackets (here, "elm") stores the element itself.
- Will display the following result:
coursesweb.net
Web programming
JavaScript

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang = array(10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Associative Arrays in JavaScript

Last accessed pages

  1. Drag and Drop with HTML5 attributes (1178)
  2. CSS Styles with jQuery (778)
  3. Using file_put_contents, file_get_contents, readfile and file() (2037)
  4. Understanding OOP - Object Oriented Programming (1358)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (15825)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (16195)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (15825)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (15126)
  4. Ajax-PHP Chat Script (13434)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (13383)