001. Symbols

Los siguientes capítulos van a estar orientados a ver nuevos tipos de datos que existen en Javascript, que los hemos dejado hasta estos capítulos para no confundir con las nociones básicas del lenguaje.

Estos nuevos tipos de datos se dan a partir de estándar 2015 con ES6. Para estudiar estos nuevos tipos de datos que iremos desgranando a lo largo de estos capítulos nos vamos a ayudar mucho de la consola para ver como funcionan las características de estos nuevos tipos de datos.

El primer nuevo tipo de dato que vamos a ver son los symbols. Symbol es un tipo de dato primitivo, como lo son los strings, numbers, booleans… introducido después de ES6, y es muy peculiar. Una vez que declaramos un tipo de dato como symbol, su valor se va a mantener privado y para uso interno. Generalmente los symbols suelen agregarse como características de objetos, como una propiedad del mismo, y se va a mantener privada.

Para la declaración de un symbol no podemos usar el operador new, sino que directamente mandamos a llamar a la función constructora, que se denomina symbol().

Los symbols nos permiten crear identificadores únicos, identificadores de referencia. La forma de crearlos es la siguiente.

Ejm

let id = Symbol("id");
let id2 = Symbol("id2");

Los symbols aceptan como parámetros un número o una cadena de texto, y esos parámetros son una descripción de los mismos, se utilizan a modo de descripción para poder identificar a dicho símbolo.

Ejm

let id = Symbol("id");
let id2 = Symbol("id2");

console.log(id, id2);
console.log(typeof id, typeof id2);
// Nos retorna un tipo de dato primitivo

Nota: Los símbolos suelen declararse para identificar las propiedades de objetos, para evitar colisiones entre propiedades que pudiéramos sobreescribir.

Agregar un symbol a un objeto

Lo ideal es declararlo en MAY, como si fuera una constante, ya que es un tipo de dato que en teoría no va a cambiar.

Ejm

const NOMBRE = Symbol()

const persona = {
[NOMBRE]: "Francisco",

};

Dentro de un objeto lo tenemos que incluir entre corchetes, y de esta manera hemos  construido el símbolo. Veamos como imprimir este objeto.

Ejm

console.log(persona);

Nos indicará que hay un tipo de dato que es symbol.

Después de crear nuestro símbolo vamos a crear una propiedad con el mismo nombre, y vemos lo que ocurre.

Ejm

persona.NOMBRE = "Francisco Paredes";

console.log(persona);
// Imprimirá el symbol por un lado y la propiedad NOMBRE por otro

Ejm completo

constNOMBRE = Symbol("nombre");

constpersona = {
 [NOMBRE]:"Francisco",
}

console.log(persona);

persona.NOMBRE = "Francisco Paredes";

console.log(persona);

Para mandar a llamar a un symbol tenemos que utilizar, no la notación del punto, sino la notación de los corchetes, de la siguiente forma.

console.log(persona[NOMBRE]);

Nota: Los symbols funcionan como si fueran propiedades privadas. Esta propiedad nos la facilita Javascript para poder ocultar ciertos datos.

Crear métodos que hacen referencia a un symbol

Para crear metodos dentro de un objeto que hagan referencia a un symbol, hacemos lo siguiente.

Ejm

cont SALUDAR = Symbol("saludar");

persona[SALUDAR] = function() {
   console.log("Hola que tal");
}

Llamar a un método tipo symbol de un objeto

La sintaxis sería la siguiente.

Ejm

console.log(persona);
persona[SALUDAR]();

Los paréntesis van fuera de los corchetes.

Recorrer las propiedades de un objeto que incluye symbols

Veamos un ejm para entenderlo.

Ejm

for(let propiedad in persona) {
   console.log(propiedad);
   console.log(persona[propiedad);
}

No va a imprimir los symbols, ya que estos se comportan como propiedades privadas, por lo que no se van a imprimir en pantalla.

Para ver todos los elementos, incluyendo los symbols, existe un método, que cuelga de Object. Veamos la sintaxis que tendríamos que utilizar.

console.log(Object.getOwnPropertySymbols(persona));
// Nos muestra la lista de symbols que tengamos a manera de Array

Resumen

La mayoría de los usos de symbol es crear elementos privados dentro de un objeto, y que también su referencia va a ser única.

Ejm completo

const NOMBRE = Symbol("nombre");
const SALUDAR = Symbol("saludar");

const persona = {
   [NOMBRE]:"Francisco",
   NOMBRE:"Francisco Paredes",
   edad:22,
   SALUDAR]:function(){
      console.log(`Hola, me llamo ${[NOMBRE]}`);
   }
}

for (const propiedad in persona) {
   console.log(propiedad);
   console.log(persona[propiedad]);
}

// Mostrar todos los symbols del objeto persona
console.log(Object.getOwnPropertySymbols(persona));