DEV Community

Cover image for Nuevos tipos de datos en Javascript Records & Tuples
Brian Santeliz
Brian Santeliz

Posted on • Edited on

Nuevos tipos de datos en Javascript Records & Tuples

¡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"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"}]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Genial! incluso con records/tuples anidados.

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

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"
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]}"
Enter fullscreen mode Exit fullscreen mode

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()]: #{} }; 
Enter fullscreen mode Exit fullscreen mode

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 ;).

Referencias

Top comments (5)

Collapse
 
apol0x profile image
Apol0x • Edited

Gracias por la noticia!
Aún así no veo que sea algo demasiado útil sinceramente 🤷🏻‍♂️
Pero lo dicho gracias por la info!!

Collapse
 
racfenix2020 profile image
RACFENIX2020

no tiene mucha utilidad? cuando haces comparaciones entre conjuntos que tienen mutabilidad aunque tengan los mismos elementos y valores, siempre el resultado sera false, por el contrario cuando lo haces con variables inmutables como en este caso los Record y las Tuplas tendrias un resultado True, esto es algo que ni diversos métodos como el freeze te proporcionaban, por consiguiente el Perfomance que se obtendra en comparaciones debe ser extremadamente alto, como también esta el hecho de que podras hacer conversiones de datos que recibas y dicha conversion te mantendra inmutabilidad asegurada suponiendo un caso particular que sea una llamada para solo mostrar datos en un template, donde solo necesitas tener el Read de un Crud y no las demas funcionalidades o metodos, asi que solo lectura es mas que suficiente, entre muchas mas utilidades que se podran conseguir al tenerlo oficialmente en la nueva version de Ecmascript de forma nativa, asi que es cuestion de tener un contexto mas amplio de las cosas

Collapse
 
briansanteliz profile image
Brian Santeliz

Hey muchas gracias. Si es cierto que de momento no tiene mucha utilidad sin embargo en un futuro si que la tendrá, en principio porque se están añadiendo datos inmutables que son primitivos al lenguaje. Algo que le hacia falta, un ejemplo podría ser en React cuando creas un componente y le defines una record como estado, luego pasas este record como prop a otro componente y el estado de ese prop no se podrá mutar, algo que se busca en esta librería. Así como este hay otros problemas que se pueden solucionar usándolos. Saludos!

Collapse
 
juanjosejuniorg profile image
Juan Jose Junior Gonzalez

Genial bro!

Collapse
 
briansanteliz profile image
Brian Santeliz

Gracias Bro!