JavaScript Symbol

JavaScript Symbol

JavaScript Symbol Type and Properties

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

In JavaScript, the object key can only be in either string or symbol.

A symbol represents a unique identifier

To create a symbol, the syntax is shown below:

id = Symbol()

To create a symbol with a description (symbol-name), the syntax is shown below:

id = Symbol("description")

The description is just a label that is unique to an object.

It is important to note that symbols with the same description are still different.

See the example below:

const id1 = Symbol("description");
const id2 = Symbol("description");

console.log(id1 === id2); // false

It is also important to note that symbols do not allow auto-conversion (coercion) to string.

See the example below:

const id3 = Symbol("description");
alert(id3); // TypeError...

To do the conversion, use the toString() function on it.

See the example below:

const id4 = Symbol("id");
alert(typeof id4.toString); // string

Alternatively, we can use the id.description to show the description only.

let id5 = Symbol("id");
alert(id5.description, toString id5.description); // id string

Hidden Properties

Symbols allow us to create hidden properties of an object. See the example below:

const person = { // belongs to another code
  name: "Bello"
};

let id = Symbol("id");

person[id] = 4; // added id key to user object

alert( person[id] ); // 4 => accessed data by the symbol as the key

The code above shows that a symbol cannot be accessed accidentally by any part of your code.

If a string is used in place of a symbol, the last string "id" will be overridden (overwritten) by any other previous string id from our script or another JavaScript library script.

See the example below:

const person = { name: "John" };

// my script uses "id" property
person.id = "id value before the last script";

// library script uses the "id" property
person.id = "id value in last script" // overwritten by another script!
console.log(person.id); // id value in last script

Symbol id as key

To use a symbol as a key in an object literal, the square bracket must be used around it.

const id = Symbol("id");

const user = {
  name: "John",
  [id]: 639 // not "id": 639
};

Cloning symbol keys

The for...in skips any symbol key in an object. See the example below:

const id = Symbol("id");
const user = {
  name: "Bello",
  age: 27,
  [id]: 396
};

for (let key in user) {
  console.log(key); // name, age => no symbols
}
// Object.keys(user) also skips them.

The Object.assign copies both string and symbol properties.

See the example below:

const id = Symbol("id");
const user = {
  name: "Bello",
  age: 27,
  [id]: 396
};

let clone = Object.assign({}, user);
alert( clone[id] ); // 396

Global Symbol Registry

Symbols are always different by default even if they have the same description, but sometimes we want to use the same-named symbol of the same entities anyway in a program.

To achieve that, the Symbol.for(key) is used to create a global symbol registry for repeated access by the same name to return exactly the same symbol.

See the example below:

const id1 = Symbol.for("id"); // if the symbol did not exist, it is created
const id2 = Symbol.for("id");

console.log( id1 === id2); // true => the same symbol

Symbols inside the registry are called global symbols.


Symbol.keyFor

The reverse of Symbol.for is Symbol.keyFor, it returns a name by a global symbol.

See the example below:

// get symbol by name
const sym1 = Symbol.for("id1");
const sym2 = Symbol.for("id2");

// get name by symbol
console.log( Symbol.keyFor(sym1) ); // id1
console.log( Symbol.keyFor(sym2) ); // id2

The Symbol.keyFor internally uses the global symbol registry to look up the key for the symbol. If the symbol is not global, it returns undefined

See the example below:

const globalSymbol = Symbol.for("globalName");
const localSymbol = Symbol("localName");

console.log( Symbol.keyFor(globalSymbol) ); // globalName => global symbol
console.log( Symbol.keyFor(localSymbol) ); // undefined => not global

console.log( localSymbol.description ); // localName

System Symbols

Internally, there are different JavaScript System Symbols. Below is a few of them.

  • Symbol.hasInstance
  • Symbol.isConcatSpreadable
  • Symbol.iterator
  • Symbol.toPrimitive

Check out the full list on MDN


Buy me a Coffee


#javascript#tutorial#codenewbies#webdevelopment#webdev
 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.

Proudly part of