DEV Community

Bello Osagie
Bello Osagie

Posted on • Updated on

JavaScript Symbol Type

image.png


Symbols

The object key is either a string or symbol data type. A symbol is a primitive data type that represents a unique identifier on an object.

The below example shows how to create a symbol:

const id = Symbol(); // id is a new symbol
Enter fullscreen mode Exit fullscreen mode

The example above doesn't have a description or symbol name.

To create a symbol with a description the syntax is shown below:

id = Symbol(description)
Enter fullscreen mode Exit fullscreen mode

description is a keyword

The above syntax shows we can get a symbol description.

See the example below:

const id = Symbol("tz94s");

console.log(id.description); //tz94s
Enter fullscreen mode Exit fullscreen mode

See the example below:

const id = Symbol("id"); 
Enter fullscreen mode Exit fullscreen mode

Symbols with the same description are never the same.

See the example below:

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

id1 === id2 // false
Enter fullscreen mode Exit fullscreen mode

We can convert a symbol to a string.

const id = Symbol("id"); 
const toStr = id.toString();

console.log( toStr, typeof toStr ); // Symbol(id) string
Enter fullscreen mode Exit fullscreen mode

Hidden Properties

The purpose of Symbols is to make an object unique (hides objects properties).
See the example below:

let identifier = Symbol("id");;

const user = { 
  name: "Bello",
  [identifier]: Symbol("Ja69xz")
};

console.log( user[identifier] ); // Symbol(Ja69xz)
console.log(user);
// { name: 'Bello', [Symbol(id)]: Symbol(Ja69xz) }
Enter fullscreen mode Exit fullscreen mode

A unique id can also be added to an already existing object.

Syntax:

object[key] = description
Enter fullscreen mode Exit fullscreen mode

Where key = Symbol(description)

const user = { 
  name: "Bello"
};

const id = Symbol("identifier");

user[id] = "Ja69xz";

console.log(user) // { name: 'Bello', [Symbol(identifier)]: 'Ja69xz' }
console.log( user[id] ); // Ja69xz
Enter fullscreen mode Exit fullscreen mode

The benefit of using a symbol in an object is that a third party can not access or overwrite the code in the object.


image.png


The added advantage of symbols is that an object can have more than one identifier.

Let's assume a script from a JavaScript library has its own identifier added to the unique object created.

See the example below:

let myId = Symbol("id");

const user = { // belongs to another code
  name: "Bello",
  [myId]: "Ja69xz"
};

const scriptId = Symbol("identifier");

user[scriptId] = "sjz23f";

console.log(user); 

// {
//   name: 'Bello',
//   [Symbol(id)]: 'Ja69xz',
//   [Symbol(identifier)]: 'sjz23f'
// }
Enter fullscreen mode Exit fullscreen mode

Skipped object symbols in an object

Looping through an object containing the Symbol identifier is always skipped.

See the example below:

let myId = Symbol("id"); 

const user = { // belongs to another code
  name: "Bello",
  age: 27,
  [myId]: "Ja69xz"
};

for (let key in user) { 
  console.log(key) 
};

/*
for (let value of Object.values(user)) {
  console.log(value); // Bello 27
} 
*/
Enter fullscreen mode Exit fullscreen mode

In contrast, Object.assign() copies both string and symbol key properties:

let myId = Symbol("id"); 

const user = { 
  name: "Bello",
  age: 27,
  [myId]: "Ja69xz"
};

let clone = Object.assign({}, user);

console.log( clone[myId] ); // Ja69xz

console.log(clone); 
// { name: 'Bello', age: 27, [Symbol(id)]: 'Ja69xz' }
Enter fullscreen mode Exit fullscreen mode

The example below is reserved for separate article:

Object.keys(user);
Object.values(user);
Object.entries(user);
Enter fullscreen mode Exit fullscreen mode

Global Symbols

Symbols are never identical by default, but we can make them identical in a global symbol registry. Also, If a symbol does not exist, it can be created by the syntax below.

Syntax:

Symbol.for(key)
Enter fullscreen mode Exit fullscreen mode

See the example below:

// read from the global registry
const id1 = Symbol.for("id"); 
const id2 = Symbol.for("id");

id1 === id2; // true
Enter fullscreen mode Exit fullscreen mode

Symbols inside the registry are called global symbols

There's also a reverse that returns a name by a global symbol.

See the syntax below:

Symbol.keyFor(sym)
Enter fullscreen mode Exit fullscreen mode

The syntax above doesn't work for non-global symbols.

See the example below:

const sym1 = Symbol.for("jx4i9");
const sym2 = Symbol.for("i2dwk");

// get name by symbol
console.log( Symbol.keyFor(sym1) ); // jx4i9
console.log( Symbol.keyFor(sym2) ); // i2dwk
Enter fullscreen mode Exit fullscreen mode

If the symbol is not global, it returns undefined.

const globalSymbol = Symbol.for("jx4i9");
const localSymbol = Symbol("jx4i9");

console.log( Symbol.keyFor(globalSymbol) ); // jx4i9 => name, global symbol
console.log( Symbol.keyFor(localSymbol) ); // undefined => not global
Enter fullscreen mode Exit fullscreen mode

System Symbols

There are properties you can use on Symbols. We can use them to alter various aspects of objects.

Check out the static properties on MDN

We will use the properties on Symbols in future articles.


image.png


image.png

Top comments (0)