Symbols, Sets & Maps

1// Creating symbols
2const symbol1 = Symbol();
3const symbol2 = Symbol('description');
4const symbol3 = Symbol('description');
5
6console.log(symbol1); // Symbol()
7console.log(symbol2); // Symbol(description)
8console.log(symbol3); // Symbol(description)
9
10// Every symbol is unique, even with the same description
11console.log(symbol2 === symbol3); // false
12console.log(symbol1 === symbol2); // false
13
14// Type checking
15console.log(typeof symbol1); // 'symbol'
16
17// Symbols cannot be coerced to strings automatically
18// console.log("Hello " + symbol1); // TypeError
19console.log(`Hello ${symbol1.toString()}`); // "Hello Symbol()"
20console.log(`Hello ${String(symbol1)}`); // "Hello Symbol()"

1// Using symbols as object property keys
2const nameSymbol = Symbol('name');
3const ageSymbol = Symbol('age');
4const secretSymbol = Symbol('secret');
5
6const person = {
7    [nameSymbol]: 'John Doe',
8    [ageSymbol]: 30,
9    [secretSymbol]: 'hidden value',
10    // Regular string property
11    email: '[email protected]'
12};
13
14// Accessing symbol properties
15console.log(person[nameSymbol]); // 'John Doe'
16console.log(person[ageSymbol]); // 30
17console.log(person[secretSymbol]); // 'hidden value'
18
19// Symbol properties are not enumerable in normal iteration
20console.log(Object.keys(person)); // ['email']
21console.log(Object.values(person)); // ['[email protected]']
22
23// But they can be accessed if you have the symbol reference
24const symbols = Object.getOwnPropertySymbols(person);
25console.log(symbols); // [Symbol(name), Symbol(age), Symbol(secret)]
26
27// Getting both string and symbol keys
28const allKeys = [...Object.keys(person), ...Object.getOwnPropertySymbols(person)];
29console.log(allKeys); // ['email', Symbol(name), Symbol(age), Symbol(secret)]

1// Global symbols with Symbol.for() and Symbol.keyFor()
2const globalSymbol1 = Symbol.for('shared');
3const globalSymbol2 = Symbol.for('shared');
4
5// Global symbols with the same key are identical
6console.log(globalSymbol1 === globalSymbol2); // true
7
8// Get the key for a global symbol
9console.log(Symbol.keyFor(globalSymbol1)); // 'shared'
10
11// Regular symbols are not in the global registry
12const localSymbol = Symbol('local');
13console.log(Symbol.keyFor(localSymbol)); // undefined
14
15// Useful for creating shared symbols across different parts of an application
16const LOG_LEVEL = Symbol.for('app.logLevel');
17const DEBUG_MODE = Symbol.for('app.debugMode');
18
19// These can be accessed from anywhere in the application
20function getLogLevel() {
21    return Symbol.for('app.logLevel');
22}

1// ES6 defines several well-known symbols for meta-programming
2class CustomIterable {
3    constructor(...items) {
4        this.items = items;
5    }
6    
7    // Symbol.iterator makes objects iterable
8    *[Symbol.iterator]() {
9        for (const item of this.items) {
10            yield item;
11        }
12    }
13    
14    // Symbol.toStringTag customizes Object.prototype.toString
15    get [Symbol.toStringTag]() {
16        return 'CustomIterable';
17    }
18}
19
20const iterable = new CustomIterable(1, 2, 3, 4);
21
22// Can be used with for...of because of Symbol.iterator
23for (const value of iterable) {
24    console.log(value); // 1, 2, 3, 4
25}
26
27// Custom toString tag
28console.log(Object.prototype.toString.call(iterable)); // [object CustomIterable]
29
30// Other well-known symbols
31class MathUtils {
32    static [Symbol.hasInstance](instance) {
33        return typeof instance === 'number';
34    }
35}
36
37console.log(42 instanceof MathUtils); // true (using custom Symbol.hasInstance)
38console.log('hello' instanceof MathUtils); // false

