First of all, symbol is a built-in primitive type. And its guaranteed to be unique. Symbols are often used to add unique property keys to an object wont collide with keys that any other code might add to the object. And the properties under the Symbol key are hidden from any mechanisms other code will typically use to access the object(like for…in, for…of, Object.keys, Object.getOwnPropertyNames and JSON.stringify etc.), but can be accessed by Object.getOwnPropertySymbols and Reflect.ownKeys (which will return both string and symbol keys).
13 types of built-in Symbols
There are 13 types of built-in symbols to be listed as Vue3 goes.
A method determining if a constructor object recognizes an object as its instance.
A Boolean value indicating if an object should be flattened to its array elements. The default value of Symbol.isConcatSpreadable property of Array is true, even if the Array.prototype[Symbol.isConcatSpreadable] returns undefined, while the default value of the Array like object like {length: 2, 0: element1, 1: element2} is false returning undefined also.
A method returning the default iterator for an object. Iterator offers an unified interface for different data structures to access their elements, and can be iterated over by for…of construct. The so-called iterable object is that with Symbol.iterator property.
And the built-in iterable object are, Array, String, Set, Map, generator object, TypedArray, some of array-like objects(e.g. arguments, NodeList, HTMLCollection etc.) and so forth.
The interface of an Iterator is like:
And heres a good example for this:
It might be a good segue into Symbol.asyncIterator which is the asynchronous version of Symbol.iterator that we mention before. And its a method that returns the default AsyncIterator for an object, only used by the brand new loop statement for await…of, Ill illustrate in an example:
A method that matches a string, also used to determine if an object may be used as a regular expression. Used as input by String.prototype.match().
Lets have an example:
By the way, there are two points should be notice for String.prototype.match invocation.
Calling String.prototype.match with a non-RegExp input, its implicitly coerced into a RegExp by using new RegExp().If the RegExp input is with /g flag, the returning will contain the full matches with no index, input or groups properties as that without /g flag.A method that returns an iterator, that yields all matches of the regular expression against a string, including capturing groups. Used by String.prototype.matchAll(). And each match is an Array with extra properties index and input. And the matched text is as the first item of the match array, and then one item for the parenthetical capture group of the matched text.
For String.prototype.matchAll, please take attention that passing an input without /g flag will hit into an TypeError.
Symbol.replaceA method that expects two parameters and replaces matched substrings of a string. Used by String.prototype.replace(searchValue, replaceValue) as the searchValue.
Back to the String.prototype.replace, the first argument pattern could be either a string or RegExp, and the second one replacement could be a string or a function to be called for each match. The arguments to the replacement function are as follows:
match, the matched substring(Corresponds to $&)p1,p2,…, the nth string found by a parenthesized capture group including named capture groups.offset, the offset of the matched substring within the whole string being examined.string, the whole string to be examined.groups, the named capturing groups object of which keys are the names of capturing group and the values are the matched portions.Symbol.searchA method that returns the index within a string that matches the regular expression. Used by String.prototype.search(). An innovation of String.prototype.indexOf which accepts a RegExp input.
Symbol.splitA method that splits a string at the indices that match a regular expression. Used by String.prototype.split()
Symbol.toPrimitiveA method converting an object to a primitive object.
A string value used for the default description of an object. Used by Object.prototype.toString().
Its a function-valued property that the construct function that is used to create derived objects. For example:
An object value of whose own and inherited property names are excluded from the with environment bindings of the associated object. There is no other better manner to make sense than through an example:
Define your own symbol instance
Create our own unique local Symbol value with code Symbol(key?: string) Note that Symbol(hi) wont coerce the string hi into a Symbol, it creates a brand new Symbol value each time instead.We can get the key by accessing description property in ES2019.Create or get the shared global Symbols by calling Symbol.for(key: string) return the global Symbol with the given value of key if it can be found in th global Symbol registry. Otherwise, the new one is created, added to the global Symbol registry under the given key, and returned.Return the key of a global symbol instance Symbol.keyFor(instance: symbol) Note that, calling Symbol.keyFor with a local symbol instance will return undefined.properties with Symbol key will not exist in for…in, nor for…of
Digression – Object.keys and Object.getOwnPropertyNames
Object.keys will returns the enumerable own property names of the passing argument, while Object.getOwnPropertyNames returns all own property names no matter its enumerable or not.
And the same point of both is that, all property name they return are string. The Symbol ones should be got by Object.getOwnPropertySymbols of which the type of return value is Symbol[].
