1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
---
title: Symbool
slug: Web/JavaScript/Reference/Global_Objects/Symbol
tags:
- ECMAScript 2015
- JavaScript
- Klasse
- Symbool
translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
original_slug: Web/JavaScript/Reference/Global_Objects/Symbool
---
<div>{{JSRef}}</div>
<p>Het gegevenstype symbool is een <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Primitive">primitief gegevenstype</a>. De Symbol() functie geeft een waarde terug <em>(returns a value)</em> van het type symbool, heeft statische eigenschappen die verscheidene leden van ingebouwde objecten blootstelt, heeft statische methoden die het globale symbolregister blootstellen en vertegenwoordigd een ingebouwde objectklasse. Maar is onvolledig als een constructor, omdat het niet de "new Symbol()" syntaxis ondersteund.</p>
<p>Elke waarde teruggekregen van Symbol() is uniek. Zo'n teruggekregen waarde kan, bijvoorbeeld, gebruikt worden als identificatiemiddel voor objecteigenschappen; het primaire doel van dit gegevenstype. Hoewel er andere use-cases zijn, zoals het beschikbaar maken van ondoorzichtige gegevenstypen of als algemeen uniek identificatiemiddel. Meer uitleg over het doel en gebruik van het symbool is te vinden in de woordenlijst.</p>
<h2 id="Beschrijving">Beschrijving</h2>
<p>Om een nieuw primitief symbool te creëren, schrijf je <code>Symbol()</code> met een optionele <a href="/en-US/docs/Web/CSS/string">String</a> als beschrijving:</p>
<pre class="brush: js">let sym1 = Symbol()
let sym2 = Symbol('foo')
let sym3 = Symbol('foo')
</pre>
<p>De bovenstaande code creëert drie nieuwe symbolen. Let er op dat <code>Symbol("foo")</code> niet de string <code>"foo"</code> omzet naar een symbool maar dat het telkens een nieuw uniek symbool creëert:</p>
<pre class="brush: js">Symbol('foo') === Symbol('foo') // false
</pre>
<p>De volgende syntaxis met de {{jsxref("Operators/new", "new")}} operator zal een {{jsxref("TypeError")}}: afwerpen:</p>
<pre class="brush: js">let sym = new Symbol() // TypeError
</pre>
<p>Dit behoed auteurs ervoor om nadrukkelijk een <code>Symbol</code> wrapper-object te creëren in plaats van een nieuwe symboolwaarde. Terwijl normaal gesproken primitieve gegevenstypen wel gemaakt kunnen worden met een wrapper-object. (Zoals: <code>new Boolean</code>, <code>new String</code> en <code>new Number</code>).</p>
<p>Als je echt een <code>Symbol</code> wrapper-object wilt maken, kun je dit doen met de <code>Object()</code> functie:</p>
<pre class="brush: js">let sym = Symbol('foo')
typeof sym // "symbol"
let symObj = Object(sym)
typeof symObj // "object"
</pre>
<h3 id="Gedeelde_symbolen_in_het_globale_symboolregister">Gedeelde symbolen in het globale symboolregister</h3>
<p>De bovenstaande syntaxis, die gebruik maakt van de <code>Symbol()</code> functie, creëert alleen niet een globaal symbool dat te gebruiken is door je gehele codebase. Om symbolen te creëren die door al je bestanden en zelfs door je <em>realms</em> (met elk hun eigen globale<em> scope</em>) te gebruiken zijn; gebruik je de methoden {{jsxref("Symbol.for()")}} en {{jsxref("Symbol.keyFor()")}}. Om, respectievelijk<strong>, </strong>symbolen in het globale symbolenregister aan te maken en terug te krijgen.</p>
<h3 id="Symbooleigenschappen_vinden_in_objecten">Symbooleigenschappen vinden in objecten</h3>
<p>De methode {{jsxref("Object.getOwnPropertySymbols()")}} geeft een array met symbolen terug en laat je symbooleigenschappen vinden in een opgegeven object. Let er op dat elk object geïnitialiseerd wordt zonder eigen symbooleigenschappen, dus deze array zal leeg zijn tenzij je een symbool als eigenschap hebt gegeven aan een object. </p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/Symbol">Symbol()</a></code></dt>
<dd>De <code>Symbol()</code> constructor geeft een waarde terug van het type <strong>symbol</strong>, maar is incompleet als een constructor omdat het niet de "<code>new Symbol()</code>" syntaxis ondersteund.</dd>
</dl>
<h2 id="Static_properties">Static properties</h2>
<dl>
<dt>{{jsxref("Symbol.asyncIterator")}}</dt>
<dd>A method that returns the default AsyncIterator for an object. Used by <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of"><code>for await...of</code></a>.</dd>
<dt>{{jsxref("Symbol.hasInstance")}}</dt>
<dd>A method determining if a constructor object recognizes an object as its instance. Used by {{jsxref("Operators/instanceof", "instanceof")}}.</dd>
<dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt>
<dd>A Boolean value indicating if an object should be flattened to its array elements. Used by {{jsxref("Array.prototype.concat()")}}.</dd>
<dt>{{jsxref("Symbol.iterator")}}</dt>
<dd>A method returning the default iterator for an object. Used by <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd>
<dt>{{jsxref("Symbol.match")}}</dt>
<dd>A method that matches against a string, also used to determine if an object may be used as a regular expression. Used by {{jsxref("String.prototype.match()")}}.</dd>
<dt>{{jsxref("Symbol.matchAll")}}</dt>
<dd>A method that returns an iterator, that yields matches of the regular expression against a string. Used by {{jsxref("String.prototype.matchAll()")}}.</dd>
<dt>{{jsxref("Symbol.replace")}}</dt>
<dd>A method that replaces matched substrings of a string. Used by {{jsxref("String.prototype.replace()")}}.</dd>
<dt>{{jsxref("Symbol.search")}}</dt>
<dd>A method that returns the index within a string that matches the regular expression. Used by {{jsxref("String.prototype.search()")}}.</dd>
<dt>{{jsxref("Symbol.split")}}</dt>
<dd>A method that splits a string at the indices that match a regular expression. Used by {{jsxref("String.prototype.split()")}}.</dd>
<dt>{{jsxref("Symbol.species")}}</dt>
<dd>A constructor function that is used to create derived objects.</dd>
<dt>{{jsxref("Symbol.toPrimitive")}}</dt>
<dd>A method converting an object to a primitive value.</dd>
<dt>{{jsxref("Symbol.toStringTag")}}</dt>
<dd>A string value used for the default description of an object. Used by {{jsxref("Object.prototype.toString()")}}.</dd>
<dt>{{jsxref("Symbol.unscopables")}}</dt>
<dd>An object value of whose own and inherited property names are excluded from the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated object.</dd>
</dl>
<h2 id="Static_methods">Static methods</h2>
<dl>
<dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt>
<dd>Searches for existing symbols with the given <code><var>key</var></code> and returns it if found. Otherwise a new symbol gets created in the global symbol registry with <code><var>key</var></code>.</dd>
<dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt>
<dd>Retrieves a shared symbol key from the global symbol registry for the given symbol.</dd>
</dl>
<h2 id="Instance_properties">Instance properties</h2>
<dl>
<dt>{{jsxref("Symbol.prototype.description")}}</dt>
<dd>A read-only string containing the description of the symbol.</dd>
</dl>
<h2 id="Instance_methods">Instance methods</h2>
<dl>
<dt>{{jsxref("Symbol.prototype.toSource()")}}</dt>
<dd>Returns a string containing the source of the {{jsxref("Global_Objects/Symbol", "Symbol")}} object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd>
<dt>{{jsxref("Symbol.prototype.toString()")}}</dt>
<dd>Returns a string containing the description of the Symbol. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd>
<dt>{{jsxref("Symbol.prototype.valueOf()")}}</dt>
<dd>Returns the primitive value of the {{jsxref("Symbol")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd>
<dt>{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}</dt>
<dd>Returns the primitive value of the {{jsxref("Symbol")}} object.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="Using_the_typeof_operator_with_symbols">Using the typeof operator with symbols</h3>
<p>The {{jsxref("Operators/typeof", "typeof")}} operator can help you to identify symbols.</p>
<pre class="brush: js">typeof Symbol() === 'symbol'
typeof Symbol('foo') === 'symbol'
typeof Symbol.iterator === 'symbol'
</pre>
<h3 id="Symbol_type_conversions">Symbol type conversions</h3>
<p>Some things to note when working with type conversion of symbols.</p>
<ul>
<li>When trying to convert a symbol to a number, a {{jsxref("TypeError")}} will be thrown<br>
(e.g. <code>+<var>sym</var></code> or <code><var>sym</var> | 0</code>).</li>
<li>When using loose equality, <code>Object(<var>sym</var>) == <var>sym</var></code> returns <code>true</code>.</li>
<li><code>Symbol("foo") + "bar" </code>throws a {{jsxref("TypeError")}} (can't convert symbol to string). This prevents you from silently creating a new string property name from a symbol, for example.</li>
<li>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"safer" <code>String(<var>sym</var>)</code> conversion</a> works like a call to {{jsxref("Symbol.prototype.toString()")}} with symbols, but note that <code>new String(<var>sym</var>)</code> will throw.</li>
</ul>
<h3 id="Symbols_and_for...in_iteration">Symbols and for...in iteration</h3>
<p>Symbols are not enumerable in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> iterations. In addition, {{jsxref("Object.getOwnPropertyNames()")}} will not return symbol object properties, however, you can use {{jsxref("Object.getOwnPropertySymbols()")}} to get these.</p>
<pre class="brush: js">let obj = {}
obj[Symbol('a')] = 'a'
obj[Symbol.for('b')] = 'b'
obj['c'] = 'c'
obj.d = 'd'
for (let i in obj) {
console.log(i) // logs "c" and "d"
}</pre>
<h3 id="Symbols_and_JSON.stringify">Symbols and JSON.stringify()</h3>
<p>Symbol-keyed properties will be completely ignored when using <code>JSON.stringify()</code>:</p>
<pre class="brush: js">JSON.stringify({[Symbol('foo')]: 'foo'})
// '{}'
</pre>
<p>For more details, see {{jsxref("JSON.stringify()")}}.</p>
<h3 id="Symbol_wrapper_objects_as_property_keys">Symbol wrapper objects as property keys</h3>
<p>When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol:</p>
<pre class="brush: js">let sym = Symbol('foo')
let obj = {[sym]: 1}
obj[sym] // 1
obj[Object(sym)] // still 1
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("javascript.builtins.Symbol")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li>
<li>{{jsxref("Operators/typeof", "typeof")}}</li>
<li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
<li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li>
</ul>
|
