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'] = 'https://coursesweb.net';
 arrex['course'] = 'Web programming';
 arrex['tutorials'] = 'JavaScript';

alert(arrex['site']);         // https://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 HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Associative Arrays in JavaScript

Last accessed pages

  1. JavaScript Course - Free lessons (14816)
  2. Register and show online users and visitors (22714)
  3. Get data from string with JSON object (1502)
  4. Difference between two Dates - Time and Date (1454)
  5. Recursive function to create Multi-Level Menu in JavaScript (2755)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (322)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (266)
  3. Register and show online users and visitors (256)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (244)
  5. Insert, Select and Update NULL value in MySQL (157)