DEV Community

Cover image for Javascript - ES6. Symbols.
Victor de Andres
Victor de Andres

Posted on • Originally published at victordeandres.es

Javascript - ES6. Symbols.

Javascript - ES6. Symbols.

Una de las novedades de ES6 – ECMAScript2015 fue añadir un nuevo tipo de dato, symbol. Es verdad que desde el lanzamiento de este nuevo standard de javascript allá por Junio de 2015 ha pasado bastante tiempo, pero al igual que otras características de ES6 las cuales utilizamos habitualmente. Por ejemplo las arrow functions, los template strings, o el uso de let y const para definir variables, por poner sólo algunos ejemplos, el uso de symbol es residual por no decir inexistente.

¿Qué es Symbol?

Lo primero que debemos es saber qué es symbol. Symbol es nuevo tipo de dato de JavaScript que se engloba dentro de los tipos primitivos, que son aquellos tipos de datos que son inmutables. Recuerda, en javascript los tipos inmutables son: boolean, null, undefined, number, string y por supuesto symbol, que acabamos de incluir en esta lista de tipos.

Otra característica de este nuevo tipo es además de ser inmutable es que siempre es un tipo único.

Cuando definamos un nuevo valor de tipo symbol podremos asociar un valor de tipo string o undefined que nos servirá únicamente como descripción.

const variable = Symbol(test);

La función Symbol() no es un constructor por ello si utilizamos la siguiente sintaxis para crear una nueva variable de tipo symbol obtendremos un error.

const variable = new Symbol(test);  // output: TypeErrpor

Un ejemplo sencillo.

Si definimos dos variables con el mismo valor y las comparamos obtendremos true como respuesta.

const valor_1 = test
const valor_2 = test
console.log(valor_1 === valor_2 );          // output: true

En cambio, realizando esta misma operación definiendo las variables como de tipo symbol obtendremos false.

const valor_1s = Symbol(test)
const valor_2s = Symbol(test)
console.log(valor_1s === valor_2s);     // output: false

Recuerda que anteriormente he indicado que al tipo symbol podemos asociar un tipo string como descripción, en este ejemplo ‘test’ es una descripción para ambas variables.

Sí mostramos por la consola el valor que tenemos almacenado en la variable valor_1s obtendremos los siguiente:

console.log(valor_1s);                  // output: Symbol(test)

Cómo nos puede ayudar symbol.

Ya hemos descrito como es el nuevo tipo de dato symbol, y sus características. A continuación, veamos algunas situaciones donde symbol nos puede ayudar.

Evitar duplicaciones.

Dado que las variables de tipo symbol son únicas e inmutables nos puede ayudar a evitar las duplicaciones al extender funcionalidades de objetos y clases.

Veámoslo con un ejemplo. Supongamos que tenemos el siguiente objeto.

const vehiculo = {
                motor: combustion,
                cv: 150,
                puertas: 3
}

Si quisiéramos añadir un nuevo motor eléctrico a nuestro vehículo, para hacerlo híbrido.

vehiculo.motor = electrico;

Cuando fuéramos a leer las propiedades de nuestro vehículo. Pensaríamos que el vehículo es eléctrico no híbrido.

console.log(vehiculo);
// output: { motor: ‘electrico’, 
//           cv: ‘150’,
//           puertas: 3 }

Pero si partimos del objeto inicial y creamos una nueva propiedad de tipo symbol con el identificador motor y se la añadimos a nuestro objeto vehículo.

const motor = Symbol(motor);
vehiculo[motor] = electrico;

Al ver las propiedades del objeto obtendremos la siguiente respuesta.

Console.log(vehiculo);
// output: { 
//            motor: ‘combustion’,
//            cv: ‘150’,
//            puertas: 3,
//            Symbol(motor): ‘electrico’ }

Simular propiedades/métodos privados.

Otra característica de symbols es que son no-enumerables, por ello los hacen inaccesibles cuando hacemos un loop, for … in, o utilizamos el método Object.getOwnPropertyNames().

Si hacemos un loop para ver las propiedades de nuestro objecto el resultado que obtenemos es el siguiente:

for ( características in vehiculo ) {
    console.log(`${caracteristicas }: ${ vehículo[caracteristicas]} `);
}
// output
// motor: combustion
// cv: 150
// puertas: 3

Podemos observar sólo hemos obtenido las propiedades, motor, cv y puertas. No vemos el valor de la propiedad Symbol(motor).

A la vista del resultado anterior y al ser no-enumerables puedes pensar que en un objeto o clase puedes hacer propiedades o métodos privados. Pero no es así.

Podríamos definir a estas propiedades o métodos como semiprivados ya que, si tenemos acceso a ellos, haciendo un acceso directo a ellas.

console.log(vehiculo[motor]); // output: electrico

O podemos enumerar todas las propiedades de tipo symbol en nuestro objeto si utilizamos el método Object.getOwnPropertySymbols()

console.log(Object.getOwnPropertySymbols(vehiculo)); // [Symbol(motor)]

Es más, si quisiéramos obtener todas las propiedades de nuestro objeto o métodos de nuestra clase, independientemente de que sean o no de tipo symbol sin hacer un join de ambos métodos Object.getOwnPropertyNames() y Object.getOwnPropertySymbols(). Podemos utilizar el método ownKeys del objeto Reflect que nos devolverá un array con todos los valores.

console.log(Reflect.ownKeys(vehiculo)); 
// output: [motor, cv, puertas, Symbol(‘motor’)]

Conclusión.

Tal vez la utilización de este funcionalidad de Javascript no sea aún muy extendida, ya que las ocasiones en la que puedes hacer un uso de este tipo de datos es muy concreto. Sin embargo entiendo que es importante conocer las características y uso de este tipo datos para conocer más en profundidad este lenguaje y aprovechas todas las funcionalidades que nos aporta para hacer un código mejor y más legible.

Top comments (0)