DEV Community

loading...
Cover image for Nuevos tipos de datos en Javascript Records & Tuples

Nuevos tipos de datos en Javascript Records & Tuples

briansanteliz profile image Brian Santeliz Updated on ・4 min read

¡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

Discussion (4)

pic
Editor guide
Collapse
apol0x profile image
Apol0x

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

Collapse
briansanteliz profile image
Brian Santeliz Author

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
Collapse
briansanteliz profile image
Brian Santeliz Author

Gracias Bro!