1// Using symbols for pseudo-private properties
2const _balance = Symbol('balance');
3const _transactions = Symbol('transactions');
4const _validateAmount = Symbol('validateAmount');
5
6class BankAccount {
7    constructor(initialBalance = 0) {
8        this[_balance] = initialBalance;
9        this[_transactions] = [];
10    }
11    
12    // Private-like method using symbol
13    [_validateAmount](amount) {
14        return typeof amount === 'number' && amount > 0;
15    }
16    
17    deposit(amount) {
18        if (!this[_validateAmount](amount)) {
19            throw new Error('Invalid amount');
20        }
21        
22        this[_balance] += amount;
23        this[_transactions].push({
24            type: 'deposit',
25            amount,
26            date: new Date(),
27            balance: this[_balance]
28        });
29        
30        return this[_balance];
31    }
32    
33    withdraw(amount) {
34        if (!this[_validateAmount](amount)) {
35            throw new Error('Invalid amount');
36        }
37        
38        if (amount > this[_balance]) {
39            throw new Error('Insufficient funds');
40        }
41        
42        this[_balance] -= amount;
43        this[_transactions].push({
44            type: 'withdrawal',
45            amount: -amount,
46            date: new Date(),
47            balance: this[_balance]
48        });
49        
50        return this[_balance];
51    }
52    
53    get balance() {
54        return this[_balance];
55    }
56    
57    get transactionHistory() {
58        return [...this[_transactions]]; // Return a copy
59    }
60}
61
62const account = new BankAccount(1000);
63console.log(account.balance); // 1000
64
65account.deposit(500);
66account.withdraw(200);
67
68console.log(account.balance); // 1300
69console.log(account.transactionHistory.length); // 2
70
71// These properties are not easily accessible from outside
72console.log(Object.keys(account)); // []
73console.log(account._balance); // undefined (not accessible without the symbol)
74
75// But they can still be discovered with Object.getOwnPropertySymbols
76const accountSymbols = Object.getOwnPropertySymbols(account);
77console.log(accountSymbols.length); // 2 (balance and transactions symbols)

1// Creating Sets
2const emptySet = new Set();
3const numbersSet = new Set([1, 2, 3, 4, 5]);
4const stringsSet = new Set(['apple', 'banana', 'orange']);
5const mixedSet = new Set([1, 'hello', true, null, undefined]);
6
7// Sets automatically remove duplicates
8const duplicateSet = new Set([1, 2, 2, 3, 3, 3, 4]);
9console.log(duplicateSet); // Set { 1, 2, 3, 4 }
10console.log(duplicateSet.size); // 4
11
12// Adding values
13const tags = new Set();
14tags.add('javascript');
15tags.add('web-development');
16tags.add('frontend');
17tags.add('javascript'); // Duplicate - won't be added
18
19console.log(tags); // Set { 'javascript', 'web-development', 'frontend' }
20console.log(tags.size); // 3
21
22// Checking if value exists
23console.log(tags.has('javascript')); // true
24console.log(tags.has('python')); // false
25
26// Removing values
27tags.delete('frontend');
28console.log(tags.has('frontend')); // false
29console.log(tags.size); // 2
30
31// Clearing all values
32const tempSet = new Set([1, 2, 3]);
33tempSet.clear();
34console.log(tempSet.size); // 0

1// Sets are iterable
2const colors = new Set(['red', 'green', 'blue', 'yellow']);
3
4// for...of loop
5console.log('Using for...of:');
6for (const color of colors) {
7    console.log(color);
8}
9
10// forEach method
11console.log('\nUsing forEach:');
12colors.forEach((color, colorAgain, set) => {
13    console.log(color); // Note: value is passed twice (no key concept in Sets)
14});
15
16// Converting to array
17const colorsArray = Array.from(colors);
18// or
19const colorsSpread = [...colors];
20console.log(colorsArray); // ['red', 'green', 'blue', 'yellow']
21
22// Using array methods on Sets
23const upperCaseColors = [...colors].map(color => color.toUpperCase());
24console.log(upperCaseColors); // ['RED', 'GREEN', 'BLUE', 'YELLOW']
25
26// Set methods for iteration
27console.log('\nSet iterators:');
28for (const value of colors.values()) {
29    console.log('Value:', value);
30}
31
32for (const value of colors.keys()) { // Same as values() in Sets
33    console.log('Key:', value);
34}
35
36for (const [value, valueAgain] of colors.entries()) {
37    console.log('Entry:', value, valueAgain); // Both are the same
38}

