Estructuras de Datos Inmutables en JavaScript

Clase 38 de 51 • Fundamentos de JavaScript 2017

Resumen

La inmutabilidad de los objetos es algo muy importante para la programación funcional.

El operador === nos ayuda a comparar objetos, ejecutando la comparación no directamente a los datos del objeto sino, a la referencia del objeto.

Cuando asignamos un objeto a otro estamos haciendo que ambos apunten a la misma referencia, por eso al modificar un objeto el otro también se verá afectado, porque ambos tienen la misma referencia de memoria.

La inmutabilidad tiene por objetivo hacer que los parámetros de un objeto sean no modificables o inmutables

Si quieres aprender más sobre inmutabilidad de objetos en JavaScript en la sección de Enlaces dejamos el link de una librería diseñada por Facebook que nos permite crear distintos tipos de objetos inmutables

Fernando Ruiz

student•

Al terminar dice: en el proximo vídeo veremos el “debouncing”… pero ya pasamos a otro tema, y no se explica.

Para quien sienta curiosidad, esto es el debouncing:
https://davidwalsh.name/javascript-debounce-function

Básicamente es que tu función haga:
anular un timeout anterior (por si existía)
y crear un timeout nuevo que llame a tu código. (en arrow function, o como sea)

si llamas a tu función una sola vez…
se ejecutará “algo mas tarde” (el tiempo del timeout)

si llamas a tu función dos veces seguidas…
la primera prepara el timeout (pero aún no se ejecuta)
la segunda cancela el timeout y prepara uno nuevo
…por tanto, solo se ejecutará la segunda llamada

Esto sirve para evitar llamar muchas veces a una función,
de modo que no hagas cálculos que inmediatamente van a ser desechados,
puesto que se vuelve a llamar despues para volverse a calcular.

Ejemplo: Window.onResize
si cada vez que se cambia el tamaño de la ventana se re-calculan cosas
(como re-colocar los elementos para que quepan, o similar)
según el usuario va arrastrando el borde, se ejecutará muchas veces.
Con debouncing… solo se ejecutará la última (o si hace una pausa al arrastrar)

En cualquier caso, estaría bien agregar un vídeo con explicación de esto.

Alexis Antonio Moraga Gallardo

student•

Me sumo a tu propuesta para un vídeo explicándolo.
otro uso bastante común es cuando realizamos peticiones asíncronas que se ejecutan con eventos de teclado.

Daniel Sepulveda

student•

Explico que significa el ===

Cuando Javascript nota que se ha escrito una variable con igual valor pero con diferente tipo, es decir cuando tienes una variable a = 4, b = ‘4’ si comparamos este valor de la siguiente manera (a = b) para Javascript esta comparación será igual a True, a esto se le conoce como Coercion, en cambio si comparamos en Javascript de esta manera (a === b) Javascript nos indicará que esta comparación es ** False **, debido a que al hacer el === se le indica a Javascript que no aplique el concepto de Coercion

Manuel Pereira Esaa

student•

Amigo hay una corrección cuando dices:

“comparamos este valor de la siguiente manera (a = b) para Javascript esta comparación será igual a True”

( a = b) esta mal eso es una asignacion la comparacion basica es por medio del doble igual seria asi: (a == b).

Daniel Sepulveda

student•

