Nuevos tipos de datos en Javascript Records & Tuples

Brian Santeliz — Sat, 02 Jan 2021 18:35:55 +0000

¡Hola! En este post hablare sobre las nuevas características que serán introducidas al lenguaje JavaScript. En especial sobre los nuevos tipos de datos “Record & Tuple” propuesto en el ECMAScript por Robin Ricard y Rick Button, en estos momentos se encuentran en la fase 2 (2021-01-01) sin embargo pronto cambiara. Esta feature incluye agregar dos tipos de valores primitivos al lenguaje:

Records (similar a un objeto).
Tuplas (similar a un array).

Syntaxis

La sintaxis es similar a los conocidos arreglos y objetos con una sutil diferencia, una almohadilla o signo de hash (#) al comienzo.

const person = #{
  name: "Brian",
  lastName: "Santeliz"
}

const lenguages = #["Javascript", "Python", "Haskell", "Rust"]

Características

De principio no parece nada especial, sin embargo tiene cosas muy interesantes. Te comentare alguna de las características de estos nuevos tipos de datos.

Inmutabilidad

Estos nuevos tipos de datos son inmutables, similar a lo que hace el método object.freeze() con la diferencia de que una vez definido el Record o la Tuple no se podrán cambiar. Esto puede ser muy útil cuando se trabajan con librerías o frameworks que usan el principio de la inmutabilidad como React, además no tendremos que usar otras librerías de terceros como ImmutableJS para realizar estas operaciones.

const person = #{
  name: "Brian",
  lastName: "Santeliz"
}
person.age = "20" // Error
const lenguages = #["Javascript", "Python", "Haskell", "Rust"]
lenguages[0] = "Php" // Error

Estos tipos de datos pueden anidarse entre Records/Tuples y aplican las mismos principios de inmutabilidad.

const hero = #{
  name: "Iron Man",
  movies: #["Avengers", "Civil War", "Avengers: End Game"]
}
const lenguages = # ["Python", "Php", #{name:"JavaScript", creator:"Brendan Eich"}]

Igualdad

Una de las características que más me gustan y estoy seguro que otros desarrolladores también, es la capacidad de poder comparar records y tuples por su valor y no por su referencia. Veamos un ejemplo.

const obj = {name:"Hello"};
const obj2 = {name:"Hello"};

obj === obj2 //false

Aunque estoy comparando dos objetos que son iguales (a excepción del nombre) la comparación devuelve false, esto sucede porque Javascript compara sus referencias y no su valor, cada vez que creas un objeto este tendrá una referencia distinta. Una solución para esto seria, usando el método de JSON.stringify().

const obj = {name:"Hello"};
const obj2 = {name:"Hello"};

JSON.stringify(obj) === JSON.stringify(obj2) 
//true

Sin embargo este método tiene algunos problemas importantes y no es una forma segura y rápida de resolverlo. La buena noticia es que con los Records & Tuples no es necesario ya que estos comparan por el valor y no por su referencia.

const obj = #{name:"Hello"};
const obj2 = #{name:"Hello"};

obj === obj2 //true

const colors = #["red","black","green", "blue"]

colors === #["red","black","green", "blue"]
  //true

Genial! incluso con records/tuples anidados.

const lenguages = #[ "Php", #{name:"JavaScript", creator:"Brendan Eich"}]
lenguages === #["Php", #{name:"JavaScript", creator:"Brendan Eich"}] 
//true

Como mencione anteriormente Los Records y Tuples son datos primitivos en JavaScript, esto se puede comprobar usando la sentencia de typeof.

 typeof #{a: 2, y: 3}
// "record"
typeof #[4,5,4]
//"tuple"

Compatibilidad con propiedades y métodos

Podemos utilizar los métodos que ya conocemos tanto para arreglo como para objetos. Destructuring, Spread & Rest operator, Higher order functions.

const hero = #{
name:"Iron Man ",
creator:"Marvel",
power:"1200"
}
//Destructuring & Rest operator.
const {name:newName, ...others} = hero;
console.log(others)
//{creator: "Marvel", power: "1200"}
const age = 34
const newHero = #{
...others, //syntax spread
age, //short notation
name:"Cap America"
};

const colors = #["yellow", "blue", "red"];
//filter method
const redColor = colors.filter((color)=>color === "red");
console.log(redColor)
//#["red"]

Trabajando con los métodos JSON

Algo que hay que tener en cuenta es que JSON.stringify() trata los Records como objetos y las Tuples como array de manera recursiva. El metodo JSON.parseImmutable() funciona como JSON.parse() pero devuelve Records en lugar de objetos y Tuples en lugar de array nuevamente de manera recursiva.

const recordExample = JSON.parseImmutable('{"x":"Hello","y":["Banana","Apple"]}');
console.log(recordExample);
// #{x: "Hello", y: #["Banana", "Apple"]}

const objExample = JSON.stringify(recordExample);
console.log(objExample);
// "{x: "Hello", y: ["Banana", "Apple"]}"

Consideraciones

Estos nuevos tipos de datos tienen ciertas restricciones que debemos tener en cuenta, alguna de ella son:

Records:
- Las key deben ser strings.
- Los valores deben ser primitivos.
Tuples.
- Los elementos deben ser primitivos (no podemos incluir funciones por ejemplo).

Alguno de estos errores en código serian los siguientes:


//Error, no se pueden tener objetos.
const errorRecordObj = #{
  obj: {
    a: "i'm an object"
  },
};

//Error, no se pueden tener funciones.
const errorRecordFunction = #{
  example: () => alert("Hello World!")
};

//Ningún otro dato que no se un primitivo.
const errorRecordDate = #{
  date: new Date(),
};

const errorRecordClass = #{
  class: new Car(),
};

const errorTupleClass = #[new Car()];

const errorRecordSymbol = #{ [Symbol()]: #{} };

Conclusión

Para finalizar esto post quiero hablarte de los pros y contras que pude traer la nueva sintaxis, aunque en realidad son más los puntos positivos.

Ventajas: La nueva sintaxis es precisa. Es fácil de recordar y no tiene mucha diferencia con los objetos y arreglo, además de las ventajas de comparación por valores y la inmutabilidad.
Desventaja: Una desventaja que le encuentro podría ser que el uso de el carácter alfanumérico (#), puede tender a errores de sintaxis si no se usa la forma correcta. Esta sintaxis también es usada en campos privados de clases.

Eso es todo lo que quería compartirles, si tienes algún aporte o duda puedes comentarla. Puedes ir al Playground creado por Rick Button y ver los ejemplos que realice. Muchas gracias por leer ;).

DEV Community: Brian Santeliz