1// Set operations (union, intersection, difference)
2const setA = new Set([1, 2, 3, 4, 5]);
3const setB = new Set([4, 5, 6, 7, 8]);
4
5// Union (combine all unique values)
6const union = new Set([...setA, ...setB]);
7console.log(union); // Set { 1, 2, 3, 4, 5, 6, 7, 8 }
8
9// Intersection (common values)
10const intersection = new Set([...setA].filter(x => setB.has(x)));
11console.log(intersection); // Set { 4, 5 }
12
13// Difference (values in A but not in B)
14const difference = new Set([...setA].filter(x => !setB.has(x)));
15console.log(difference); // Set { 1, 2, 3 }
16
17// Symmetric difference (values in either A or B, but not both)
18const symmetricDiff = new Set([
19    ...[...setA].filter(x => !setB.has(x)),
20    ...[...setB].filter(x => !setA.has(x))
21]);
22console.log(symmetricDiff); // Set { 1, 2, 3, 6, 7, 8 }
23
24// Utility functions for Set operations
25class SetUtils {
26    static union(setA, setB) {
27        return new Set([...setA, ...setB]);
28    }
29    
30    static intersection(setA, setB) {
31        return new Set([...setA].filter(x => setB.has(x)));
32    }
33    
34    static difference(setA, setB) {
35        return new Set([...setA].filter(x => !setB.has(x)));
36    }
37    
38    static isSubset(subset, superset) {
39        return [...subset].every(x => superset.has(x));
40    }
41    
42    static isSuperset(superset, subset) {
43        return this.isSubset(subset, superset);
44    }
45    
46    static areDisjoint(setA, setB) {
47        return this.intersection(setA, setB).size === 0;
48    }
49}
50
51// Test utility functions
52const set1 = new Set([1, 2, 3]);
53const set2 = new Set([2, 3, 4]);
54const set3 = new Set([1, 2]);
55
56console.log('Union:', SetUtils.union(set1, set2)); // Set { 1, 2, 3, 4 }
57console.log('Intersection:', SetUtils.intersection(set1, set2)); // Set { 2, 3 }
58console.log('Is set3 subset of set1?', SetUtils.isSubset(set3, set1)); // true
59console.log('Are set1 and set2 disjoint?', SetUtils.areDisjoint(set1, set2)); // false

1// Use case 1: Removing duplicates from arrays
2function removeDuplicates(array) {
3    return [...new Set(array)];
4}
5
6const numbersWithDuplicates = [1, 2, 2, 3, 4, 4, 5, 1];
7const uniqueNumbers = removeDuplicates(numbersWithDuplicates);
8console.log(uniqueNumbers); // [1, 2, 3, 4, 5]
9
10// Use case 2: Tag system
11class Article {
12    constructor(title, content) {
13        this.title = title;
14        this.content = content;
15        this.tags = new Set();
16        this.categories = new Set();
17    }
18    
19    addTag(tag) {
20        this.tags.add(tag.toLowerCase());
21        return this;
22    }
23    
24    addTags(...tags) {
25        tags.forEach(tag => this.addTag(tag));
26        return this;
27    }
28    
29    removeTag(tag) {
30        this.tags.delete(tag.toLowerCase());
31        return this;
32    }
33    
34    hasTag(tag) {
35        return this.tags.has(tag.toLowerCase());
36    }
37    
38    addCategory(category) {
39        this.categories.add(category);
40        return this;
41    }
42    
43    getTagsArray() {
44        return [...this.tags];
45    }
46    
47    getCategoriesArray() {
48        return [...this.categories];
49    }
50    
51    // Find common tags with another article
52    commonTagsWith(otherArticle) {
53        return SetUtils.intersection(this.tags, otherArticle.tags);
54    }
55    
56    // Get all unique tags from this article and another
57    allTagsWith(otherArticle) {
58        return SetUtils.union(this.tags, otherArticle.tags);
59    }
60}
61
62const article1 = new Article('JavaScript Basics', 'Learning JS...')
63    .addTags('JavaScript', 'Programming', 'Web Development', 'Frontend')
64    .addCategory('Tutorial');
65
66const article2 = new Article('React Guide', 'React framework...')
67    .addTags('React', 'JavaScript', 'Frontend', 'Components')
68    .addCategory('Tutorial');
69
70console.log('Article 1 tags:', article1.getTagsArray());
71console.log('Article 2 tags:', article2.getTagsArray());
72console.log('Common tags:', [...article1.commonTagsWith(article2)]);
73console.log('All unique tags:', [...article1.allTagsWith(article2)]);
74
75// Use case 3: User permissions system
76class User {
77    constructor(name) {
78        this.name = name;
79        this.permissions = new Set();
80        this.roles = new Set();
81    }
82    
83    grantPermission(permission) {
84        this.permissions.add(permission);
85        return this;
86    }
87    
88    revokePermission(permission) {
89        this.permissions.delete(permission);
90        return this;
91    }
92    
93    hasPermission(permission) {
94        return this.permissions.has(permission);
95    }
96    
97    addRole(role) {
98        this.roles.add(role);
99        // Grant role-specific permissions
100        const rolePermissions = this.getRolePermissions(role);
101        rolePermissions.forEach(permission => this.grantPermission(permission));
102        return this;
103    }
104    
105    removeRole(role) {
106        this.roles.delete(role);
107        // Would need more complex logic to remove role permissions
108        // without affecting permissions from other roles
109        return this;
110    }
111    
112    getRolePermissions(role) {
113        const rolePermissionMap = {
114            'admin': ['read', 'write', 'delete', 'manage_users'],
115            'editor': ['read', 'write'],
116            'viewer': ['read']
117        };
118        return rolePermissionMap[role] || [];
119    }
120    
121    getAllPermissions() {
122        return [...this.permissions];
123    }
124}
125
126const user = new User('John Doe')
127    .addRole('editor')
128    .grantPermission('export_data');
129
130console.log('User permissions:', user.getAllPermissions());
131console.log('Can write?', user.hasPermission('write')); // true
132console.log('Can delete?', user.hasPermission('delete')); // false

