Symbol
Toolbox

const id1 = Symbol("id");
const id2 = Symbol("id");       // same label, still a different symbol

console.log(typeof id1);
console.log(id1 === id2);        // every Symbol() call makes a one of a kind value
console.log(id1.description);    // the label is only there to help you debug
console.log(id1.toString());

try { console.log(`${id1}`); } catch (err) { console.log(err.constructor.name); }

const secret = Symbol("secret");

const user = { name: "Asha", [secret]: "token-123" };  // square brackets for a symbol key

console.log(user[secret]);             // read it with the same symbol
console.log(Object.keys(user));        // symbol keys are skipped
console.log(JSON.stringify(user));     // and left out of JSON
for (const k in user) console.log("for in sees", k);

console.log(Object.getOwnPropertySymbols(user)); // how to find them on purpose
console.log(Reflect.ownKeys(user));              // every key, text and symbol

// two different libraries both want to tag the same object
const libA = { tag: Symbol("tag") };
const libB = { tag: Symbol("tag") };

const item = { name: "invoice" };
item[libA.tag] = "A was here";
item[libB.tag] = "B was here";   // no clash, even with the same label

console.log(item[libA.tag], "|", item[libB.tag]);
console.log(Object.keys(item));  // the object looks untouched to everyone else

// Symbol.for looks up a global list: same name, same symbol, anywhere
const a = Symbol.for("app.userId");
const b = Symbol.for("app.userId");
console.log(a === b);

console.log(Symbol.keyFor(a));           // the name it was registered with
console.log(Symbol.keyFor(Symbol("x"))); // a normal symbol is not in the list

// symbols make safe labels: nothing else can accidentally equal them
const Status = Object.freeze({
  PENDING: Symbol("pending"),
  PAID: Symbol("paid"),
});

function label(status) {
  switch (status) {
    case Status.PENDING: return "waiting for payment";
    case Status.PAID: return "all done";
    default: return "unknown";
  }
}
console.log(label(Status.PAID));
console.log(label("paid"));       // plain text cannot pretend to be the symbol

// Symbol.iterator tells for...of and spread how to walk your object
const week = {
  days: ["Mon", "Tue", "Wed"],
  *[Symbol.iterator]() {
    for (const d of this.days) yield d;
  },
};

for (const day of week) console.log(day);
console.log([...week].join(" -> "));

const price = {
  amount: 450,
  // decides what this object becomes in maths or in text
  [Symbol.toPrimitive](hint) {
    return hint === "number" ? this.amount : `₹${this.amount}`;
  },
  get [Symbol.toStringTag]() { return "Price"; },  // the name in toString
};

console.log(+price + 50);                 // number hint
console.log(`Total: ${price}`);           // string hint
console.log(Object.prototype.toString.call(price));

// a Range you can loop over, with a hidden step setting
const STEP = Symbol("step");

class Range {
  constructor(start, end, step = 1) {
    this.start = start;
    this.end = end;
    this[STEP] = step;              // a symbol key keeps it out of the way
  }
  *[Symbol.iterator]() {            // makes for...of and spread work
    for (let n = this.start; n <= this.end; n += this[STEP]) yield n;
  }
  get [Symbol.toStringTag]() { return "Range"; }
}

const evens = new Range(2, 10, 2);
console.log([...evens]);
console.log(Object.keys(evens));   // step does not show up as a normal key
console.log(String(evens));
let total = 0;
for (const n of new Range(1, 4)) total += n;
console.log("sum 1 to 4 =", total);