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:

var objName = { };

 
Example:

var myObj = {};
myObj.name = "Developer";
myObj.id = 123;
var myObj = {name:’’,id:0};
myObj.name = "Developer";
myObj.id = 123;

 

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:

var objName = new Object();

 
Example:

var myObj = new Object();
myObj.name = "Developer";
myObj[‘id’] = 123;
var myObj =new Object({name:’’,id:0});
myObj.name = "Developer";
myObj.id = 123;

 
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:

var myObj = Object.create(null);
myObj.name = "Developer";
myObj.id = 123;
var value={ name:’Developer’,id:123}
var myObj = Object.create(value);

 
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:

function Coder(name, id) {
   this.name = name;
   this.id = id;
}
let myObj = new Coder('Developer’, 123);
  console.log(myObj.name); // Output: Fiesta
  console.log(myObj.id);         // Output: 123

 

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

new Map([iterable])

 
Note: Key element is an Array or other iterable formats
Example:

var myMap=new Map();
myMap.set(‘name’,’developer’);
myMap.set(‘language’,’JavaScript’);
myMap.get(‘name’)  => returns ‘developer’
myMap.get(‘language’) => returns ‘JavaScript’

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

var map=new Map([[‘name’,’developer’],[‘language’,’JavaScript’],[‘framework’,’AnguarJS’]]);
for(let [key,value] of map)
  {
     console.log(`${key} is ${value}`);
  }

 
Output:

name is developer
language is JavaScript
framework is AnguarJS

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

var map=new Map([['intergers',['1','2','3','4']],['float',['1.1','2.2','3.3','4.4']]];)
map.get(‘intergers’) => returns [‘1’,’2’,’3’,’4’]

 

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:

<img src="imgSrc" width="145" height="126" alt="no image" usemap="#imageMap">
<map name="imageMap">
  <area shape="rect" coords="0,0,82,126" href="page1.html">
  <area shape="circle" coords="90,58,3" href="page3.html" >
  <area shape="circle" coords="124,58,8" href="page3.html">
</map>

 
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.
 
[contact-form-7 404 "Not Found"]