A foolproof method for confirming an object is an EcmaScript 6 Map or Set

Question

A foolproof method for confirming an object is an EcmaScript 6 Map or Set

Can someone help me verify if an object is a Map or Set, but not an Array?

For checking an Array, I currently use lodash's _.isArray.

function myFunc(arg) {
  if (_.isArray(arg)) {
    // doSomethingWithArray(arg)
  }

  if (isMap(arg)) {
    // doSomethingWithMap(arg)
  }

  if (isSet(arg)) {
    // doSomethingWithSet(arg)
  }
}

If I were to create the isMap/isSet functions, how should they be implemented? I want them to be able to handle subclasses of Map/Set if possible.

javascript dictionary collections set ecmascript-6

Answer 1

Answer №1

When it comes to detecting arrays accurately and reliably, the current situation resembles the pre-ES5 methods. Refer to this insightful article for a deeper understanding of the potential pitfalls of implementing isArray.

Various methods can be utilized:

obj.constructor == Map/Set, but this approach is ineffective with subclass instances and vulnerable to deception.
obj instanceof Map/Set, while functional, may fail across realms and can be tricked via prototype manipulation.
obj[Symbol.toStringTag] == "Map"/"Set", which can be easily deceived again.

To ensure accuracy, testing for [[MapData]]/[[SetData]] internal slots is necessary, although these are not easily accessible as they are internal. However, a workaround exists:

function isMap(o) {
    try {
        Map.prototype.has.call(o); // throws if o is not an object or has no [[MapData]]
        return true;
    } catch(e) {
        return false;
    }
}
function isSet(o) {
    try {
        Set.prototype.has.call(o); // throws if o is not an object or has no [[SetData]]
        return true;
    } catch(e) {
        return false;
    }
}

For general use, utilizing instanceof is recommended for its simplicity, understandability, performance, and effectiveness in most scenarios. Alternatively, one could opt for duck typing and focus on whether the object possesses has/get/set/delete/add/delete methods.

Answer 2

When it comes to detecting arrays accurately and reliably, the current situation resembles the pre-ES5 methods. Refer to this insightful article for a deeper understanding of the potential pitfalls of implementing isArray.

Various methods can be utilized:

obj.constructor == Map/Set, but this approach is ineffective with subclass instances and vulnerable to deception.
obj instanceof Map/Set, while functional, may fail across realms and can be tricked via prototype manipulation.
obj[Symbol.toStringTag] == "Map"/"Set", which can be easily deceived again.

To ensure accuracy, testing for [[MapData]]/[[SetData]] internal slots is necessary, although these are not easily accessible as they are internal. However, a workaround exists:

function isMap(o) {
    try {
        Map.prototype.has.call(o); // throws if o is not an object or has no [[MapData]]
        return true;
    } catch(e) {
        return false;
    }
}
function isSet(o) {
    try {
        Set.prototype.has.call(o); // throws if o is not an object or has no [[SetData]]
        return true;
    } catch(e) {
        return false;
    }
}

For general use, utilizing instanceof is recommended for its simplicity, understandability, performance, and effectiveness in most scenarios. Alternatively, one could opt for duck typing and focus on whether the object possesses has/get/set/delete/add/delete methods.

Answer 3

Answer №2

To determine if an object is a Set, you can utilize the instanceof operator:

function checkIfSet(obj) {
  return obj instanceof Set;
}

If the object in question inherits the Set.prototype, the instanceof operator will return true.

update — Although the instanceof approach is effective in most cases, there are specific scenarios where it may not be accurate, as explained in Bergi's response.

Answer 4

To determine if an object is a Set, you can utilize the instanceof operator:

function checkIfSet(obj) {
  return obj instanceof Set;
}

If the object in question inherits the Set.prototype, the instanceof operator will return true.

update — Although the instanceof approach is effective in most cases, there are specific scenarios where it may not be accurate, as explained in Bergi's response.

Answer 5

Answer №3

To check if an item is a Map or Set, you can use the following functions:

export function isMap(item) {
  return !!item && Object.prototype.toString.call(item) === '[object Map]';
}

export function isSet(item) {
  return !!item && Object.prototype.toString.call(item) === '[object Set]';
}

It's important to note that these functions will work unless the prototype of this method has been overridden.

Answer 6

To check if an item is a Map or Set, you can use the following functions:

export function isMap(item) {
  return !!item && Object.prototype.toString.call(item) === '[object Map]';
}

export function isSet(item) {
  return !!item && Object.prototype.toString.call(item) === '[object Set]';
}

It's important to note that these functions will work unless the prototype of this method has been overridden.

Answer 7

Answer №4

If you're looking for inspiration for your Vue code, check out this method used in the Vue source code. You can get some great ideas from here.

export const isMap = (val: unknown): val is Map<any, any> =>
  toTypeString(val) === '[object Map]'
export const isSet = (val: unknown): val is Set<any> =>
  toTypeString(val) === '[object Set]'


export const objectToString = Object.prototype.toString
export const toTypeString = (value: unknown): string =>
  objectToString.call(value)

It's a straightforward approach. Just convert the object to a string and then check if it matches '[object Map]' or '[object Set]'

I recommend frontend developers to explore the Utility functions in the Vue source code. There's always something valuable to learn.

Here is the link to Vue source: https://github.com/vuejs/vue-next/blob/master/packages/shared/src/index.ts

You can find the code I referenced here.

Answer 8

If you're looking for inspiration for your Vue code, check out this method used in the Vue source code. You can get some great ideas from here.

export const isMap = (val: unknown): val is Map<any, any> =>
  toTypeString(val) === '[object Map]'
export const isSet = (val: unknown): val is Set<any> =>
  toTypeString(val) === '[object Set]'


export const objectToString = Object.prototype.toString
export const toTypeString = (value: unknown): string =>
  objectToString.call(value)

It's a straightforward approach. Just convert the object to a string and then check if it matches '[object Map]' or '[object Set]'

I recommend frontend developers to explore the Utility functions in the Vue source code. There's always something valuable to learn.

Here is the link to Vue source: https://github.com/vuejs/vue-next/blob/master/packages/shared/src/index.ts

You can find the code I referenced here.

Answer 9

Answer №5

Alternatively, you can verify the prototypes:

Object.getPrototypeOf(i) === Map.prototype

Answer 10

Alternatively, you can verify the prototypes:

Object.getPrototypeOf(i) === Map.prototype

A foolproof method for confirming an object is an EcmaScript 6 Map or Set

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The error message "Unable to map props.theTodos" is displayed

What's the best way to retrieve the dates for the current week using JavaScript?

Using environmental variables in Nuxt 3 outside of component setup scripts can be easily achieved by accessing the variables directly

What is the method to establish a reference based on a value in programming?

Angular-material's Md-dialog popup box is displayed as a separate view within the Yeoman framework

Ways to remove curly brackets from a dictionary?

Creating a personalized input slider: A step-by-step guide

What exactly is the purpose of editing a host file?

What is the method to retrieve the return value from this ajax request?

Offering fields for modules, main, and browser that meet the needs of ESM, CommonJS, and bundlers

How can I adjust the column width in OfficeGen?

How to automatically insert a page break after a certain string in an array using JavaScript

Using a JSON key as a parameter in a function

Prevent users from clicking by using a CSS class in HTML and JavaScript

Is it possible to spread an empty array in JavaScript?

Is the absolute positioned element on the left or right based on its current location?

Exploring React and finding the way to a specific item

using the information from the child array within a v-if condition

Tips for validating Angular form group input depending on the value of another input within the form?

Using jQuery AJAX to send data containing symbols