googleads
Explaining Type Of Maps In JavaScript – Object, Image & Hash Mapping
preloder
Javascript FrameWorks Quick Tips Web Development

Explaining Type Of Maps In JavaScript – Object, Image & Hash Mapping

Generally, Map refers to a collection of elements with key and value pairs. Javascript has a unique structure of Map creation. A set of data or entries we can store in Map where the values are non-primitive and unique that avoids the duplication in storing values. Following examples will show you how the Object, HashMap and Image Map are being used and how it’s implemented.

Object In Javascript:

                      We know Object is the instance of a class whereas the Javascript doesn’t have a class, so Object is standalone property here. However, we can achieve class by using functions.

                     An object is a not-primitive data type in Javascript. In Object, a key must be primitive data type like string, integers. JavaScript Object contains multiple values in forms of prototype properties and methods. 

                     Prototype properties have various functions to use JavaScript Object effective way and we can define our custom function too. 

Different Type Of Object Creation In JavaScript

There are three types of object creation being used in JavaScript, Let see one by one with a sample.

Using Javascript Curly Braces

  • By simply providing the curly braces we can create an empty object.
  • Here key should be string or integers and the value can be any datatype.
  • You can use commas to separate multiple keys.

Syntax:

 

Example:    

 

Using Javascript Object Constructor

Another way to create an Object is by using ‘new’ keyword as it creates object wrapper for defined values. We can also define new key dynamically and make sure that the Key value should be string or integers.

Syntax:

 

Example: 

 

Using javascript Object.create() method

                       This type of Object creation called as prototype Object creation. Basically, JavaScript function has default prototype object property and we can define the property to the objects.

Syntax : var objName = Object.create(null);

Example: 

 

Using javascript Constructors

This type of Object creation based on Object-Oriented Programming pattern. It follows the same like object creation for class, here the Property and method will be common to all object initializing.

Example:

 

Also Read: 10 Useful JavaScript Array Methods You Must Know

 

Explaining HashMap In JavaScript

  • HashMap is implemented by ES6 in JavaScript.
  • It has a key-value pair and in both, we can use non-primitive datatype to store the data.
  • The Map will return the key, value pairs in the same order we inserted.
  • Map also have properties and methods like the size of the map and more.
  • It uses sameValueZero algorithm. NaN which is considered the same as NaN(even though NaN !== NaN).

Syntax for Hashmap

 

Note: Key element is an Array or other iterable formats

Example:

 

1) Data structure of the keys in map can be declared like these,

 

Output: 

 

2) Also, the data structure  of the ‘values in map’ can be declared like these,

 

Image map in Javascript:

Image map is used to create a client-side image map through which we can navigate to link or some other function using an image. Here, we can use shapes like rectangle, circle to make an image area clickable and It can be achieved by <img/>, <map>,<area> tags.

  • As like same as image syntax we can declare the image with only one extra keyword named “usemap” as mentioned below,

<img src=’imageSrc’ alt=’no image found’ border=0 usemap=”imageMap”>.

  • Then <map> tag helps to create the map for the image. As it provides the clickable hotspots in <area> tag which acting as a container that contains  only one attribute ‘name’

<map name=’imageMap’> /* to do clickable area */ </map>

  • The <area> tags helps us to define coordinates of the clickable surface in an image and shape of the surface

<area shape=”rect” coords=”0,0,82,126″ href=”newLink”>

 

Example: 

 

If you have used coordinates in it then the given image source will have a hyperlink reference.

 

Was it useful? Like to read more from our experts? Post your interest & thoughts on comments to release more user-centric blogs.

 

The following two tabs change content below.

Rajkumar M G

Around 3 years of experience in IT, Rajkumar evolving as a knowledge packed developer by expertising the technologies like JavaScript, AngularJS, Apache Cordova, Ionic, Java Spring MVC. And also extends his love on Robotic science & embedded system and trying to master it all.

Leave a Reply

Your email address will not be published. Required fields are marked *