JavaScript Feature Reference: Map Object Web Browser Support Test

Last reviewed/updated: 11 Jan 2018 | Published: 22 Dec 2017 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

1. Introduction

In this web page there are two web browser JavaScript feature support tests; 1.) a feature implementation test, and 2.) a feature capability test. First, the implementation test is run. The implementation test determines if the web browser recognizes the JavaScript Map object. The implementation test is a simple test for the presence of web browser support, and a definitive test for the absence of web browser support. If the web browser does not recognize the JavaScript Map object, the testing is stopped and the implementation test reports: Fail (no support): The web browser does not recognize the JavaScript Map object. The web browser does not support the JavaScript Map object.

If the web browser recognizes the JavaScript Map object, the capability test is run. The capability test determines if the web browser's implementation of the JavaScript Map object includes support for at least one Map object capability. The capability test is a more definitive, albeit not an all inclusive, test for the presence of web browser support. If the web browser's implementation of the JavaScript Map object includes support for the tested capability, the capability test reports: Pass (at least partial/possibly full support): The web browser recognizes the JavaScript Map object, and supports at least one Map object capability. The web browser at least partially/possibly fully supports the JavaScript Map object. Positive determination of full web browser support is beyond the scope of this test. If the web browser's implementation of the JavaScript Map object does not include support for the tested capability, the capability test reports: Pass/Fail (partial support): The web browser recognizes the JavaScript Map object, but does not support at least one Map object capability. The web browser partially supports the JavaScript Map object.

The web browser support test source code is shown in Section 2.1. The web browser support test source code is run in Section 2.2, which shows the web browser support test result.

1.1. Map Object Web Browser Support

  • Pass (at least partial/possibly full support): ED12+, FF19+, CH38+, OP25+.
  • Pass/Fail (partial support): IE11.
  • Fail (no support): IE10-, SF5.1.7-.

1.2. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. Map Object Web Browser Support Test

2.1. Web Browser Support Test Source Code

<p id='testId'><b>Fail</b> (no support): The web browser does not recognize the JavaScript <code>Map</code> object. The web browser does not support the JavaScript <code>Map</code> object.</p><!-- Hard code Fail because web browser no support error stops JavaScript execution. -->

