The "well-known" Symbols in JavaScript

#discuss #javascript

You might have stumbled upon the weird @@thingies in JavaScript before. Maybe you saw an @@iterator or an @@match somewhere

These aren't valid JavaScript (@@iterator would throw an error). They are actually internal Symbols used in
JavaScript. They are used to implement features like iteration, instanceOf, and such internally. They actually might get removed or changed

For example: you can set @@isConcatSpreadable to stop .concat from spreading arrays.

const customArray = [1, 2, 3];
customArray[Symbol.isConcatSpreadable] = false;

const concatenatedArray = [4, 5, 6].concat(customArray);
console.log(concatenatedArray); // Output: [4, 5, 6, [1, 2, 3]]

Another one, a more useful one, is @@iterator it is used internally to define iteration - ie in for loops.

const customIterable = {
    [Symbol.iterator]() {
        return {
            next() {
                // Infinite loop
                return { value: 'anything', done: false }
                // return {done: true} when done
            }
        }
    }
}

for (const item of customIterable) {
    console.log(item);
}

@@match can also have potential use cases:

class CustomDateMatcher {
    [Symbol.match](str) {
        // ...logic...
    }
}

const str = '21st of March';
console.log(str.match(new CustomDateMatcher('21/03'))); // Custom pattern matching result