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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Associative Arrays in JavaScript

Last accessed pages

  1. Zuma Deluxe (37883)
  2. Ajax-PHP File Manager (3911)
  3. innerHTML and outerHTML to Get and Replace HTML content (13089)
  4. CSS3 Flexbox Container (40)
  5. Qwop (40212)

Popular pages this month

  1. Qwop (7387)
  2. Drag Racer V3 (5115)
  3. Bubbles3 (2030)
  4. List with All the Games (1718)
  5. Flash Games - Free online Games (1605)