<script>
var mapOne = new Map(); // Empty map. Identical to var mapOne = new Map(null);. mapOne is Map(0) {}.
var mapTwo = new Map([["keyOne", 1], ["keyTwo", 2], ["keyThree", 3], ["keyFour", 4]]); // mapTwo initialized with an iterable whose items/elements are key-value pairs (ie, an array of key-value pair arrays or a map). mapTwo is Map(4) {"keyOne" => 1, "keyTwo" => 2, "keyThree" => 3, "keyFour" => 4}. IE11 does not support maps initialized with an iterable. IE11 mistakenly represents maps initialized with an iterable as [object Object] {size: 0}. Hence, IE11 Pass/Fail (partial support).
var mapThree = new Map(mapTwo); // mapThree initialized with a map. mapThree is Map(4) {"keyOne" => 1, "keyTwo" => 2, "keyThree" => 3, "keyFour" => 4}.
if (window.mapOne){ // Identical to if (mapOne).
 var element = document.getElementById("testId");
 mapOne.set("keyOne", 1); // Item with key-value pair "keyOne" => 1 set on mapOne. mapOne is Map(1) {"keyOne" => 1}.
 mapOne.set("keyTwo", 2); // Item with key-value pair "keyTwo" => 2 set on mapOne. mapOne is Map(2) {"keyOne" => 1, "keyTwo" => 2}.
 mapOne.set("keyThree", 3); // Item with key-value pair "keyThree" => 3 set on mapOne. mapOne is Map(3) {"keyOne" => 1, "keyTwo" => 2, "keyThree" => 3}.
 mapOne.set("keyTwo", 2); // mapOne has item with key-value pair "keyTwo" => 2. Not unique. Nothing set. mapOne is Map(3) {"keyOne" => 1, "keyTwo" => 2, "keyThree" => 3}.
 mapOne.set("keyTwo", 22); // mapOne has item with key-value pair "keyTwo" => 2, not "keyTwo" => 22. key-value pair "keyTwo" => 2 replaced by "keyTwo" => 22. mapOne is Map(3) {"keyOne" => 1, "keyTwo" => 22, "keyThree" => 3}.
 var variable = "variable value";
 var arrayLiteral = [1, 2, 3];
 var objectLiteral = {propertyOne: 1, propertyTwo: 2, propertyThree: 3};
 var functionExpression = function(){return 123;};
 mapOne.set(variable, "variable key value"); // Item with key-value pair variable => "variable key value" set on mapOne. mapOne is Map(4) {"keyOne" => 1, "keyTwo" => 22, "keyThree" => 3, variable => "variable key value"}.
 mapOne.set(arrayLiteral, "arrayLiteral key value"); // Item with key-value pair arrayLiteral => "arrayLiteral key value" set on mapOne. mapOne is Map(5) {"keyOne" => 1, "keyTwo" => 22, "keyThree" => 3, variable => "variable key value", arrayLiteral => "arrayLiteral key value"}.
 mapOne.set(objectLiteral, "objectLiteral key value"); // Item with key-value pair objectLiteral => "objectLiteral key value" set on mapOne. mapOne is Map(6) {"keyOne" => 1, "keyTwo" => 22, "keyThree" => 3, variable => "variable key value", arrayLiteral => "arrayLiteral key value", objectLiteral => "objectLiteral key value"}.
 mapOne.set(functionExpression, "functionExpression key value"); // Item with key-value pair functionExpression => "functionExpression key value" set on mapOne. mapOne is Map(7) {"keyOne" => 1, "keyTwo" => 22, "keyThree" => 3, variable => "variable key value", arrayLiteral => "arrayLiteral key value", objectLiteral => "objectLiteral key value", functionExpression => "functionExpression key value"}.
 mapOne.delete("keyOne"); // Item with key "keyOne" removed from mapOne. mapOne is Map(6) {"keyTwo" => 22, "keyThree" => 3, variable => "variable key value", arrayLiteral => "arrayLiteral key value", objectLiteral => "objectLiteral key value", functionExpression => "functionExpression key value"}.
 mapOne.delete("keyThree"); // Item with key "keyThree" removed from mapOne. mapOne is Map(5) {"keyTwo" => 22, variable => "variable key value", arrayLiteral => "arrayLiteral key value", objectLiteral => "objectLiteral key value", functionExpression => "functionExpression key value"}.
 mapOne.delete("keyThree"); // mapOne does not have item with key "keyThree". Nothing removed. mapOne is Map(5) {"keyTwo" => 22, variable => "variable key value", arrayLiteral => "arrayLiteral key value", objectLiteral => "objectLiteral key value", functionExpression => "functionExpression key value"}.
 mapOne.delete(arrayLiteral); // Item with key arrayLiteral removed from mapOne. mapOne is Map(4) {"keyTwo" => 22, variable => "variable key value", objectLiteral => "objectLiteral key value", functionExpression => "functionExpression key value"}.
 mapTwo.clear(); // Remove all items from mapTwo. mapTwo is Map(0) {}.
 if ((mapOne.size === 4) && (mapOne.has("keyOne") === false) && (mapOne.has("keyTwo") === true) && (mapOne.get("keyTwo") === 22) && (mapOne.has("keyThree") === false) && (mapOne.has(variable) === true) && (mapOne.get(variable) === "variable key value") && (mapOne.has(objectLiteral) === true) && (mapOne.get(objectLiteral) === "objectLiteral key value") && (mapOne.has(functionExpression) === true) && (mapOne.get(functionExpression) === "functionExpression key value") && (mapOne.get("stringKeyThatDoesNotExist") === undefined) && (mapTwo.size === 0) && (mapThree.size === 4)){
  element.innerHTML = "<b>Pass</b> (at least partial/possibly full support): The web browser recognizes the JavaScript <code>Map</code> object, and supports at least one <code>Map</code> object capability. The web browser at least partially/possibly fully supports the JavaScript <code>Map</code> object. Positive determination of full web browser support is beyond the scope of this test.";
 } else {
  element.innerHTML = "<b>Pass/Fail</b> (partial support): The web browser recognizes the JavaScript <code>Map</code> object, but does not support at least one <code>Map</code> object capability. The web browser partially supports the JavaScript <code>Map</code> object.";
 }
}
</script>

2.2. Web Browser Support Test Result

Fail (no support): The web browser does not recognize the JavaScript Map object. The web browser does not support the JavaScript Map object.

3. Resources And Additional Information