Best of Modern JavaScript — Symbols and Base Classes

Image for post
Image for post
Photo by Alex Plesovskich on Unsplash

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at new OOP features in JavaScript.

Symbol.toPrimitive Method

The Symbol.toPrimitive lets an object customize how it’s converted to a pritmive value.

Many JavaScript operators coverts operands.

For instance, the multiplication operator converts operands to numbers.

The Date constructor converts parameters to numbers.

parseInt also does the same conversion.

The most common kind of values is converted to boolean, number, string, or object.

Numbers and string conversions are converted by the ToPrimitive operation.

There’re other methods used for coercion.

They include the obj.valueOf method to convert it primitive wrapper object to a primitive value.

To convert strings, the obj.toString method is returned if it’s primitive.

valueOf is called as an alternative.

The default mode is to convert to a number.

Date.prototype[Symbol.toPrimitive] deviates from the default algorithm for conversion.

It converts the Date instance to a timestamp.

For instance, we can override the Symbol.toPrimitive method by writing:

The hint has the string with the mode for conversion.

And we can return what we want based on that.

Symbol.toStringTag

The Symbol.toStringTag is a string-valued property that’s used to create the default string description of an object.

It’s used internally by the Object.prototype.toString method.

For instance, we can create our own description by writing:

Then when we call:

Then we get:

logged.

The default return values for Symbol.toStringTag for various kinds of objects are the following:

  • undefined' Undefined'
  • null 'Null'
  • array — 'Array'
  • string — 'String'
  • arguments 'Arguments'
  • something callable — 'Function'
  • error object — 'Error'
  • boolean object — 'Boolean'
  • number object — 'Number'
  • date object — 'Date'
  • regular expression object — 'RegExp'
  • everything else — 'Object'

Overriding the Default toString Tag

We can override the default toString tag by overriding the Symbo.toStringTag method with our own method.

Built-in classes also have their own string tags.

Objects like JSON , Math , ArrayBuffer , DataView , Map , Promise , Set , TypedArray , WeakMap , WeakSet , etc. all have their own string tags.

The Symbol.toStringTag methods are all non-writable, non-enumerable, but it’s configurable.

Symbol.unscopables

Symbol.unscopables lets an object hide some properties from the with statement.

It’s only used by the Array.prototype in the standard library.

We shouldn’t use the with statement, so we don’t have to worry about this.

Base Classes

Class syntax is introduced with ES6 to let us create constructors easier.

For instance, we can write:

We can then create the object from it by writing:

And we can call the toString method by writing:

and get 'james' .

If we check the type of the class with typeof :

We get 'function' .

However, if we try to call it as a function, we can write:

We’ll get the error ‘TypeError: Classes can’t be function-called’.

Conclusion

We can override common well-known symbols to change the behavior of objects.

Also, we can use the class syntax to create constructors.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store