PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Eight Weeks of Prototype: Week 3, Prototype Data Types

The Hash Object

The Hash type that Prototype provides is a very useful data type that lets you use key-based indexing of your data. That is, it is similar to an associative array in PHP.

In actual fact, it is an extension of the JavaScript "vanilla" object. However, unlike arrays, when you create a new object in JavaScript, it is not extended unless you explicitly extend it. This can be done using the $H() function.

In order to read and write values to or from a hash, you must use the get() and set() methods. Both arguments accept the key name as the first argument, while the set() method accepts the new value as the second argument.

Listing 7 shows an example of creating a normal JavaScript object, then turning it into a Hash. It also shows how to read and update hash values.

Listing 7 Creating a hash (listing-7.html)
<html>
    <head>
        <title>Creating a hash</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // create a normal object
            var person = {
                name    : 'Quentin Zervaas',
                country : 'Australia'
            };
 
            alert(person.name + ' is from ' + person.country);
 
            // now turn it into a hash
            var hash = $H(person);
 
            // or use shorthand
 
            var hash = $H({
                name    : 'Quentin Zervaas',
                country : 'Australia'
            });
 
            alert(hash.get('name') + ' is from ' + hash.get('country'));
 
            hash.set('country', 'nowhere');
 
            alert(hash.get('name') + ' is from ' + hash.get('country'));
        </script>
    </body>
</html>

So now that you know how to create a Hash, how do you use it? Well, all hashes have the same enumerable methods available (such as size(), each() and invoke()).

The most important thing to be aware of is that when you define an iterator callback (as we saw above when learning about each()), the argument passed to the iterator is not just the element value. Rather, it is an object with the key in the key property and the value in the value property.

Listing 8 shows an example of how to use each() with a Hash.

Listing 8 Looping over hash values (listing-8.html)
<html>
    <head>
        <title>Looping over hash values</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            var hash = $H({
                name    : 'Quentin Zervaas',
                country : 'Australia'
            });
 
            alert('There are ' + hash.size() + ' values in this hash!');
 
            hash.each(function(pair) {
                alert(pair.key + ' has the value ' + pair.value);
            });
        </script>
    </body>
</html>

Additionally, there are some other methods made available to hashes that you may find useful. One such example of the keys() method, which returns an array of the keys in the hash. If you were to call hash.keys() on the hash from above, an array defined as [ 'name', 'country' ] would be returned. Similarly, you can use the values() method, which will return an array of the values in the hash.

Other operations you will find useful for hashes is to check if a value exists and also to remove a value from a hash. To check if a value exists you can see if the return value is equal to undefined (an internal JavaScript constant). For example, if (hash.get('foo') == undefined) { ... }.

To remove a value from a hash, the unset() method should be used. For example, myHash.unset('foo') will remove the element with key foo from the Hash called myHash.

In This Article