1// Creating Maps
2const emptyMap = new Map();
3const numbersMap = new Map([
4    [1, 'one'],
5    [2, 'two'],
6    [3, 'three']
7]);
8
9// Maps can have any type of key
10const mixedMap = new Map([
11    ['string-key', 'string value'],
12    [42, 'number key'],
13    [true, 'boolean key'],
14    [{}, 'object key'],
15    [function() {}, 'function key']
16]);
17
18console.log(mixedMap.size); // 5
19
20// Setting and getting values
21const userMap = new Map();
22
23// Setting values
24userMap.set('name', 'John Doe');
25userMap.set('age', 30);
26userMap.set('email', '[email protected]');
27
28// Method chaining is supported
29userMap.set('city', 'New York').set('country', 'USA');
30
31// Getting values
32console.log(userMap.get('name')); // 'John Doe'
33console.log(userMap.get('age')); // 30
34console.log(userMap.get('nonexistent')); // undefined
35
36// Checking if key exists
37console.log(userMap.has('email')); // true
38console.log(userMap.has('phone')); // false
39
40// Getting size
41console.log(userMap.size); // 5
42
43// Deleting entries
44userMap.delete('city');
45console.log(userMap.has('city')); // false
46console.log(userMap.size); // 4
47
48// Clearing all entries
49const tempMap = new Map([['a', 1], ['b', 2]]);
50tempMap.clear();
51console.log(tempMap.size); // 0

1// Using objects as keys
2const user1 = { id: 1, name: 'Alice' };
3const user2 = { id: 2, name: 'Bob' };
4const user3 = { id: 3, name: 'Charlie' };
5
6const userScores = new Map([
7    [user1, 95],
8    [user2, 87],
9    [user3, 92]
10]);
11
12console.log(userScores.get(user1)); // 95
13console.log(userScores.get(user2)); // 87
14
15// Functions as keys
16const cache = new Map();
17const expensiveFunction = (x) => x * x * x;
18const anotherFunction = (x) => x + x;
19
20cache.set(expensiveFunction, new Map());
21cache.set(anotherFunction, new Map());
22
23// Store function results
24cache.get(expensiveFunction).set(5, 125); // Cache result of expensiveFunction(5)
25cache.get(anotherFunction).set(5, 10);   // Cache result of anotherFunction(5)
26
27console.log(cache.get(expensiveFunction).get(5)); // 125
28
29// Symbols as keys
30const privateData = Symbol('private');
31const publicData = Symbol('public');
32
33const dataMap = new Map([
34    [privateData, { secret: 'hidden info' }],
35    [publicData, { info: 'public info' }]
36]);
37
38console.log(dataMap.get(privateData)); // { secret: 'hidden info' }
39console.log(dataMap.get(publicData));  // { info: 'public info' }
40
41// Dates as keys
42const eventMap = new Map();
43const today = new Date('2024-01-15');
44const tomorrow = new Date('2024-01-16');
45
46eventMap.set(today, ['Meeting at 10am', 'Lunch at 12pm']);
47eventMap.set(tomorrow, ['Conference call at 2pm']);
48
49console.log(eventMap.get(today)); // ['Meeting at 10am', 'Lunch at 12pm']

