Plain objects are created with curly braces and can contain properties separated by commas, with an optional trailing comma. Plain objects group related named data, unlike arrays that use numeric indices. Properties can be read (e.g., .quantity) and written to by assignment. The toggle-content.html example demonstrates showing and hiding content by toggling a CSS class. CSS can hide an element like #content when it has class hidden, causing the paragraph to be initially hidden. A link can toggle visibility by calling .classList.toggle('hidden') on the element, which adds or removes the class; equivalent logic can use .contains, .add, and .remove.
In a way, a plain object is a group of variables - it groups together related pieces of data that we can access via names. In contrast, in an array, we access related pieces of data via numberic indices. This is what we can do with purchase: We can read a property such as .quantity (we get that property): And we can write to a property (we set that property):
The following CSS hides the HTML element #content if it has the class hidden: Therefore, initially, the content inside <p> is hidden. The link toggles the display: If the content is currently hidden, clicking the link shows it. If we can currently see the content, clicking the link hides it. This is the JavaScript code that does the toggling: What is going on in line A? .classList gives us a "list" (a data structure loosely similar to an array) with the classes of content.
Collection
[
|
...
]