a = 4 
b = '4'
a == b
true```

Francisco J Jimenez H

student•

ademas de comparar objetos, tambien es para comparar que las variables sean del mismo tipo de dato ?

Yeison Daza

student•

Sí, justo el algoritmo del === compara si es el mismo tipo de dato

Francisco J Jimenez H

student•

gracias por tu respuesta 😃

Julio J Yépez

student•

Mi versión del ejercicio, incluye una clase y un método clone!

console.clear()

class Persona{
  constructor( nombre, edad ){
    this.nombre = nombre
    this.edad = edad
  }
}
Persona.prototype.clone = function(){
  // Persona pudiera ser Object pero no es recomendable modificar el prototype de los tipos de objeto intrínsecos de JS
  return Object.assign({},this)
}

const julio = new Persona('Julio',41)
const julian = julio.clone()

const cumpleanos = function( persona ){
  return persona.edad ++
}

console.log ( julio)
console.log ( cumpleanos(julian) )
console.log ( julio, julian )

Jose Enrique Marquez

student•

Solo me da curiosidad saber el porque utilizaste prototype si estas utilizando una clase, pudiste haber creado un método en la clase.

Julio J Yépez

student•

Quise probar que el método clone podría asignarse directamente a la clase intrínseca Object, y de hecho estaría extendiendo indirectamente todos los objetos de JS que son instancias de Object, pero no es una práctica recomendable.

Alexis Antonio Moraga Gallardo

student•

les comparto mi repositorio en GitHub con el avance del curso

Repositorio

en el estan los ejercicios realizados en clase comentados junto a mis notas personales

/*EN ESTA CLASE VEREMOS ESTRUCTURAS DE DATOS INMUTABLES

En javascript tenemos operadores de
= //asignacion con este operrador asignamos el valor de algo
== //comparacion con este operador estamos comparando dos valores
=== //comparacion de valor y tipo. con este operador podemos comparar objetos, con lo cual sabremos
//si un objeto tiene los mismos atributos y valores que otro

*/

let alexis = {nombre: 'alexis', apellido:'moraga', edad:25}
//creamos un objeto llamado alexis
let otroAlexis = alexis//igualamos el valor del objeto alexis a un objeto llamado otroAlexis
otroAlexis === alexis//pregunntamos si son iguales y esto nos retorna true

otroAlexis.edad = 27//cambiamos la edad de otroAlexis, lo cual como efecto secundario cambia
//la edad de alexis, ya que se esta apuntando al mismo objeto en memoria

function compleanos(persona){//creamos una funcion cunpleaños para sumarle un año a la edad de la persona
  //recivimos a la persona como parametro y le aumentamos un año
  persona.edad++
}
cumpleanos(alexis)/*llamamos la funcion cumpleanos y le pasamos como parametro alexis
esto tiene un efecto secundario en el objeto otro alexis, ya que igualmente es afectado en su
propiedad edad, la cual se aumenta igual que en el objeto alexis
*/
let contador = 0//creamos una variable contador en el scope global
function compleanos2(persona){//creamos una nueva funcion llamada cumpleanos2, la cual suma un año
  //y aumenta un contador no declarado en el scope de la funcion
  contador ++
  persona.edad++
}

cumpleanos2(alexis)
/*llamamos la funcion y tiene el mismo efecto secundario en el objeto otroAlexis, pero ademas accede
al scope global y afecta a la variable contador */

/*Este efecto secundario es conocido como efecto de lado, y afecta a variables u objetos que escapan
al scope de la funcion que estamos ejecutando. Para evitar esto uamos estructuras de datos inmutables
*/

let alexisInmutable = {nombre: 'alexis', apellido:'moraga', edad:25}

cumpleanosInmutable(persona){//creamos la funcion y pasamos como parametro una persona
  const clone = Object.assing({}, persona)
  /*La propiedad assing del objeto Object nos permite clonar un objeto con sus propiedades y valores
  esta recive como parametro un primer objeto al cual agragara las propiedades de el segundo objeto que recive
  el resultado de esta clonacion lo asignamos a una constante llamada clone */
  clone.edad++//sumamos uno a la propiedad clone
  return clone//retornamos clone
}

cumpleanosInmutable(alexisInmutable)
//esto nos retornara 26

alexisInmutable
//pero el objeto alexisInmutable continuara teniendo 25 años, que que este no fue modificado

/*¿Que esta pasando realmente con esta funcion?
en esta funcion estamos reciviendo el objeto persona, y este lo estamos clonando en un objeto completamente nuevo
y es en este nuevo objeto que modificamos las propiedades, con lo cual el objeto persona que usamos como entrada
permanece inmutable(no sufre cambios en sus propiedades), y lo que nos retorna es unnuevo objeto con los cambios realizados
*/

Pedro Escobar

student•

Para quienes no vieron las diferencia entre == y ===
• Operador de igualdad (==)
El operador de igualdad convierte los operandos si no son del mismo tipo, después aplica comparación de igualdad estricta y los devuelve true (verdadero). Por ejemplo:

 1   ==  1     // true
"1"  ==  1     // true
 1   == '1'    // true
 0   == false  // true

• Operador de identidad o igualdad estricta (===)
Este operador devuelve true (verdadero) si los operandos se consideran iguales sin aplicar ningún tipo de conversión. Por ejemplo:

3 === 3   // true
3 === '3' // false
0=== false //false

Juan Martín Seery

student•

Otra solución sería creando un clonador:

let clonador = function (obj) {
 const clone = Object.assign({}, obj);
 return clone;
}

Tenés el objeto

let usuario1 = {nombre: "Fulano", apellido: "De Tal", edad: "20"}

Creas otro objeto idéntico con el clonador

let usuario2 = clonador(usuario)

Los objetos estarán guardados en distintos lugares de la memoria

-> usuario1 === usuario2
<- false

Alexis Antonio Moraga Gallardo

student•

Entiendo el concepto, pero no me queda claro del todo cual seria un caso real para su uso.

Agradecería si alguien me comentase un poco mas sobre esto.

Den ante mano gracias.

Diego Forero

Team Platzi•

Es muy usado en programación funcional, algo que tiene la inmutabilidad de los objetos es que debes crear copias de los objetos para poder modificar los valores por lo tanto siempre puedes saber el estado actual y el estado anterior de un objeto.

Eduardo Rasgado Ruiz

student•

Al manejar metodos numericos o manipular imágenes como con la librería OpenCV, manipular grafos… Necesitamos a veces copiar un objeto y modificarlo para crear nuevos datos, pero queremos preservar el anterior frame, para compararlo con el nuevo frame(en manipulacion de imagenes con OpenCV por ejemplo). Entonces es muy útil tener un clone de un objeto. Para hacerle operaciones y preservar el original.

Nestor Beltran

student•

Que tal comunidad, la verdad no me quedo muy claro el porque querríamos usar la inmutabilidad, ya que sacha menciona que como programadores no queremos que la función modifique al objeto declarado en el scope global, pero porque no voy a querer modificar en este caso la edad del objeto sacha ?, al final al retornar el clone tendría otro objeto pero no entiendo para que quiero eso si bien si modifico a sacha original yo no le veo el problema. saludos 😃

Andrea Rivera Ceballos

student•

Si estoy en lo correcto (corríjanme por favor), la razón por la que se tienen que utilizar técnicas de inmutabilidad en los parámetros, en especial en los objetos pasados a funciones, es porque Javascript recibe sus parámetros de tipo objeto al parecer por referencia y no por valor. Lenguajes como C# reciben sus parámetros (objetos) por valor, por lo cual devuelven una copia del objeto por default. Eso o estoy totalmente perdida?

Fco Castro

student•

Exactamente eso es lo que he entendido yo. Espero como tú que si no es así nos corrijan.
Lo resumo en que cuando se asigna una variable a otra con , = , en verdad NO se está asignando el valor a una variable diferente SINO que lo que se está haciendo es ALGO ASÍ COMO DEJAR UN LINK que simplemente apunta al mismo sitio.

José Vinicio Flores Arias

student•

De verdad JavaScript me ha dejado sorprendido nunca pensé que se podía hacer cosas así, es muy potente en comparación de otros lenguajes, me estoy enamorando ❤️!

Juan Sebastián Angarita

student•

Hola, hay mas videos de programacion funcional? si no es asi, ojala los anexen a los cursos en el futuro

Diego Forero

Team Platzi•

De momento no tenemos videos de programación funcional, esperamos hacer un curso sobre algún lenguaje que adopte este paradigma en un futuro cercano.

Juan Sebastián Angarita

student•

Hola una pregunta estos side effects solo ocurren con los objetos, o tambien con otro tipo de datos?

Diego Forero

Team Platzi•

Como lo menciona sacha aquí https://platzi.com/clases/fundamentos-javascript/concepto/estructuras-de-datos-y-funciones-avanzadas/estructuras-de-datos-inmutables-en-javascript/material/?time=268 la ejecución de la función afecta también las variables o cualquier tipo de dato, esto es lo que se tiene que evitar cuando se programa.

Yomar Esteban Miranda Sarmiento

student•

Últimamente estoy teniendo muchos problemas con la plataforma, tengo una buena conexión y aún así los videos se cortan a cada rato, no entiendo que esta pasando.
A alguién más le pasa lo mismo ?

Diego Forero

Team Platzi•

Cambia de server de video en el icono del engrane, con eso debe solucionar tu problema.

Luis Ospina

student•

Se quedo en 5:06 minutos y no siguio

Luis Ospina

student•

Este vídeo se traba mucho, no se puede ver bien.

Jordi Santamaría Portolés

student•

Que problemas puede dar usar la ñ para nombrar variables?

Diego Forero

Team Platzi•

Te puede dar problema de codificación y romper tu aplicación.

Way Solutions

student•

exelente sasha

Brian Bentancourt

student•

El operador === compara si los objetos comparten el mismo espacio en memoria

Oscar Barajas Tavares

Team Platzi•

Me gusta definirlo de la siguiente forma: si tiene el mismo tipo y valor.

Sebastian Jesús Bárcenas Reales

student•

Reto : Un buen ejemplo para tratar este tipo de funciones, seria realizar un comparador de situaciones donde los usuarios ingresaran sus datos, por ejemplo estatura peso, entre otros y mediante el algoritmo que queramos devolvamos todas las posibles situaciones a 12 meses.

Estructuras de Datos Inmutables en JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial

La inmutabilidad de los objetos es algo muy importante para la programación funcional.