JavaScript Symbol Type
Tags: javascript, node, tutorial, webdev
Published: 2021-02-21 20:49:03


[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613948717035/yVv2vRcCi.png)](https://www.sitepoint.com/?ref=osagiebello&utm_source=osagiebello)

---
### 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:

```js
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:

```js
const id = Symbol("tz94s");

console.log(id.description); //tz94s
```

See the example below:

```js
const id = Symbol("id"); 
```

Symbols with the same description are never the same.

See the example below:

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

id1 === id2 // false
```

We can convert a symbol to a string.

```js
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:

```js
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)` 


```js
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.

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613948966481/3wco9yV6n.png)](https://www.datacamp.com/?tap_a=82040-4385c0&tap_s=1301289-aaa316)

---


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:

```js
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:

```js
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:

```js
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:

```js
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:

```js
// 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:

```js
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`.

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#static_properties)

We will use the properties on Symbols in future articles.

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613713705217/uiPmj9ciw.png)](https://buymeacoffee.com/techstackmedia)

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613949204218/m3qPSyAbp.png)](https://skillshare.eqcm.net/c/2680282/300216/4650)