Features of ES2015's [[class]] attribute

Question

Features of ES2015's [[class]] attribute

I've been developing a basic clone function

var shallowCopy = function (value) {
  // In ES2017, we could also use
  // return Object.create(Object.getPrototypeOf(value), Object.getOwnPropertyDescriptors(value));
  let propDescriptors = {};
  for (let i of Object.getOwnPropertyNames(value)) {
    propDescriptors[i] = Object.getOwnPropertyDescriptor(value, i);
  }
  return Object.create(Object.getPrototypeOf(value), propDescriptors);
};

I have noticed that

Object.prototype.toString.call(shallowCopy([]))

returns [object Object] instead of [object Array].

However, I find the behavior of some new types introduced in ES6 intriguing

Object.prototype.toString.call(shallowCopy(new Set())) // [object Set]
Object.prototype.toString.call(shallowCopy(new Map())) // [object Map]

Does anyone know why these objects exhibit different behavior?
Do you think this behavior will change in the future?

Thank you.

javascript ecmascript-6

Answer 1

Answer №1

This particular item is not classified as a set. Genuine sets possess internal [[SetData]] slots that cannot be duplicated.

shallowCopy(new Set()).add(123); // TypeError: add method called on incompatible Object

In essence, relying on the [[Class]] property to determine the type of object you're dealing with is not advisable. Interestingly, the [[Class]] feature no longer exists in ES6.

Answer 2

This particular item is not classified as a set. Genuine sets possess internal [[SetData]] slots that cannot be duplicated.

shallowCopy(new Set()).add(123); // TypeError: add method called on incompatible Object

In essence, relying on the [[Class]] property to determine the type of object you're dealing with is not advisable. Interestingly, the [[Class]] feature no longer exists in ES6.

Answer 3

Answer №2

Your actions do not seem to be linked to the [[Class]] of an object.

If you check the output of Map.prototype, you will notice that these new variations come with a toStringTag Symbol:

> Map.prototype
Map {Symbol(Symbol.toStringTag): "Map"}

This Symbol property determines the string representation generated by calling toString(). Refer to Symbol.toStringTag on MDN for more information:

It provides a default description for objects, which is utilized by Object.prototype.toString().

The behavior is unlikely to change for older ES6 types due to compatibility concerns.

Answer 4

Your actions do not seem to be linked to the [[Class]] of an object.

If you check the output of Map.prototype, you will notice that these new variations come with a toStringTag Symbol:

> Map.prototype
Map {Symbol(Symbol.toStringTag): "Map"}

This Symbol property determines the string representation generated by calling toString(). Refer to Symbol.toStringTag on MDN for more information:

It provides a default description for objects, which is utilized by Object.prototype.toString().

The behavior is unlikely to change for older ES6 types due to compatibility concerns.

Answer 5

Answer №3

One important aspect of a Specification is the special symbol known as @@toStringTag, which is utilized when constructing the string representation of an object. To learn more about this symbol, refer to the Well-Known Symbols section, where it specifically explains @@toStringTag.

@@toStringTag is a String-valued property that contributes to creating the default string description of an object. This property can be accessed using the built-in method Object.prototype.toString.

If you examine the values of @@toStringTag for various types like Set or Promise, you will find interesting information. For example, the value for Set is defined in 23.2.3.12 Set.prototype [ @@toStringTag ]:

The initial value of the @@toStringTag property is the String value "Set".

Feel free to explore other types such as Promise (25.4.5.4), ArrayBuffer (24.1.4.4), and more.

Answer 6

One important aspect of a Specification is the special symbol known as @@toStringTag, which is utilized when constructing the string representation of an object. To learn more about this symbol, refer to the Well-Known Symbols section, where it specifically explains @@toStringTag.

@@toStringTag is a String-valued property that contributes to creating the default string description of an object. This property can be accessed using the built-in method Object.prototype.toString.

If you examine the values of @@toStringTag for various types like Set or Promise, you will find interesting information. For example, the value for Set is defined in 23.2.3.12 Set.prototype [ @@toStringTag ]:

The initial value of the @@toStringTag property is the String value "Set".

Feel free to explore other types such as Promise (25.4.5.4), ArrayBuffer (24.1.4.4), and more.

Features of ES2015's [[class]] attribute

Answer №1

Answer №2

Answer №3

Similar questions

Displaying infowindow pop-ups on random markers on Google Maps every 3 seconds

The inline style fails to take effect on input elements that are generated dynamically

React is currently in the process of downloading images that were not fetched during

Arranging Data in AngularJS based on Selected Filter Criteria

Is there a more efficient way to consolidate multiple functions like this into one cohesive function instead of having to define each one separately?

Is it feasible to activate a function when certain Vue data elements are altered?

Using jQuery to assign a specific value to all select boxes

Testing a directive that has templates all contained within a single file with script tags

The next and previous buttons on the JQuery UI datepicker are related to only one ancestor. When using $(e.target).parents(), it will only return a

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Ways to customize a bot's status based on the time of day

changing up the format of nested blockquotes

The Vue JS Router is prominently displayed in the center of the webpage

Converting HTML to JSON using jQuery

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

Troubleshooting directive not functioning properly with AngularJS ng-click

What method can be used to incorporate Google Places API into a .js file without using a <script> element?

What is the best way to modify the state of an array of objects by applying a filter in Vue 3?

What is the best way to create a fading footer effect on scroll using jQuery?

Adjust the color of TextareaAutosize component using mui in React