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)
descriptionis 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.
Top comments (0)