Exploring the Enigmatic:

Navigating JavaScript's Uncharted Realms

Luca Del Puppo

I want to be honest

Today, I'll talk about something that common developers don't use directly in the daily.

But probably the frameworks use these things for them, under the hood.

Luca Del Puppo

Senior Software Developer
JavaScript enthusiast
TypeScript lover
“Youtuber”
“Writer”

Love sport: running, hiking

Love animals

const button = 
      document.createElement('button');

button.clicked = false;

button.addEventListener('click', () => {
  button.clicked = true
});

writable

enumerable

configurable

Object Property Descriptors

Syntax

const person = {};
Object.defineProperty(person, 'name',
    {
        value: 'Alice',
        writable: false,
        enumerable: true,
        configurable: false
    }
);

Syntax

const animal = {};
Object.defineProperties(animal, {
    name: {
        value: 'Dog',
        writable: true
    },
    sound: {
        value: 'Woof',
        enumerable: false
    }
});

Syntax

const myObj = { age: 30 };
const descriptor =
      Object.getOwnPropertyDescriptor(myObj, 'age');

console.log(descriptor);
/* Output: 
  {
    value: 30, 
    writable: true,
    enumerable: true,
    configurable: true
  }
*/

Common usage

Objects Property Descriptors are used when we want to define every single behaviour of the properties.

By default every attribute is set to true.

Characteristics

permit to define every attribute of every property
allow to configure the property once and than it's "immutable"
allow to configure a property read-only
allow to hide a property from the enumaration

const button = 
      document.createElement('button');

Object.definedProperty(button, 'clicked', {
  value: false,
  writable: true,
  enumerable: false,
  configurable: false
})

button.addEventListener('click', () => {
  button.clicked = true
});

Symbols

Syntax

const propSymbol = Symbol("propName");
const propSymbol2 = Symbol("propName");

propSymbol === propSymbol2 // false

Don't do this


const propSymbol = new Symbol("propName");

Common usage

Symbols are often used as property keys in objects to ensure uniqueness and prevent naming collisions.

Example

const nameSymbol = Symbol("name");
const surnameSymbol = Symbol("surname");

const person = {
  name: 'John',
  surname: 'Doe',
  [nameSymbol]: "Jane",
  [surnameSymbol]: "Blue"
}

Characteristics

unique
live for the entire lifecycle of your application
not enumerable (hidden from for...in and Object.keys)
use Object.getOwnPropertySymbols() to get them

What about sharing Symbols

Global Symbol Registry

// my-module-1.js
export const propSymbolShare = Symbol.for("propName");

// my-module-2.js
export const propSymbolShare = Symbol.for("propName");

// index.js
import { propSymbolShare as propSymbolShareM1 } from './my-module.js'
import { propSymbolShare as propSymbolShareM2 } from './my-module-2.js'

console.log(propSymbolShareM1 === propSymbolShareM2); // true

Well-Known Symbols

Well-known symbols are predefined global symbols that represent common behaviours in JavaScript, such as Symbol.iterator, Symbol.asyncIterator, Symbol.toStringTag, and Symbol.species.

Example

function Range(start, end) {
  this.start = start;
  this.end = end;

  this[Symbol.iterator] = function*() {
    let current = this.start;
    const last = this.end;

    while (current <= last) {
      yield current++;
    }
  }

  return this;
}

for (let num of new Range(1, 10)) {
  console.log(num);
}

const ClickedSymbol = Symbol('clicked')

const button = 
      document.createElement('button');

button[ClickedSymbol] = false

button.addEventListener('click', () => {
  button[ClickedSymbol] = true
});

WeakMaps

Syntax

const weakmap = new WeakMap();
const key = { name: "John Doe" };
weakmap.set(key, "Some value");

const value = weakmap.get(key); // "Some value"

weakmap.delete(key); // true
weakmap.has(key); // false

Common usage

WeakMap offers several practical applications in JavaScript:

Privacy and Encapsulation
Memory Management
Caching

Characteristics

a Map but with only objects as keys
manage memory management

Limitations

Keys must be objects
No built-in iteration methods: such as forEach or entries.
No clear method

const ClickedWeakMap = new WeakMap()

const button = 
      document.createElement('button');

ClickedWeakMap.set(button, false)

button.addEventListener('click', () => {
  ClickedWeakMap.set(button, true)
});

WeakSets

Syntax

const weakSet = new WeakSet();

const obj1 = {};

weakSet.add(obj1);

console.log(weakSet.has(obj1)); // true
weakSet.delete(obj1);
console.log(weakSet.has(obj1)); // false

Common usage

WeakSet offers several practical applications in JavaScript:

Managing DOM Elements
Private Data Storage

Characteristics

a Set but with only objects
manage memory management

Limitations

Accepts only objects
No built-in iteration methods, such as forEach etc. etc.
No clear method

const ClickedWeakSet = new WeakSet()

const button = 
      document.createElement('button');

button.addEventListener('click', () => {
  ClickedWeakSet.add(button)
});

Proxies

Syntax - get

const target = { age: 31 };
const handler = {
  get(_target, prop) {
    if (prop === "birthYear") {
       return new Date().getFullYear() - _target['age'];
    }
    return _target[prop];
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.birthYear); // 1992

Syntax - set

const target = { age: 25 };
const handler = {
  set(_target, prop, value) {
    if (prop === "age" 
        && (typeof value !== "number" || value < 0 || value > 150))
      throw new TypeError("Invalid age value");

    _target[prop] = value;
    return true;
  },
};

const proxy = new Proxy(target, handler);
proxy.age = 30; // Works fine
proxy.age = "thirty"; // Throws TypeError: "Invalid age value"

Others traps

has
apply
constructor
deleteProperty

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#object_internal_methods

Common usage

Validation and Constraints
Logging and Profiling
Reactivity

const handlers = {
  set(t, p, v) {
    if (p === 'clicked')
      throw new Error('You cannot change this')
    t[p] = v
  }
}
const button = document.createElement('button')
button.addEventListener('click', () => {
  button.clicked = true
});

const wrappedButton = new Proxy(button, handlers)

Reflect

Syntax

const numbers = [1, 2, 3];
const sum = (a, b, c) => a + b + c;

// Using Reflect.apply()
const result = Reflect.apply(sum, null, numbers);

console.log(result); // Output: 6

Syntax

const obj = { x: 42, y: 'hello' };

// Using Reflect.get()
const value = Reflect.get(obj, 'x');

console.log(value); // Output: 42

Syntax

const obj = { x: 42 };
const newObj = Object.create(obj);

// Using Reflect.set()
Reflect.set(newObj, 'x', 13);

console.log(newObj.x); // Output: 13

Syntax

const obj = {};

// Using Reflect.defineProperty()
Reflect.defineProperty(obj, 'x', {
  value: 42,
  writable: false
});

console.log(obj.x); // Output: 42

Syntax

const obj = { x: 42, [Symbol('key')]: 'symbolValue' };

// Using Reflect.ownKeys()
const keys = Reflect.ownKeys(obj);

console.log(keys); // Output: ['x', Symbol(key)]

Why should I dive into `Reflect` when there are other ways to manipulate and inspect JavaScript objects?

Some points

Functional Paradigm
Enhanced Error Handling
Proxy Integration
Consistency and Predictability

DEMO

Conclusion

JavaScript is awesome 🚀
Different ways exist to do the same stuff but with different trade-offs and results.
Pay attention to what the other can do with your objects
JavaScript gives us the Power. But with great power comes great responsibility.
You use all these features daily, so be confident about what libraries do for us. It's important