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 tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Associative Arrays in JavaScript

Last accessed pages

  1. Butterfly Kyodai (6845)
  2. Working with objects from Library in AS3 (1623)
  3. Alert, Confirm and Prompt (2532)
  4. Raccoon's Break Out (108)
  5. Bru (643)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47860)
  2. Read Excel file data in PHP - PhpExcelReader (35978)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35586)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (32087)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29359)