Home / Questions / 1907
Accepted
Chofoteddy
Asked: 2020-12-30 09:58:01 +0800 CST 2020-12-30 09:58:01 +0800 CST

What is a Symbol used for in JavaScript? (ES6)

  • 772

Reading the MDN documentation where the primitive data is talked about, no matter Symbolhow much I read and reread, I don't understand what would be a use case for said element other than to iterate Symbol.iterator.

The documentation says that its use is for debugging purposes , but even with that I don't understand why use a to debug if or Symbolexists .console.log()debugger

I understand that it is a primitive data and therefore immutable. In the examples I have seen that they do something like the following:

var sym = Symbol('Llave'),
    obj = {
        [sym]: 'valor'
    };

console.log(obj[sym]); // valor
console.log(obj['Llave']); // undefined

Why use a Symbol? if a traditional key (key: value) can be used.

Sources:

javascript

2 Answers

  1. Best Answer

    Symbols are unique data types that are immutable and can be used as object property identifiers. These are like the types Number, String, and Booleanprimitives.

    To create it, it is done as follows, without using the word new, since they Symbolshave a function Symbolwhich is used to create them;

    var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");

    As I commented above, being unique types, it will create a new Symbol which will not be another:

    Symbol("foo") === Symbol("foo"); // false

    About debugingThese are considered powerful, since they have a description, which is used only for debugging to make life easier when debugging by console:

    console.log(Symbol('foo')); // prints "Symbol(foo)" to the console.  
assert(Symbol('foo').toString() === 'Symbol(foo)');

    What are they good for?:

    1. To create and store values ​​like integerand stringthat will not change.

    2. It can be used to store custom metadata for objects, which are children of the current object.

    Conclusion:

    They are small constants that have some extra properties that allow us to work better in debug and save unique values.

    A good resource is this page where there is an example, and they explain much more extensively what symbols are.

    • 11

  2. Since @WilfredoP hasn't mentioned global symbols I'm going to take advantage of:

    var s1 = Symbol.for('foo');
var s2 = Symbol.for('foo');
s1 === s2 // retorna true, ya que Symbol.for(<name>) genera símbolos globales.

    Here, s1and s2are basically the same symbol. But how a symbol is coded is not as important as its purpose:

    They Symbolsare part of a movement Javascript is making toward metaprogramming . And they are not alone in this, ECMAScript 2015 includes 2 other additions that point in that line which are Proxy and Reflect .

    Therefore, its use is very varied. The question is what semantics these will have for your application.

    There are some well known symbols!

    Symbol.hasInstance: instanceof

    Symbol.hasInstanceis the symbol that controls the behavior of instanceof. That is, A instanceof Bit is equivalent B[Symbol.hasInstance](A).

    Example:

    class MiArray {  
    // aquí sobrecargo el operador instanceof 
    static [Symbol.hasInstance](otro) {
        return Array.isArray(otro);
    }
}
assert([] instanceof MiArray); // pasa, por evaluarse como true

    Symbol.iterator

    Overloading the method objeto[Symbol.iterator]allows you to change the behavior of the operator ofin a block for .. ofif it is overloaded as a generator function.

    Example:

    class IterarSaltando {  
  *[Symbol.iterator]() {
    var i = 0;
    while(this[i] !== undefined) {
      yield this[i];
      i+=2;
    }
  }
}
var iterarSaltando = new IterarSaltando();
iterarSaltando[0] = '1';
iterarSaltando[1] = '2';
iterarSaltando[2] = '3';
for(var value of iterarSaltando) {  
    console.log(value); // 1, luego 3
}

    There is quite a long list of these symbols pre-defined by the standard. But not all of them are 100% implemented in all browsers.

    • 6