1// Maps are iterable and maintain insertion order
2const fruitPrices = new Map([
3    ['apple', 1.50],
4    ['banana', 0.75],
5    ['orange', 2.00],
6    ['grape', 3.50]
7]);
8
9// for...of with destructuring
10console.log('Using for...of with entries:');
11for (const [fruit, price] of fruitPrices) {
12    console.log(`${fruit}: $${price}`);
13}
14
15// forEach method
16console.log('\nUsing forEach:');
17fruitPrices.forEach((price, fruit, map) => {
18    console.log(`${fruit}: $${price}`);
19});
20
21// Iterating over keys only
22console.log('\nKeys:');
23for (const fruit of fruitPrices.keys()) {
24    console.log(fruit);
25}
26
27// Iterating over values only  
28console.log('\nValues:');
29for (const price of fruitPrices.values()) {
30    console.log(`$${price}`);
31}
32
33// Converting to arrays
34const entriesArray = Array.from(fruitPrices);
35const entriesSpread = [...fruitPrices];
36console.log('Entries as array:', entriesArray);
37
38const keysArray = [...fruitPrices.keys()];
39const valuesArray = [...fruitPrices.values()];
40console.log('Keys:', keysArray);
41console.log('Values:', valuesArray);
42
43// Converting from arrays
44const newMap = new Map([
45    ['key1', 'value1'],
46    ['key2', 'value2']
47]);

1// Performance comparison and feature differences
2console.log('=== Maps vs Objects ===');
3
4// Object approach
5const obj = {
6    name: 'John',
7    age: 30,
8    'email': '[email protected]'
9};
10
11// Map approach  
12const map = new Map([
13    ['name', 'John'],
14    ['age', 30],
15    ['email', '[email protected]']
16]);
17
18// Size comparison
19console.log('Object properties count:', Object.keys(obj).length); // Manual counting
20console.log('Map size:', map.size); // Built-in size property
21
22// Key types
23// Objects: only strings and symbols as keys
24const objWithNumericKey = { 1: 'one', '1': 'string one' }; // Both become strings
25console.log(objWithNumericKey[1]); // 'string one' (overwrote numeric key)
26
27// Maps: any type as key
28const mapWithNumericKey = new Map([[1, 'one'], ['1', 'string one']]);
29console.log(mapWithNumericKey.get(1)); // 'one'
30console.log(mapWithNumericKey.get('1')); // 'string one'
31
32// Iteration order
33// Objects: not guaranteed (though mostly insertion order in modern engines)
34// Maps: guaranteed insertion order
35
36// Inheritance
37// Objects: have prototype with default keys
38console.log('toString' in obj); // true (inherited from prototype)
39
40// Maps: no default keys
41console.log(map.has('toString')); // false (clean, no prototype)
42
43// Performance characteristics
44function performanceTest() {
45    const iterations = 100000;
46    
47    // Object performance
48    console.time('Object creation and access');
49    const testObj = {};
50    for (let i = 0; i < iterations; i++) {
51        testObj[`key${i}`] = i;
52    }
53    for (let i = 0; i < iterations; i++) {
54        const value = testObj[`key${i}`];
55    }
56    console.timeEnd('Object creation and access');
57    
58    // Map performance
59    console.time('Map creation and access');
60    const testMap = new Map();
61    for (let i = 0; i < iterations; i++) {
62        testMap.set(`key${i}`, i);
63    }
64    for (let i = 0; i < iterations; i++) {
65        const value = testMap.get(`key${i}`);
66    }
67    console.timeEnd('Map creation and access');
68}
69
70performanceTest();

