Best of Modern JavaScript — Strings and Symbols

Since 2015, JavaScript has improved immensely.

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

In this article, we’ll look at the core features of JavaScript.

New String Methods

New string methods include code point and template literal methods.

There’s the String.raw method that returns the raw version of a string.

For instance, we can write:

String.raw`n`

to return the raw version of the string.

The slashes aren’t interpreted.

A function used for template literals is called a template tag.

The String.fromCodepoint method returns a string from the codepoints given.

For instance, we can use it by writing:

String.fromCodePoint(9731, 9733, 9842)

Then we get:

"☃★♲"

The String.prototype.normalize method lets us combine change code point combinations that have the same value to be the same.

For instance, we can write:

'u00F1'.normalize('NFC')

Then we get:

"ñ"

'NFC' is the format for normalizing a string and it’s the default one.

It means canonical decomposition followed by canonical composition.

Symbols

Symbols is a new primitive type for ES6.

We can create it with the Symbol factory function.

For instance, we can write:

`const` foo `=` `Symbol('`foo`');`

Every time we call the factory, a new symbol is created.

So no 2 symbols are the same.

These are useful as unique property keys.

For instance, the Symbol.iterator symbol is a special symbol for creating iterable objects.

We can write:

const iterableObject = {
  [Symbol.iterator]() {
    //···
  }
}
for (const x of iterableObject) {
  console.log(x);
}

to create the object and loop through it with for-of.

We can also use them as constants to represent concepts.

For example, we can write:

const COLOR_RED = Symbol('red');
const COLOR_GREEN = Symbol('green');
const COLOR_BLUE = Symbol('blue');

function getValue(color) {
  switch (color) {
    case COLOR_RED:
      return 1;
    case COLOR_BLUE:
      return 2;
    case COLOR_GREEN:
      return 2;
    default:
      throw new Error('Unknown color: ');
  }
}

We have to use them variable created from Symbol to reference a symbol since a new one will be created every time we call Symbol .

Symbols can’t be coerced to strings.

For instance, the following won’t work:

const foo = Symbol('foo');
const str = foo + '';

or

const foo = Symbol('foo');
const str = `${foo}`;

We’ll get the error ‘Uncaught TypeError: Cannot convert a Symbol value to a string’ in both examples.

We can use toString to convert it.

So we can write:

const foo = Symbol('foo');
const str = foo.toString();

Then str is 'Symbol(foo)’ .

The following operations are aware of symbols:

• Reflect.ownKeys()
• Property access via []
• Object.assign()

And the following ignore symbols as keys:

• Object.keys()
• Object.getOwnPropertyNames()
• for-in loop

Symbol ‘s string parameter is optional.

Everything symbol is unique, so:

Symbol() === Symbol()

returns false .

If we use the typeof operator with it:

typeof Symbol()

We get 'symbol' .

We can use symbols as property keys by writing:

const FOO = Symbol();
const obj = {
  [FOO]: 123
};

We can also define methods with it:

const FOO = Symbol();
const obj = {
  [FOO](){}
};

Conclusion

ES6 correctly identifies all Unicode characters.

Also, it introduced the symbol data type used as unique identifiers.