JavaScript Symbol Type

---

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

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)

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

See the example below:

const id = Symbol("id"); 

Symbols with the same description are never the same.

See the example below:

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

id1 === id2 // false

We can convert a symbol to a string.

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

console.log( toStr, typeof toStr ); // Symbol(id) string

---

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) }

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

Syntax:

object[key] = description

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

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

---

---

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'
// }

---

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
} 
*/

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' }

The example below is reserved for separate article:

Object.keys(user);
Object.values(user);
Object.entries(user);

---

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)

See the example below:

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

id1 === id2; // true

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)

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

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

---

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.

---

---