1// Use case 1: Caching system
2class SimpleCache {
3    constructor(maxSize = 100) {
4        this.cache = new Map();
5        this.maxSize = maxSize;
6    }
7    
8    get(key) {
9        if (this.cache.has(key)) {
10            // Move to end (most recently used)
11            const value = this.cache.get(key);
12            this.cache.delete(key);
13            this.cache.set(key, value);
14            return value;
15        }
16        return null;
17    }
18    
19    set(key, value) {
20        if (this.cache.has(key)) {
21            // Update existing
22            this.cache.delete(key);
23        } else if (this.cache.size >= this.maxSize) {
24            // Remove least recently used (first entry)
25            const firstKey = this.cache.keys().next().value;
26            this.cache.delete(firstKey);
27        }
28        
29        this.cache.set(key, value);
30    }
31    
32    has(key) {
33        return this.cache.has(key);
34    }
35    
36    clear() {
37        this.cache.clear();
38    }
39    
40    size() {
41        return this.cache.size;
42    }
43    
44    keys() {
45        return [...this.cache.keys()];
46    }
47}
48
49const cache = new SimpleCache(3);
50cache.set('a', 1);
51cache.set('b', 2);
52cache.set('c', 3);
53console.log('Cache keys after filling:', cache.keys()); // ['a', 'b', 'c']
54
55cache.get('a'); // Move 'a' to end
56cache.set('d', 4); // Should remove 'b' (least recently used)
57console.log('Cache keys after adding d:', cache.keys()); // ['c', 'a', 'd']
58
59// Use case 2: Event system with object keys
60class EventEmitter {
61    constructor() {
62        this.events = new Map();
63    }
64    
65    on(event, callback) {
66        if (!this.events.has(event)) {
67            this.events.set(event, new Set());
68        }
69        this.events.get(event).add(callback);
70    }
71    
72    off(event, callback) {
73        if (this.events.has(event)) {
74            this.events.get(event).delete(callback);
75            if (this.events.get(event).size === 0) {
76                this.events.delete(event);
77            }
78        }
79    }
80    
81    emit(event, ...args) {
82        if (this.events.has(event)) {
83            this.events.get(event).forEach(callback => {
84                try {
85                    callback(...args);
86                } catch (error) {
87                    console.error('Event callback error:', error);
88                }
89            });
90        }
91    }
92    
93    listEvents() {
94        return [...this.events.keys()];
95    }
96    
97    getListenerCount(event) {
98        return this.events.has(event) ? this.events.get(event).size : 0;
99    }
100}
101
102const emitter = new EventEmitter();
103
104const loginHandler = (user) => console.log(`User logged in: ${user}`);
105const analyticsHandler = (user) => console.log(`Analytics: Login by ${user}`);
106
107emitter.on('login', loginHandler);
108emitter.on('login', analyticsHandler);
109emitter.on('logout', (user) => console.log(`User logged out: ${user}`));
110
111emitter.emit('login', 'John Doe');
112// Output: 
113// User logged in: John Doe
114// Analytics: Login by John Doe
115
116console.log('Events:', emitter.listEvents()); // ['login', 'logout']
117console.log('Login listeners:', emitter.getListenerCount('login')); // 2
118
119// Use case 3: Metadata system
120class MetadataManager {
121    constructor() {
122        this.metadata = new Map();
123    }
124    
125    setMetadata(object, key, value) {
126        if (!this.metadata.has(object)) {
127            this.metadata.set(object, new Map());
128        }
129        this.metadata.get(object).set(key, value);
130    }
131    
132    getMetadata(object, key) {
133        const objectMeta = this.metadata.get(object);
134        return objectMeta ? objectMeta.get(key) : undefined;
135    }
136    
137    getAllMetadata(object) {
138        const objectMeta = this.metadata.get(object);
139        return objectMeta ? Object.fromEntries(objectMeta) : {};
140    }
141    
142    hasMetadata(object, key) {
143        const objectMeta = this.metadata.get(object);
144        return objectMeta ? objectMeta.has(key) : false;
145    }
146    
147    deleteMetadata(object, key) {
148        const objectMeta = this.metadata.get(object);
149        if (objectMeta) {
150            objectMeta.delete(key);
151            if (objectMeta.size === 0) {
152                this.metadata.delete(object);
153            }
154        }
155    }
156    
157    clearObject(object) {
158        this.metadata.delete(object);
159    }
160}
161
162const metaManager = new MetadataManager();
163const button1 = document.createElement('button');
164const button2 = document.createElement('button');
165
166// Attach metadata to DOM elements
167metaManager.setMetadata(button1, 'component', 'SubmitButton');
168metaManager.setMetadata(button1, 'theme', 'primary');
169metaManager.setMetadata(button1, 'size', 'large');
170
171metaManager.setMetadata(button2, 'component', 'CancelButton');
172metaManager.setMetadata(button2, 'theme', 'secondary');
173
174console.log('Button1 metadata:', metaManager.getAllMetadata(button1));
175console.log('Button2 component:', metaManager.getMetadata(button2, 'component'));