-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathobjects.html
More file actions
598 lines (459 loc) · 141 KB
/
objects.html
File metadata and controls
598 lines (459 loc) · 141 KB
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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavsScript - Objects</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="description" content="Shallow cloning, Object.freeze, Object cloning, Object properties iteration, Object.assign, Object rest/spread (...), Object.defineProperty, Accesor properties (get and set), Dynamic / variable property names, Arrays are Objects, Object.seal, Retrieving properties from an object, Convert object's values to array, Object.keys, Read-Only property, Non enumerable property, Lock property description, Descriptors and Named Properties, Object.getOwnPropertyDescriptor, Properties with special characters or reserved words, Creating an Iterable object, Iterating over Object entries - Object.entries(), Object.values()">
<meta property="og:site_name" content="DevTut">
<meta property="og:title" content="JavsScript - Objects">
<meta property="og:description" content="Shallow cloning, Object.freeze, Object cloning, Object properties iteration, Object.assign, Object rest/spread (...), Object.defineProperty, Accesor properties (get and set), Dynamic / variable property names, Arrays are Objects, Object.seal, Retrieving properties from an object, Convert object's values to array, Object.keys, Read-Only property, Non enumerable property, Lock property description, Descriptors and Named Properties, Object.getOwnPropertyDescriptor, Properties with special characters or reserved words, Creating an Iterable object, Iterating over Object entries - Object.entries(), Object.values()">
<meta property="og:type" content="article">
<meta property="og:url" content="/javascript/objects.html">
<meta property="og:image" content="/logo.png">
<meta name="twitter:title" content="JavsScript - Objects">
<meta name="twitter:description" content="Shallow cloning, Object.freeze, Object cloning, Object properties iteration, Object.assign, Object rest/spread (...), Object.defineProperty, Accesor properties (get and set), Dynamic / variable property names, Arrays are Objects, Object.seal, Retrieving properties from an object, Convert object's values to array, Object.keys, Read-Only property, Non enumerable property, Lock property description, Descriptors and Named Properties, Object.getOwnPropertyDescriptor, Properties with special characters or reserved words, Creating an Iterable object, Iterating over Object entries - Object.entries(), Object.values()">
<meta name="twitter:url" content="/javascript/objects.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/logo.png">
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="google-site-verification" content="76_rKXgwMVIjd-axJC_1zPV9OS4mEjvtgjYOWVkAdnQ">
<link rel="preload" href="/assets/css/0.styles.60619e34.css" as="style"><link rel="preload" href="/assets/js/app.1779e102.js" as="script"><link rel="preload" href="/assets/js/3.2cfa8016.js" as="script"><link rel="preload" href="/assets/js/1769.5e831f48.js" as="script">
<link rel="stylesheet" href="/assets/css/0.styles.60619e34.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">DevTut</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/javascript/" aria-current="page" class="sidebar-link">Disclaimer</a></li><li><a href="/javascript/getting-started-with-javascript.html" class="sidebar-link">Getting started with JavaScript</a></li><li><a href="/javascript/javascript-variables.html" class="sidebar-link">JavaScript Variables</a></li><li><a href="/javascript/built-in-constants.html" class="sidebar-link">Built-in Constants</a></li><li><a href="/javascript/comments.html" class="sidebar-link">Comments</a></li><li><a href="/javascript/console.html" class="sidebar-link">Console</a></li><li><a href="/javascript/datatypes-in-javascript.html" class="sidebar-link">Datatypes in Javascript</a></li><li><a href="/javascript/strings.html" class="sidebar-link">Strings</a></li><li><a href="/javascript/date.html" class="sidebar-link">Date</a></li><li><a href="/javascript/date-comparison.html" class="sidebar-link">Date Comparison</a></li><li><a href="/javascript/comparison-operations.html" class="sidebar-link">Comparison Operations</a></li><li><a href="/javascript/conditions.html" class="sidebar-link">Conditions</a></li><li><a href="/javascript/arrays.html" class="sidebar-link">Arrays</a></li><li><a href="/javascript/objects.html" aria-current="page" class="active sidebar-link">Objects</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/javascript/objects.html#shallow-cloning" class="sidebar-link">Shallow cloning</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-freeze" class="sidebar-link">Object.freeze</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-cloning" class="sidebar-link">Object cloning</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-properties-iteration" class="sidebar-link">Object properties iteration</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-assign" class="sidebar-link">Object.assign</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-rest-spread" class="sidebar-link">Object rest/spread (...)</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-defineproperty" class="sidebar-link">Object.defineProperty</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#accesor-properties-get-and-set" class="sidebar-link">Accesor properties (get and set)</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#dynamic-variable-property-names" class="sidebar-link">Dynamic / variable property names</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#arrays-are-objects" class="sidebar-link">Arrays are Objects</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-seal" class="sidebar-link">Object.seal</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#retrieving-properties-from-an-object" class="sidebar-link">Retrieving properties from an object</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#convert-object-s-values-to-array" class="sidebar-link">Convert object's values to array</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-keys" class="sidebar-link">Object.keys</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#read-only-property" class="sidebar-link">Read-Only property</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#non-enumerable-property" class="sidebar-link">Non enumerable property</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#lock-property-description" class="sidebar-link">Lock property description</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#descriptors-and-named-properties" class="sidebar-link">Descriptors and Named Properties</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-getownpropertydescriptor" class="sidebar-link">Object.getOwnPropertyDescriptor</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#properties-with-special-characters-or-reserved-words" class="sidebar-link">Properties with special characters or reserved words</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#creating-an-iterable-object" class="sidebar-link">Creating an Iterable object</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#iterating-over-object-entries-object-entries" class="sidebar-link">Iterating over Object entries - Object.entries()</a></li><li class="sidebar-sub-header"><a href="/javascript/objects.html#object-values" class="sidebar-link">Object.values()</a></li></ul></li><li><a href="/javascript/arithmetic-math.html" class="sidebar-link">Arithmetic (Math)</a></li><li><a href="/javascript/bitwise-operators.html" class="sidebar-link">Bitwise operators</a></li><li><a href="/javascript/constructor-functions.html" class="sidebar-link">Constructor functions</a></li><li><a href="/javascript/declarations-and-assignments.html" class="sidebar-link">Declarations and Assignments</a></li><li><a href="/javascript/loops.html" class="sidebar-link">Loops</a></li><li><a href="/javascript/functions.html" class="sidebar-link">Functions</a></li><li><a href="/javascript/functional-javascript.html" class="sidebar-link">Functional JavaScript</a></li><li><a href="/javascript/prototypes-objects.html" class="sidebar-link">Prototypes, objects</a></li><li><a href="/javascript/classes.html" class="sidebar-link">Classes</a></li><li><a href="/javascript/namespacing.html" class="sidebar-link">Namespacing</a></li><li><a href="/javascript/context-this.html" class="sidebar-link">Context (this)</a></li><li><a href="/javascript/setters-and-getters.html" class="sidebar-link">Setters and Getters</a></li><li><a href="/javascript/events.html" class="sidebar-link">Events</a></li><li><a href="/javascript/inheritance.html" class="sidebar-link">Inheritance</a></li><li><a href="/javascript/method-chaining.html" class="sidebar-link">Method Chaining</a></li><li><a href="/javascript/callbacks.html" class="sidebar-link">Callbacks</a></li><li><a href="/javascript/intervals-and-timeouts.html" class="sidebar-link">Intervals and Timeouts</a></li><li><a href="/javascript/regular-expressions.html" class="sidebar-link">Regular expressions</a></li><li><a href="/javascript/cookies.html" class="sidebar-link">Cookies</a></li><li><a href="/javascript/web-storage.html" class="sidebar-link">Web Storage</a></li><li><a href="/javascript/data-attributes.html" class="sidebar-link">Data attributes</a></li><li><a href="/javascript/json.html" class="sidebar-link">JSON</a></li><li><a href="/javascript/ajax.html" class="sidebar-link">AJAX</a></li><li><a href="/javascript/enumerations.html" class="sidebar-link">Enumerations</a></li><li><a href="/javascript/map.html" class="sidebar-link">Map</a></li><li><a href="/javascript/timestamps.html" class="sidebar-link">Timestamps</a></li><li><a href="/javascript/unary-operators.html" class="sidebar-link">Unary Operators</a></li><li><a href="/javascript/generators.html" class="sidebar-link">Generators</a></li><li><a href="/javascript/promises.html" class="sidebar-link">Promises</a></li><li><a href="/javascript/set.html" class="sidebar-link">Set</a></li><li><a href="/javascript/modals-prompts.html" class="sidebar-link">Modals - Prompts</a></li><li><a href="/javascript/execcommand-and-contenteditable.html" class="sidebar-link">execCommand and contenteditable</a></li><li><a href="/javascript/history.html" class="sidebar-link">History</a></li><li><a href="/javascript/navigator-object.html" class="sidebar-link">Navigator Object</a></li><li><a href="/javascript/bom-browser-object-model.html" class="sidebar-link">BOM (Browser Object Model)</a></li><li><a href="/javascript/the-event-loop.html" class="sidebar-link">The Event Loop</a></li><li><a href="/javascript/strict-mode.html" class="sidebar-link">Strict mode</a></li><li><a href="/javascript/custom-elements.html" class="sidebar-link">Custom Elements</a></li><li><a href="/javascript/data-manipulation.html" class="sidebar-link">Data Manipulation</a></li><li><a href="/javascript/binary-data.html" class="sidebar-link">Binary Data</a></li><li><a href="/javascript/template-literals.html" class="sidebar-link">Template Literals</a></li><li><a href="/javascript/fetch.html" class="sidebar-link">Fetch</a></li><li><a href="/javascript/scope.html" class="sidebar-link">Scope</a></li><li><a href="/javascript/modules.html" class="sidebar-link">Modules</a></li><li><a href="/javascript/screen.html" class="sidebar-link">Screen</a></li><li><a href="/javascript/variable-coercion-conversion.html" class="sidebar-link">Variable coercion/conversion</a></li><li><a href="/javascript/destructuring-assignment.html" class="sidebar-link">Destructuring assignment</a></li><li><a href="/javascript/websockets.html" class="sidebar-link">WebSockets</a></li><li><a href="/javascript/arrow-functions.html" class="sidebar-link">Arrow Functions</a></li><li><a href="/javascript/workers.html" class="sidebar-link">Workers</a></li><li><a href="/javascript/requestanimationframe.html" class="sidebar-link">requestAnimationFrame</a></li><li><a href="/javascript/creational-design-patterns.html" class="sidebar-link">Creational Design Patterns</a></li><li><a href="/javascript/detecting-browser.html" class="sidebar-link">Detecting browser</a></li><li><a href="/javascript/symbols.html" class="sidebar-link">Symbols</a></li><li><a href="/javascript/transpiling.html" class="sidebar-link">Transpiling</a></li><li><a href="/javascript/automatic-semicolon-insertion-asi.html" class="sidebar-link">Automatic Semicolon Insertion - ASI</a></li><li><a href="/javascript/localization.html" class="sidebar-link">Localization</a></li><li><a href="/javascript/geolocation.html" class="sidebar-link">Geolocation</a></li><li><a href="/javascript/indexeddb.html" class="sidebar-link">IndexedDB</a></li><li><a href="/javascript/modularization-techniques.html" class="sidebar-link">Modularization Techniques</a></li><li><a href="/javascript/proxy.html" class="sidebar-link">Proxy</a></li><li><a href="/javascript/postmessage-and-messageevent.html" class="sidebar-link">.postMessage() and MessageEvent</a></li><li><a href="/javascript/weakmap.html" class="sidebar-link">WeakMap</a></li><li><a href="/javascript/weakset.html" class="sidebar-link">WeakSet</a></li><li><a href="/javascript/escape-sequences.html" class="sidebar-link">Escape Sequences</a></li><li><a href="/javascript/behavioral-design-patterns.html" class="sidebar-link">Behavioral Design Patterns</a></li><li><a href="/javascript/server-sent-events.html" class="sidebar-link">Server-sent events</a></li><li><a href="/javascript/async-functions-async-await.html" class="sidebar-link">Async functions (async/await)</a></li><li><a href="/javascript/async-iterators.html" class="sidebar-link">Async Iterators</a></li><li><a href="/javascript/how-to-make-iterator-usable-inside-async-callback-function.html" class="sidebar-link">How to make iterator usable inside async callback function</a></li><li><a href="/javascript/tail-call-optimization.html" class="sidebar-link">Tail Call Optimization</a></li><li><a href="/javascript/bitwise-operators-real-world-examples-snippets.html" class="sidebar-link">Bitwise Operators - Real World Examples (snippets)</a></li><li><a href="/javascript/tilde.html" class="sidebar-link">Tilde ~</a></li><li><a href="/javascript/using-javascript-to-get-set-css-custom-variables.html" class="sidebar-link">Using javascript to get/set CSS custom variables</a></li><li><a href="/javascript/selection-api.html" class="sidebar-link">Selection API</a></li><li><a href="/javascript/file-api-blobs-and-filereaders.html" class="sidebar-link">File API, Blobs and FileReaders</a></li><li><a href="/javascript/notifications-api.html" class="sidebar-link">Notifications API</a></li><li><a href="/javascript/vibration-api.html" class="sidebar-link">Vibration API</a></li><li><a href="/javascript/battery-status-api.html" class="sidebar-link">Battery Status API</a></li><li><a href="/javascript/fluent-api.html" class="sidebar-link">Fluent API</a></li><li><a href="/javascript/web-cryptography-api.html" class="sidebar-link">Web Cryptography API</a></li><li><a href="/javascript/security-issues.html" class="sidebar-link">Security issues</a></li><li><a href="/javascript/same-origin-policy-cross-origin-communication.html" class="sidebar-link">Same Origin Policy & Cross-Origin Communication</a></li><li><a href="/javascript/error-handling.html" class="sidebar-link">Error Handling</a></li><li><a href="/javascript/global-error-handling-in-browsers.html" class="sidebar-link">Global error handling in browsers</a></li><li><a href="/javascript/debugging.html" class="sidebar-link">Debugging</a></li><li><a href="/javascript/unit-testing-javascript.html" class="sidebar-link">Unit Testing Javascript</a></li><li><a href="/javascript/evaluating-javascript.html" class="sidebar-link">Evaluating JavaScript</a></li><li><a href="/javascript/linters-ensuring-code-quality.html" class="sidebar-link">Linters - Ensuring code quality</a></li><li><a href="/javascript/anti-patterns.html" class="sidebar-link">Anti-patterns</a></li><li><a href="/javascript/performance-tips.html" class="sidebar-link">Performance Tips</a></li><li><a href="/javascript/memory-efficiency.html" class="sidebar-link">Memory efficiency</a></li><li><a href="/javascript/reserved-keywords.html" class="sidebar-link">Reserved Keywords</a></li><li><a href="/javascript/contributors.html" class="sidebar-link">The Contributors</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="objects"><a href="#objects" class="header-anchor">#</a> Objects</h1> <h2 id="shallow-cloning"><a href="#shallow-cloning" class="header-anchor">#</a> Shallow cloning</h2> <p>ES6's <code>Object.assign()</code> function can be used to copy all of the <strong>enumerable</strong> properties from an existing <code>Object</code> instance to a new one.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> existing <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> clone <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> existing<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>This includes <code>Symbol</code> properties in addition to <code>String</code> ones.</p> <p><a href="https://github.com/tc39/proposal-object-rest-spread" target="_blank" rel="noopener noreferrer">Object rest/spread destructuring<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> which is currently a stage 3 proposal provides an even simpler way to create shallow clones of Object instances:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> existing <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token operator">...</span>clone <span class="token punctuation">}</span> <span class="token operator">=</span> existing<span class="token punctuation">;</span>
</code></pre></div><p>If you need to support older versions of JavaScript, the most-compatible way to clone an Object is by manually iterating over its properties and filtering out inherited ones using <code>.hasOwnProperty()</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> existing <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> clone <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> prop <span class="token keyword">in</span> existing<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>existing<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
clone<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">=</span> existing<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="object-freeze"><a href="#object-freeze" class="header-anchor">#</a> Object.freeze</h2> <p><code>Object.freeze</code> makes an object immutable by preventing the addition of new properties, the removal of existing properties, and the modification of the enumerability, configurability, and writability of existing properties. It also prevents the value of existing properties from being changed. However, it does not work recursively which means that child objects are not automatically frozen and are subject to change.</p> <p>The operations following the freeze will fail silently unless the code is running in strict mode. If the code is in strict mode, a <code>TypeError</code> will be thrown.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
foo<span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
bar<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
baz<span class="token operator">:</span> <span class="token punctuation">{</span>
foo<span class="token operator">:</span> <span class="token string">'nested-foo'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">freeze</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Cannot add new properties</span>
obj<span class="token punctuation">.</span>newProperty <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token comment">// Cannot modify existing values or their descriptors</span>
obj<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">'not foo'</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
writable<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Cannot delete existing properties</span>
<span class="token keyword">delete</span> obj<span class="token punctuation">.</span>foo<span class="token punctuation">;</span>
<span class="token comment">// Nested objects are not frozen</span>
obj<span class="token punctuation">.</span>bar<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>baz<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">'new foo'</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="object-cloning"><a href="#object-cloning" class="header-anchor">#</a> Object cloning</h2> <p>When you want a complete copy of an object (i.e. the object properties and the values inside those properties, etc...), that is called <strong>deep cloning</strong>.</p> <p>If an object can be serialized to JSON, then you can create a deep clone of it with a combination of <code>JSON.parse</code> and <code>JSON.stringify</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> existing <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> copy <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>existing<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
existing<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token comment">// copy.b.c will not change</span>
</code></pre></div><p>Note that <code>JSON.stringify</code> will convert <code>Date</code> objects to ISO-format string representations, but <code>JSON.parse</code> will not convert the string back into a <code>Date</code>.</p> <p>There is no built-in function in JavaScript for creating deep clones, and it is not possible in general to create deep clones for every object for many reasons. For example,</p> <ul><li>objects can have non-enumerable and hidden properties which cannot be detected.</li> <li>object getters and setters cannot be copied.</li> <li>objects can have a cyclic structure.</li> <li>function properties can depend on state in a hidden scope.</li></ul> <p>Assuming that you have a "nice" object whose properties only contain primitive values, dates, arrays, or other "nice" objects, then the following function can be used for making deep clones. It is a recursive function that can detect objects with a cyclic structure and will throw an error in such cases.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">deepClone</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">function</span> <span class="token function">clone</span><span class="token punctuation">(</span><span class="token parameter">obj<span class="token punctuation">,</span> traversedObjects</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> copy<span class="token punctuation">;</span>
<span class="token comment">// primitive types</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>obj <span class="token operator">===</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token keyword">typeof</span> obj <span class="token operator">!==</span> <span class="token string">"object"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> obj<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// detect cycles</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> traversedObjects<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>traversedObjects<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">===</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">"Cannot clone circular object."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// dates</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>obj <span class="token keyword">instanceof</span> <span class="token class-name">Date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
copy <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
copy<span class="token punctuation">.</span><span class="token function">setTime</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> copy<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// arrays</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>obj <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
copy <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> obj<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
copy<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">clone</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> traversedObjects<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> copy<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// simple objects</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>obj <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
copy <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> key <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
copy<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">clone</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> traversedObjects<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> copy<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">"Not a cloneable object."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token function">clone</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="object-properties-iteration"><a href="#object-properties-iteration" class="header-anchor">#</a> Object properties iteration</h2> <p>You can access each property that belongs to an object with this loop</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> property <span class="token keyword">in</span> object<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// always check if an object has a property</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>object<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>property<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// do stuff</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You should include the additional check for <code>hasOwnProperty</code> because an object may have properties that are inherited from the object's base class. Not performing this check can raise errors.</p> <p>You can also use <code>Object.keys</code> function which return an Array containing all properties of an object and then you can loop through this array with <code>Array.map</code> or <code>Array.forEach</code> function.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token operator">:</span> <span class="token string">'c'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// outputs: 0, 1, 2</span>
</code></pre></div><h2 id="object-assign"><a href="#object-assign" class="header-anchor">#</a> Object.assign</h2> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" target="_blank" rel="noopener noreferrer">Object.assign()<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.</p> <p>Use it to assign values to an existing object:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>
firstName<span class="token operator">:</span> <span class="token string">"John"</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> <span class="token punctuation">{</span>lastName<span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span> age<span class="token operator">:</span><span class="token number">39</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Logs: {firstName: "John", lastName: "Doe", age: 39} </span>
</code></pre></div><p>Or to create a shallow copy of an object:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> user<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Logs: {firstName: "John", lastName: "Doe", age: 39} </span>
</code></pre></div><p>Or merge many properties from multiple objects to one:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span>
a<span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span>
b<span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj3 <span class="token operator">=</span> <span class="token punctuation">{</span>
c<span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj1<span class="token punctuation">,</span> obj2<span class="token punctuation">,</span> obj3<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Logs: { a: 1, b: 2, c: 3 }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Logs: { a: 1, b: 2, c: 3 }, target object itself is changed</span>
</code></pre></div><p>Primitives will be wrapped, null and undefined will be ignored:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> var_1 <span class="token operator">=</span> <span class="token string">'abc'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> var_2 <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> var_3 <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> var_4 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> var_1<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> var_2<span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span> var_3<span class="token punctuation">,</span> var_4<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Logs: { "0": "a", "1": "b", "2": "c" }</span>
</code></pre></div><blockquote></blockquote> <p>Note, only string wrappers can have own enumerable properties</p> <p>Use it as reducer: (merges an array to an object)</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">return</span> users<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result<span class="token punctuation">,</span> user</span><span class="token punctuation">)</span> <span class="token operator">=></span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">[</span>user<span class="token punctuation">.</span>id<span class="token punctuation">]</span><span class="token operator">:</span> user<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="object-rest-spread"><a href="#object-rest-spread" class="header-anchor">#</a> Object rest/spread (...)</h2> <p>Object spreading is just syntactic sugar for <code>Object.assign({}, obj1, ..., objn);</code></p> <p>It is done with the <code>...</code> operator:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>obj<span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: 1, b: 2, c: 3 };</span>
</code></pre></div><p>As <code>Object.assign</code> it does <strong>shallow</strong> merging, not deep merging.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj3 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>obj<span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: 1, b: { c: 2 } };</span>
</code></pre></div><p><strong>NOTE</strong>: <a href="https://github.com/sebmarkbage/ecmascript-rest-spread" target="_blank" rel="noopener noreferrer">This specification<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> is currently in <a href="http://www.2ality.com/2015/11/tc39-process.html" target="_blank" rel="noopener noreferrer">stage 3<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="object-defineproperty"><a href="#object-defineproperty" class="header-anchor">#</a> Object.defineProperty</h2> <p>It allows us to define a property in an existing object using a property descriptor.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'foo'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Console output</p> <blockquote></blockquote> <p>foo</p> <p><code>Object.defineProperty</code> can be called with the following options:</p> <div class="language-js extra-class"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'nameOfTheProperty'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> valueOfTheProperty<span class="token punctuation">,</span>
writable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// if false, the property is read-only</span>
configurable <span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// true means the property can be changed later</span>
enumerable <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// true means property can be enumerated such as in a for..in loop</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><code>Object.defineProperties</code> allows you to define multiple properties at a time.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token punctuation">{</span>
property1<span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
writable<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
property2<span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token string">'Hello'</span><span class="token punctuation">,</span>
writable<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="accesor-properties-get-and-set"><a href="#accesor-properties-get-and-set" class="header-anchor">#</a> Accesor properties (get and set)</h2> <p>Treat a property as a combination of two functions, one to get the value from it, and another one to set the value in it.</p> <p>The <code>get</code> property of the property descriptor is a function that will be called to retrieve the value from the property.</p> <p>The <code>set</code> property is also a function, it will be called when the property has been assigned a value, and the new value will be passed as an argument.</p> <p>You cannot assign a <code>value</code> or <code>writable</code> to a descriptor that has <code>get</code> or <code>set</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> surname<span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'fullName'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>surname<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>surname<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">" "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span>fullName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> "John Doe"</span>
person<span class="token punctuation">.</span>surname <span class="token operator">=</span> <span class="token string">"Hill"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span>fullName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> "John Hill"</span>
person<span class="token punctuation">.</span>fullName <span class="token operator">=</span> <span class="token string">"Mary Jones"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token comment">// -> "Mary"</span>
</code></pre></div><h2 id="dynamic-variable-property-names"><a href="#dynamic-variable-property-names" class="header-anchor">#</a> Dynamic / variable property names</h2> <p>Sometimes the property name needs to be stored into a variable. In this example, we ask the user what word needs to be looked up, and then provide the result from an object I've named <code>dictionary</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> dictionary <span class="token operator">=</span> <span class="token punctuation">{</span>
lettuce<span class="token operator">:</span> <span class="token string">'a veggie'</span><span class="token punctuation">,</span>
banana<span class="token operator">:</span> <span class="token string">'a fruit'</span><span class="token punctuation">,</span>
tomato<span class="token operator">:</span> <span class="token string">'it depends on who you ask'</span><span class="token punctuation">,</span>
apple<span class="token operator">:</span> <span class="token string">'a fruit'</span><span class="token punctuation">,</span>
Apple<span class="token operator">:</span> <span class="token string">'Steve Jobs rocks!'</span> <span class="token comment">// properties are case-sensitive</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> word <span class="token operator">=</span> <span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">'What word would you like to look up today?'</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> definition <span class="token operator">=</span> dictionary<span class="token punctuation">[</span>word<span class="token punctuation">]</span>
<span class="token function">alert</span><span class="token punctuation">(</span>word <span class="token operator">+</span> <span class="token string">'\n\n'</span> <span class="token operator">+</span> definition<span class="token punctuation">)</span>
</code></pre></div><p>Note how we are using <code>[]</code> bracket notation to look at the variable named <code>word</code>; if we were to use the traditional <code>.</code> notation, then it would take the value literally, hence:</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dictionary<span class="token punctuation">.</span>word<span class="token punctuation">)</span> <span class="token comment">// doesn't work because word is taken literally and dictionary has no field named `word`</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dictionary<span class="token punctuation">.</span>apple<span class="token punctuation">)</span> <span class="token comment">// it works! because apple is taken literally</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dictionary<span class="token punctuation">[</span>word<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// it works! because word is a variable, and the user perfectly typed in one of the words from our dictionary when prompted</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dictionary<span class="token punctuation">[</span>apple<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// error! apple is not defined (as a variable)</span>
</code></pre></div><p>You could also write literal values with <code>[]</code> notation by replacing the variable <code>word</code> with a string <code>'apple'</code>. See [Properties with special characters or reserved words] example.</p> <p>You can also set dynamic properties with the bracket syntax:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> property<span class="token operator">=</span><span class="token string">"test"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
<span class="token punctuation">[</span>property<span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>test<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//1</span>
</code></pre></div><p>It does the same as:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> property<span class="token operator">=</span><span class="token string">"test"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">[</span>property<span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="arrays-are-objects"><a href="#arrays-are-objects" class="header-anchor">#</a> Arrays are Objects</h2> <blockquote></blockquote> <p><strong>Disclaimer:</strong> Creating array-like objects is not recommend. However, it is helpful to understand how they work, especially when working with DOM. This will explain why regular array operations don't work on DOM objects returned from many DOM <code>document</code> functions. (i.e. <code>querySelectorAll</code>, <code>form.elements</code>)</p> <p>Supposing we created the following object which has some properties you would expect to see in an Array.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> anObject <span class="token operator">=</span> <span class="token punctuation">{</span>
foo<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
length<span class="token operator">:</span> <span class="token string">'interesting'</span><span class="token punctuation">,</span>
<span class="token string">'0'</span><span class="token operator">:</span> <span class="token string">'zero!'</span><span class="token punctuation">,</span>
<span class="token string">'1'</span><span class="token operator">:</span> <span class="token string">'one!'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>Then we'll create an array.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> anArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'zero.'</span><span class="token punctuation">,</span> <span class="token string">'one.'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><p>Now, notice how we can inspect both the object, and the array in the same way.</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anArray<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> anObject<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs: zero. zero!</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anArray<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> anObject<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs: one. one!</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anArray<span class="token punctuation">.</span>length<span class="token punctuation">,</span> anObject<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs: 2 interesting</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anArray<span class="token punctuation">.</span>foo<span class="token punctuation">,</span> anObject<span class="token punctuation">.</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs: undefined bar</span>
</code></pre></div><p>Since <code>anArray</code> is actually an object, just like <code>anObject</code>, we can even add custom wordy properties to <code>anArray</code></p> <blockquote></blockquote> <p><strong>Disclaimer:</strong> Arrays with custom properties are not usually recommended as they can be confusing, but it can be useful in advanced cases where you need the optimized functions of an Array. (i.e. jQuery objects)</p> <div class="language-js extra-class"><pre class="language-js"><code>anArray<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">'it works!'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anArray<span class="token punctuation">.</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>We can even make <code>anObject</code> to be an array-like object by adding a <code>length</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code>anObject<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
</code></pre></div><p>Then you can use the C-style <code>for</code> loop to iterate over <code>anObject</code> just as if it were an Array. See <a href="http://stackoverflow.com/documentation/javascript/187/arrays/852/iteration" target="_blank" rel="noopener noreferrer">Array Iteration<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Note that <code>anObject</code> is only an <strong>array-like</strong> object. (also known as a List) It is not a true Array. This is important, because functions like <code>push</code> and <code>forEach</code> (or any convenience function found in <code>Array.prototype</code>) will not work by default on array-like objects.</p> <p>Many of the DOM <code>document</code> functions will return a List (i.e. <code>querySelectorAll</code>, <code>form.elements</code>) which is similar to the array-like <code>anObject</code> we created above. See <a href="http://stackoverflow.com/documentation/javascript/187/arrays/2333/converting-array-like-objects-to-arrays" target="_blank" rel="noopener noreferrer">Converting Array-like Objects to Arrays<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> anArray <span class="token operator">==</span> <span class="token string">'object'</span><span class="token punctuation">,</span> <span class="token keyword">typeof</span> anObject <span class="token operator">==</span> <span class="token string">'object'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs: true true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anArray <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">,</span> anObject <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs: true true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anArray <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">,</span> anObject <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs: true false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>anArray<span class="token punctuation">)</span><span class="token punctuation">,</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>anObject<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// outputs: true false</span>
</code></pre></div><h2 id="object-seal"><a href="#object-seal" class="header-anchor">#</a> Object.seal</h2> <p><code>Object.seal</code> prevents the addition or removal of properties from an object. Once an object has been sealed its property descriptors can't be converted to another type. Unlike <a href="http://stackoverflow.com/documentation/javascript/188/objects/2356/object-freeze" target="_blank" rel="noopener noreferrer"><code>Object.freeze</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> it does allow properties to be edited.</p> <p>Attempts to do this operations on a sealed object will fail silently</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> foo<span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token function-variable function">bar</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'bar'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">seal</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
obj<span class="token punctuation">.</span>newFoo <span class="token operator">=</span> <span class="token string">'newFoo'</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function-variable function">bar</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'foo'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>newFoo<span class="token punctuation">;</span> <span class="token comment">// undefined</span>
obj<span class="token punctuation">.</span><span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'foo'</span>
<span class="token comment">// Can't make foo an accessor property</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'newFoo'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// TypeError</span>
<span class="token comment">// But you can make it read only</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
writable<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// TypeError</span>
obj<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">'newFoo'</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>foo<span class="token punctuation">;</span> <span class="token comment">// 'foo';</span>
</code></pre></div><p>In strict mode these operations will throw a <code>TypeError</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token string">'use strict'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> foo<span class="token operator">:</span> <span class="token string">'foo'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">seal</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>newFoo <span class="token operator">=</span> <span class="token string">'newFoo'</span><span class="token punctuation">;</span> <span class="token comment">// TypeError</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="retrieving-properties-from-an-object"><a href="#retrieving-properties-from-an-object" class="header-anchor">#</a> Retrieving properties from an object</h2> <h3 id="characteristics-of-properties"><a href="#characteristics-of-properties" class="header-anchor">#</a> <strong>Characteristics of properties :</strong></h3> <p>Properties that can be retrieved from an <strong>object</strong> could have the following characteristics,</p> <ul><li>Enumerable</li> <li>Non - Enumerable</li> <li>own</li></ul> <p>While creating the properties using <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noopener noreferrer"><strong>Object.defineProperty(ies)</strong><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, we could set its characteristics except <strong>"own"</strong>. Properties which are available in the direct level not in the <strong>prototype</strong> level (<code>__proto__</code>) of an object are called as <strong>own</strong> properties.</p> <p>And the properties that are added into an object without using <code>Object.defindProperty(ies)</code> will don't have its enumerable characteristic. That means it be considered as true.</p> <h3 id="purpose-of-enumerability"><a href="#purpose-of-enumerability" class="header-anchor">#</a> <strong>Purpose of enumerability :</strong></h3> <p>The main purpose of setting enumerable characteristics to a property is to make the particular property's availability when retrieving it from its object, by using different programmatical methods. Those different methods will be discussed deeply below.</p> <h3 id="methods-of-retrieving-properties"><a href="#methods-of-retrieving-properties" class="header-anchor">#</a> <strong>Methods of retrieving properties :</strong></h3> <p>Properties from an object could be retrieved by the following methods,</p> <li>
[`for..in`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...in) loop
This loop is very useful in retrieving enumerable properties from an object. Additionally this loop will retrieve enumerable own properties as well as it will do the same retrieval by traversing through the prototype chain until it sees the prototype as null.
<div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//Ex 1 : Simple data</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">,</span> b <span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span> <span class="token punctuation">,</span> props <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span>prop <span class="token keyword">in</span> x<span class="token punctuation">)</span><span class="token punctuation">{</span>
props<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//["a","b"]</span>
<span class="token comment">//Ex 2 : Data with enumerable properties in prototype chain</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">,</span> __proto__ <span class="token operator">:</span> <span class="token punctuation">{</span> b <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">,</span> props <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span>prop <span class="token keyword">in</span> x<span class="token punctuation">)</span><span class="token punctuation">{</span>
props<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//["a","b"]</span>
<span class="token comment">//Ex 3 : Data with non enumerable properties</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> props <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> <span class="token string">"b"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>value <span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> enumerable <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span>prop <span class="token keyword">in</span> x<span class="token punctuation">)</span><span class="token punctuation">{</span>
props<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//["a"]</span>
</code></pre></div></li> <li>
[`Object.keys()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) function
This function was unveiled as a part of EcmaScript 5. It is used to retrieve enumerable own properties from an object. Prior to its release people used to retrieve own properties from an object by combining [`for..in`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...in) loop and [`Object.prototype.hasOwnProperty()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) function.
<div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//Ex 1 : Simple data</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">,</span> b <span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span> <span class="token punctuation">,</span> props<span class="token punctuation">;</span>
props <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//["a","b"]</span>
<span class="token comment">//Ex 2 : Data with enumerable properties in prototype chain</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">,</span> __proto__ <span class="token operator">:</span> <span class="token punctuation">{</span> b <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">,</span> props<span class="token punctuation">;</span>
props <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//["a"]</span>
<span class="token comment">//Ex 3 : Data with non enumerable properties</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> props<span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> <span class="token string">"b"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>value <span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> enumerable <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
props <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//["a"]</span>
</code></pre></div></li> <li>
[`Object.getOwnProperties()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames) function
This function will retrieve both enumerable and non enumerable, own properties from an object. It was also released as a part of EcmaScript 5.
<div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//Ex 1 : Simple data</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">,</span> b <span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span> <span class="token punctuation">,</span> props<span class="token punctuation">;</span>
props <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyNames</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//["a","b"]</span>
<span class="token comment">//Ex 2 : Data with enumerable properties in prototype chain</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">,</span> __proto__ <span class="token operator">:</span> <span class="token punctuation">{</span> b <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">,</span> props<span class="token punctuation">;</span>
props <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyNames</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//["a"]</span>
<span class="token comment">//Ex 3 : Data with non enumerable properties</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> props<span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> <span class="token string">"b"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>value <span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> enumerable <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
props <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyNames</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//["a", "b"]</span>
</code></pre></div></li> <h3 id="miscellaneous"><a href="#miscellaneous" class="header-anchor">#</a> <strong>Miscellaneous :</strong></h3> <p>A technique for retrieving all (own, enumerable, non enumerable, all prototype level) properties from an object is given below,</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">getAllProperties</span><span class="token punctuation">(</span><span class="token parameter">obj<span class="token punctuation">,</span> props <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> obj <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> props <span class="token operator">:</span>
<span class="token function">getAllProperties</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getPrototypeOf</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">,</span>
props<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyNames</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span><span class="token number">10</span><span class="token punctuation">,</span> __proto__ <span class="token operator">:</span> <span class="token punctuation">{</span> b <span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> c <span class="token operator">:</span> <span class="token number">15</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">//adding a non enumerable property to first level prototype</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>x<span class="token punctuation">.</span>__proto__<span class="token punctuation">,</span> <span class="token string">"d"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>value <span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> enumerable <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getAllProperties</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token string">"b"</span><span class="token punctuation">,</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"d"</span><span class="token punctuation">,</span> <span class="token string">"...other default core props..."</span><span class="token punctuation">]</span>
</code></pre></div><p>And this will be supported by the browsers which supports EcmaScript 5.</p> <h2 id="convert-object-s-values-to-array"><a href="#convert-object-s-values-to-array" class="header-anchor">#</a> Convert object's values to array</h2> <p>Given this object:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
a<span class="token operator">:</span> <span class="token string">"hello"</span><span class="token punctuation">,</span>
b<span class="token operator">:</span> <span class="token string">"this is"</span><span class="token punctuation">,</span>
c<span class="token operator">:</span> <span class="token string">"javascript!"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>You can convert its values to an array by doing:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> array <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["hello", "this is", "javascript!"]</span>
</code></pre></div><h2 id="object-keys"><a href="#object-keys" class="header-anchor">#</a> Object.keys</h2> <p><code>Object.keys(obj)</code> returns an array of a given object's keys.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
a<span class="token operator">:</span> <span class="token string">"hello"</span><span class="token punctuation">,</span>
b<span class="token operator">:</span> <span class="token string">"this is"</span><span class="token punctuation">,</span>
c<span class="token operator">:</span> <span class="token string">"javascript!"</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> keys <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>keys<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["a", "b", "c"]</span>
</code></pre></div><h2 id="read-only-property"><a href="#read-only-property" class="header-anchor">#</a> Read-Only property</h2> <p>Using property descriptors we can make a property read only, and any attempt to change it's value will fail silently, the value will not be changed and no error will be thrown.</p> <p>The <code>writable</code> property in a property descriptor indicates whether that property can be changed or not.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'original'</span><span class="token punctuation">,</span> writable<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">'new'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Console output</p> <blockquote></blockquote> <p>original</p> <h2 id="non-enumerable-property"><a href="#non-enumerable-property" class="header-anchor">#</a> Non enumerable property</h2> <p>We can avoid a property from showing up in <code>for (... in ...)</code> loops</p> <p>The <code>enumerable</code> property of the property descriptor tells whether that property will be enumerated while looping through the object's properties.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">"foo"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'show'</span><span class="token punctuation">,</span> enumerable<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">"bar"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'hide'</span><span class="token punctuation">,</span> enumerable<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> prop <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Console output</p> <blockquote></blockquote> <p>show</p> <h2 id="lock-property-description"><a href="#lock-property-description" class="header-anchor">#</a> Lock property description</h2> <p>A property's descriptor can be locked so no changes can be made to it. It will still be possible to use the property normally, assigning and retrieving the value from it, but any attempt to redefine it will throw an exception.</p> <p>The <code>configurable</code> property of the property descriptor is used to disallow any further changes on the descriptor.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// Define 'foo' as read only and lock it</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">"foo"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token string">"original value"</span><span class="token punctuation">,</span>
writable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
configurable<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">"foo"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>writable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>This error will be thrown:</p> <blockquote></blockquote> <p>TypeError: Cannot redefine property: foo</p> <p>And the property will still be read only.</p> <div class="language-js extra-class"><pre class="language-js"><code>obj<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">"new value"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Console output</p> <blockquote></blockquote> <p>original value</p> <h2 id="descriptors-and-named-properties"><a href="#descriptors-and-named-properties" class="header-anchor">#</a> Descriptors and Named Properties</h2> <p>Properties are members of an object. Each named property is a pair of (name, descriptor). The name is a string that allows access (using the dot notation <code>object.propertyName</code> or the square brackets notation <code>object['propertyName']</code>). The descriptor is a record of fields defining the bevahiour of the property when it is accessed (what happens to the property and what is the value returned from accessing it). By and large, a property associates a name to a behaviour (we can think of the behaviour as a black box).</p> <p>There are two types of named properties:</p> <ol><li><em>data property</em>: the property's name is associated with a value.</li> <li><em>accessor property</em>: the property's name is associated with one or two accessor functions.</li></ol> <p>Demonstration:</p> <div class="language-js extra-class"><pre class="language-js"><code>obj<span class="token punctuation">.</span>propertyName1 <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token comment">//translates behind the scenes into</span>
<span class="token comment">//either assigning 5 to the value field* if it is a data property</span>
<span class="token comment">//or calling the set function with the parameter 5 if accessor property</span>
<span class="token comment">//*actually whether an assignment would take place in the case of a data property</span>
<span class="token comment">//also depends on the presence and value of the writable field - on that later on</span>
</code></pre></div><p>The property's type is determined by its descriptor's fields, and a property cannot be of both types.</p> <p><strong>Data descriptors</strong> -</p> <ul><li>Required fields: <code>value</code> or <code>writable</code> or both</li> <li>Optional fields:<code>configurable</code>,<code>enumerable</code></li></ul> <p>Sample:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
writable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>Accessor descriptors</strong> -</p> <ul><li>Required fields: <code>get</code> or <code>set</code> or both</li> <li>Optional fields: <code>configurable</code>, <code>enumerable</code></li></ul> <p>Sample:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
<span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
enumerable<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre></div><h3>meaning of fields and their defaults</h3>
`configurable`,`enumerable` and `writable`:
<ul><li>These keys all default to <code>false</code>.</li> <li><code>configurable</code> is <code>true</code> if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.</li> <li><code>enumerable</code> is <code>true</code> if and only if this property shows up during enumeration of the properties on the corresponding object.</li> <li><code>writable</code> is <code>true</code> if and only if the value associated with the property may be changed with an assignment operator.</li></ul> <p><code>get</code> and <code>set</code>:</p> <ul><li>These keys default to <code>undefined</code>.</li> <li><code>get</code> is a function which serves as a getter for the property, or <code>undefined</code> if there is no getter. The function return will be used as the value of the property.</li> <li><code>set</code> is a function which serves as a setter for the property, or <code>undefined</code> if there is no setter. The function will receive as only argument the new value being assigned to the property.</li></ul> <p><code>value</code>:</p> <ul><li>This key defaults to <code>undefined</code>.</li> <li>The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).</li></ul> <p>Example:</p> <div class="language- extra-class"><pre class="language-text"><code>
var obj = {propertyName1: 1}; //the pair is actually ('propertyName1', {value:1,
// writable:true,
// enumerable:true,
// configurable:true})
Object.defineProperty(obj, 'propertyName2', {get: function() {
console.log('this will be logged ' +
'every time propertyName2 is accessed to get its value');
},
set: function() {
console.log('and this will be logged ' +
'every time propertyName2\'s value is tried to be set')
//will be treated like it has enumerable:false, configurable:false
}});
//propertyName1 is the name of obj's data property
//and propertyName2 is the name of its accessor property
obj.propertyName1 = 3;
console.log(obj.propertyName1); //3
obj.propertyName2 = 3; //and this will be logged every time propertyName2's value is tried to be set
console.log(obj.propertyName2); //this will be logged every time propertyName2 is accessed to get its value
</code></pre></div><h2 id="object-getownpropertydescriptor"><a href="#object-getownpropertydescriptor" class="header-anchor">#</a> Object.getOwnPropertyDescriptor</h2> <p>Get the description of an specific property in an object.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> sampleObject <span class="token operator">=</span> <span class="token punctuation">{</span>
hello<span class="token operator">:</span> <span class="token string">'world'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyDescriptor</span><span class="token punctuation">(</span>sampleObject<span class="token punctuation">,</span> <span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Object {value: "world", writable: true, enumerable: true, configurable: true}</span>
</code></pre></div><h2 id="properties-with-special-characters-or-reserved-words"><a href="#properties-with-special-characters-or-reserved-words" class="header-anchor">#</a> Properties with special characters or reserved words</h2> <p>While object property notation is usually written as <code>myObject.property</code>, this will only allow characters that are normally found in <a href="http://stackoverflow.com/questions/1661197/what-characters-are-valid-for-javascript-variable-names" target="_blank" rel="noopener noreferrer">JavaScript variable names<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, which is mainly letters, numbers and underscore (<code>_</code>).</p> <p>If you need special characters, such as space, ☺, or user-provided content, this is possible using <code>[]</code> bracket notation.</p> <div class="language-js extra-class"><pre class="language-js"><code>myObject<span class="token punctuation">[</span><span class="token string">'special property ☺'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'it works!'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myObject<span class="token punctuation">[</span><span class="token string">'special property ☺'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="all-digit-properties"><a href="#all-digit-properties" class="header-anchor">#</a> All-digit properties:</h3> <p>In addition to special characters, property names that are all-digits will require bracket notation. However, in this case the property need not be written as a string.</p> <div class="language-js extra-class"><pre class="language-js"><code>myObject<span class="token punctuation">[</span><span class="token number">123</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'hi!'</span> <span class="token comment">// number 123 is automatically converted to a string</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myObject<span class="token punctuation">[</span><span class="token string">'123'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// notice how using string 123 produced the same result</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myObject<span class="token punctuation">[</span><span class="token string">'12'</span> <span class="token operator">+</span> <span class="token string">'3'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// string concatenation</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myObject<span class="token punctuation">[</span><span class="token number">120</span> <span class="token operator">+</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// arithmetic, still resulting in 123 and producing the same result</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myObject<span class="token punctuation">[</span><span class="token number">123.0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// this works too because 123.0 evaluates to 123</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myObject<span class="token punctuation">[</span><span class="token string">'123.0'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// this does NOT work, because '123' != '123.0'</span>
</code></pre></div><p>However, leading zeros are not recommended as that is interpreted as Octal notation. (TODO, we should produce and link to an example describing octal, hexadecimal and exponent notation)</p> <p>See also: [Arrays are Objects] example.</p> <h2 id="creating-an-iterable-object"><a href="#creating-an-iterable-object" class="header-anchor">#</a> Creating an Iterable object</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> myIterableObject <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// An Iterable object must define a method located at the Symbol.iterator key:</span>
myIterableObject<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// The iterator should return an Iterator object</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token comment">// The Iterator object must implement a method, next()</span>
<span class="token function-variable function">next</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// next must itself return an IteratorResult object </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>iterated<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>iterated <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token comment">// The IteratorResult object has two properties</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token comment">// whether the iteration is complete, and</span>
done<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token comment">// the value of the current iteration</span>
value<span class="token operator">:</span> <span class="token string">'One'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token comment">// When iteration is complete, just the done property is needed</span>
done<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
iterated<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> c <span class="token keyword">of</span> myIterableObject<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Console output</p> <blockquote></blockquote> <p>One</p> <h2 id="iterating-over-object-entries-object-entries"><a href="#iterating-over-object-entries-object-entries" class="header-anchor">#</a> Iterating over Object entries - Object.entries()</h2> <p>The <a href="https://github.com/tc39/proposal-object-values-entries" target="_blank" rel="noopener noreferrer">proposed <code>Object.entries()</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> method returns an array of key/value pairs for the given object. It does not return an iterator like <a href="http://stackoverflow.com/documentation/javascript/187/arrays/15738/the-entries-method#t=201607290930558752555" target="_blank" rel="noopener noreferrer"><code>Array.prototype.entries()</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, but the Array returned by <code>Object.entries()</code> can be iterated regardless.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
one<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
two<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
three<span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Results in:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span>
<span class="token punctuation">[</span><span class="token string">"one"</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span><span class="token string">"two"</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span><span class="token string">"three"</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token punctuation">]</span>
</code></pre></div><p>It is an useful way of iterating over the key/value pairs of an object:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token punctuation">[</span>key<span class="token punctuation">,</span> value<span class="token punctuation">]</span> <span class="token keyword">of</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "one", "two" and "three"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1, 2 and 3</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="object-values"><a href="#object-values" class="header-anchor">#</a> Object.values()</h2> <p>The <code>Object.values()</code> method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token operator">:</span> <span class="token string">'c'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['a', 'b', 'c']</span>
</code></pre></div><p><strong>Note:</strong></p> <p>For browser support, please refer to this <a href="http://kangax.github.io/compat-table/es2016plus/#test-Object.values" target="_blank" rel="noopener noreferrer">link<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="syntax"><a href="#syntax" class="header-anchor">#</a> Syntax</h4> <ul><li>object = { }</li> <li>object = new Object()</li> <li>object = Object.create(prototype[, propertiesObject])</li> <li>object.key = value</li> <li>object["key"] = value</li> <li>object[Symbol()] = value</li> <li>object = { key1: value1, "key2": value2, 'key3': value3 }</li> <li>object = { conciseMethod() { … } }</li> <li>object = { [computed() + "key"]: value }</li> <li>Object.defineProperty(obj, propertyName, propertyDescriptor)</li> <li>property_desc = Object.getOwnPropertyDescriptor(obj, propertyName)</li> <li>Object.freeze(obj)</li> <li>Object.seal(obj)</li></ul> <h4 id="parameters"><a href="#parameters" class="header-anchor">#</a> Parameters</h4> <table><thead><tr><th>Property</th> <th>Description</th></tr></thead> <tbody><tr><td><code>value</code></td> <td>The value to assign to the property.</td></tr> <tr><td><code>writable</code></td> <td>Whether the value of the property can be changed or not.</td></tr> <tr><td><code>enumerable</code></td> <td>Whether the property will be enumerated in <code>for in</code> loops or not.</td></tr> <tr><td><code>configurable</code></td> <td>Whether it will be possible to redefine the property descriptor or not.</td></tr> <tr><td><code>get</code></td> <td>A function to be called that will return the value of the property.</td></tr> <tr><td><code>set</code></td> <td>A function to be called when the property is assigned a value.</td></tr></tbody></table> <h4 id="remarks"><a href="#remarks" class="header-anchor">#</a> Remarks</h4> <p>Objects are collections of key-value pairs, or properties. The keys can be <code>String</code>s or <code>Symbol</code>s, and values are either primitives (numbers, strings, symbols) or references to other objects.</p> <p>In JavaScript, a significant amount of values are objects (e.g. functions, arrays) or primitives that behave as immutable objects (numbers, strings, booleans). Their properties or their <code>prototype</code>'s properties can be accessed using dot (<code>obj.prop</code>) or bracket (<code>obj['prop']</code>) notation. Notable exceptions are the special values <code>undefined</code> and <code>null</code>.</p> <p>Objects are held by reference in JavaScript, not by value. This means that when copied or passed as arguments to functions, the "copy" and the original are references to the same object, and a change to one's properties will change the same property of the other. This does not apply to primitives, which are immutable and passed by value.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/devtut/generate/edit/master/docs/javascript/objects.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/javascript/arrays.html" class="prev">
Arrays
</a></span> <span class="next"><a href="/javascript/arithmetic-math.html">
Arithmetic (Math)
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.1779e102.js" defer></script><script src="/assets/js/3.2cfa8016.js" defer></script><script src="/assets/js/1769.5e831f48.js" defer></script>
</body>
</html>