An Interest In:
Web News this Week
- May 1, 2024
- April 30, 2024
- April 29, 2024
- April 28, 2024
- April 27, 2024
- April 26, 2024
- April 25, 2024
Using JavaScript Symbol.toStringTag for objects types description
A day ago I asked my developers friends:
How to know a JavaScript object literal type?
Most of the answers of the answers suggested to use instanceof, while this answer works for objects created by using a constructor, it can not work with objects literals or maybe for some reasons developers don't export the object constructor from the module but they provide a factory with object initializer instead.
The use case:
The question was about the following use case:
const user = { username: 'johndoe', firstname: 'John', lastname: 'Doe'};
It is hard to determine if the object above is in certain type without checking the presence of all the properties, imagine if we have a more than 10 properties or more, it would be exhausting, right?
It is obvious it would be good if we can know that the object is indeed in User
type just by a single call.
Using Object.prototype.toString()
gives the object type inside square brackets for the built-in:
console.log(Object.prototype.toString.call(1)); // -> '[object Number]'console.log(Object.prototype.toString.call('Cherif')); // -> '[object String]'
Or:
const one = 1;const name = 'Cherif';console.log(one.toString()); // -> '[object Number]'console.log(name.toString()); // -> '[object String]'
But for a developer defined objects it gives a [object Object]
result, a generic object:
const user = { username: 'johndoe', firstname: 'John', lastname: 'Doe'};console.log(user.toString()); // -> '[object Object]'console.log(Object.prototype.toString.call(user)); // -> '[object Object]'
Symbol.toStringTag to the rescue
Fortunately with the introduction of ES6 Symbol
s a number of built-in symbols had seen the day make it possible to describe custom objects type by overriding Object.prototype.toString()
using Symbol.toStringTag
, so to describe a type for our user
object we can do the following:
const user = { username: 'johndoe', firstname: 'John', lastname: 'Doe', get [Symbol.toStringTag]() { return 'User'; // The string tag description }};console.log(user.toString(user)); // -> '[object User]'console.log(Object.prototype.toString.call(user)); // -> '[object User]'
Read the string using Symbol.toStringTag:
I would advice to make the check using the Symbol
property by using user[Symbol.toStringTag]
, like this we have the possibility to override toString
function for other purposes, and we can just have User
string from the string tag instead of [object User]
example:
const user = { username: 'johndoe', firstname: 'John', lastname: 'Doe', get [Symbol.toStringTag]() { return 'User'; // The string tag description }, toString() { return `${this.firstname} ${this.lastname}`; }};console.log(user[Symbol.toStringTag]); // -> "User"console.log(user.toString()); // -> "John Doe"
All the code example are in the following CodePen:
See the Pen Symbol.stringTag by Mohamed Cherif Bouchelaghem
(@cherifGsoul) on CodePen.
I hope you find this article useful and helpful, let me your thoughts in the comments below.
Original Link: https://dev.to/cherif_b/using-javascript-tostringtag-for-objects-types-description-15hc
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To