Symbols Are Your Friend Part V: Symbol.toPrimitive, Symbol.toStringTag, & Symbol.unscopables

Symbols Are Your Friend Series

I know. You haven't gotten your fill of symbols yet. Rest assured, there's more! This week, we'll take a look at the following symbol static properties:

Symbol.toPrimitive
Symbol.toStringTag
Symbol.unscopables

Symbol.toPrimitive This symbol defines the method to convert an object to a primitive.

Default behavior:

const arr = [1, 2, 3];
`${arr}`; // "1,2,3"

Symbol.toPrimitive utilization:

const arr = [1, 2, 3];
arr[Symbol.toPrimitive] = function(type) {
  const doubled = arr.map(item => {
      return item * 2;
  });

  return `doubled: ${doubled}`;
};
`${arr}`; // "doubled: 2,4,6"

Symbol.toStringTag This symbol defines the behavior of an object when it is converted into its default string description. Essentially it lets you modify the value of Object in "[object Object]" when Object.prototype.toString() is used:

Default behavior:

const shows = {
    cartoon: 'DuckTales',
    sitcom: 'Seinfeld',
    crime: 'NCIS'
};
Object.prototype.toString(shows); // "[object Object]"

Symbol.toStringTag utilization: Note that Symbol.toStringTag is a string valued property (and not a method).

const shows = {
  cartoon: 'DuckTales',
  sitcom: 'Seinfeld',
  crime: 'NCIS'
};
shows[Symbol.toStringTag] = 'Shows';
shows.toString(); // "[object Shows]"

One thing that's odd about this symbol is that it does not seem to work with anything other than objects:

const arr = [1, 2, 3];
arr[Symbol.toStringTag] = 'Numbers';
Object.prototype.toString(arr); "[object Object]"

const str = 'My string';
str[Symbol.toStringTag] = 'Custom String';
Object.prototype.toString(str); "[object Object]"

If anyone knows why, please comment!

Symbol.unscopables This symbol is so incredibly useless but it at least introduced the with statement to me which I had never see before. Essentially, Symbol.unscopables modifies the behavior of with. So what exactly does that do?

with allows you to create a scope to a statement. The syntax is as follows:

with (expression)
  statement

Here's an example:

with ({ first: 'Charles', last: 'Bronson' }) {
  console.log(`Hi ${first} ${last}!`);
  // Logs "Hi Charles Bronson!
}

So yeah, that's all it does. Also note that with is deprecated as it has browser compatibility issues.

So all Symbol.unscopables allows you to do is define what properties of an object are excluded from a with environment binding:

const actor = {
  first: 'Charles',
  last: 'Bronson'
};

actor[Symbol.unscopables] = {
  last: true
};

with (actor) {
  console.log(first); // Logs "Charles"
  console.log(last); // Logs ReferenceError
}

JS Bits with Bill

JS Bits with Bill

Symbols Are Your Friend Part V: Symbol.toPrimitive, Symbol.toStringTag, & Symbol.unscopables