DEV Community: Victor Hugo Aguilar

Desestructuración en ES6, consejos para obtener un código limpio

Victor Hugo Aguilar — Wed, 15 Mar 2023 08:33:53 +0000

Introducción

¿Estás cansado de escribir código extendido y difícil de leer? ¿Quiere mejorar sus habilidades de codificación y hacer que su código sea más legible y conciso? ¡No busque más! En este artículo, me sumergiré en el mundo de la desestructuración de ES6 y le mostraré cómo usarlo para escribir código más limpio y eficiente.

Desde la desestructuración de objetos y matrices hasta el uso de valores predeterminados y el operador de propagación, lo cubriremos todo. Prepárate para dominar el arte de la codificación limpia y concisa 🚀.

Desestructurando objetos 🔧

Una de las formas más comunes de usar la desestructuración es asignar propiedades de un objeto a las variables. Por ejemplo, en lugar de escribir:

const person = { name: 'John', age: 30 };
const name = person.name;
const age = person.age;

Puede usar la desestructuración para hacer que el código sea más conciso:

const person = { name: 'John', age: 30 };
const { name, age } = person;

Desestructurando Arrays 🔳

Al igual que con los objetos, también puede usar la desestructuración para asignar elementos de una matriz a las variables. Por ejemplo, en lugar de escribir:

const numbers = [1, 2, 3];
const first = numbers[0];
const second = numbers[1];
const third = numbers[2];

Puede usar la desestructuración para hacer que el código sea más conciso:

const numbers = [1, 2, 3];
const [first, second, third] = numbers;

Valores por defecto 📈

La desestructuración también le permite asignar valores predeterminados a las variables en caso de que el valor no esté definido. Por ejemplo, en lugar de escribir:

const person = { name: 'John' };
let age = person.age || 25;

Puede usar la desestructuración para hacer que el código sea más conciso:

const person = { name: 'John' };
const { age = 25 } = person;

Renombrar las variables 🔀

A veces, los nombres de propiedades o variables que está desestructurando no coinciden con los nombres que desea usar en su código. En estos casos, puede utilizar los dos puntos (:) para cambiar el nombre de la variable. Por ejemplo, en lugar de escribir:

const person = { firstName: 'John', lastName: 'Doe' };
const first = person.firstName;
const last = person.lastName;

Puede usar la desestructuración para hacer que el código sea más conciso y semántico:

const person = { firstName: 'John', lastName: 'Doe' };
const { firstName: first, lastName: last } = person;

Desestructuración anidada 🕸️

La desestructuración también se puede utilizar en matrices y objetos anidados. Por ejemplo, en lugar de escribir:

const data = {
    results: [
        {
            title: 'Article 1',
            author: {
                name: 'John',
                age: 30
            }
        },
        {
            title: 'Article 2',
            author: {
                name: 'Jane',
                age: 25
            }
        }
    ]
};
const firstResultTitle = data.results[0].title;
const firstAuthorName = data.results[0].author.name;
const firstAuthorAge = data.results[0].author.age;

Puede usar la desestructuración anidada para que el código sea más conciso:

const data = {
  results: [
    {
      title: 'Article 1',
      author: {
        name: 'John',
        age: 30
      }
    },
    {
      title: 'Article 2',
      author: {
        name: 'Jane',
        age: 25
      }
    }
  ]
};

const {
    results: [{ 
                        title: firstResultTitle, 
                        author: { 
                            name: firstAuthorName, 
                            age: firstAuthorAge } 
                        }]
} = data;

Parámetros de funciones de desestructuración 🔥

La desestructuración también se puede utilizar en parámetros de función. Por ejemplo, en lugar de escribir:

function createPerson(options) {
const name = options.name;
const age = options.age;
// ...
}

createPerson({ name: 'John', age: 30 });

Puede usar la desestructuración para hacer que el código sea más conciso y semántico:

function createPerson({ name, age }) {
// ...
}

createPerson({ name: 'John', age: 30 });

Otro ejemplo que utilizaremos desde un listener en los eventos,

// El Objeto que llega es 

/*
event : {
    detail: { 
        value: 'clave a mostrar'
    }
}
*/

// En este caso definimos valores por defecto pero por
// lo general los eventos si son escuchado por una acción
// seguramente tengan datos y no haga falta declarar los
// valores por defecto.

function _setValue({ detail: { value = "" } = {} } = {}){
    this.clave = value;
};

Operador de desestructuración y propagación 🌀

También puede usar el operador de propagación (...) en combinación con la desestructuración para asignar los elementos restantes de una matriz o las propiedades restantes de un objeto a una variable. Por ejemplo, en lugar de escribir:

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...others] = numbers;
console.log(others); // [3, 4, 5]

Puede usar el operador de propagación y la desestructuración juntos para hacer que el código sea más conciso:

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...others] = numbers;
console.log(others); // [3, 4, 5]

Conclusión

En conclusión, la desestructuración de ES6 es una herramienta poderosa que puede ayudarlo a escribir un código más limpio y legible. Con los trucos y técnicas descritos en este artículo, podrá desestructurar objetos y matrices, usar valores predeterminados, cambiar el nombre de las variables e incluso combinar la desestructuración con el operador de propagación.

Recuerde, la clave para escribir código limpio y conciso es esforzarse siempre por la simplicidad y la legibilidad. Entonces, la próxima vez que esté escribiendo JavaScript, ¡pruebe estos trucos de desestructuración y vea cómo pueden mejorar su código! 💻🚀

Operador spread (de propagación) en Javascript ES6

Victor Hugo Aguilar — Tue, 14 Mar 2023 09:06:18 +0000

Introducción

Qué es el operador de propagación en ES6, la nueva versión de Javascript, conocido también como spread operator.

En este artículo vamos a conocer un nuevo operador de Javascript, que nos oferce la versión de ECMAScript 2016, ES6, ya disponible en todos los navegadores modernos. Se trata del "spread operator" u operador de propagación, que nos puede ayudar a ahorrar unas cuantas líneas de código en muchas ocasiones, así como crear un código más consistente.

Para los que conocieron el operador rest, en el pasado artículo del manual de Javascript ES, cabe decir que es más o menos la operación contraria. Mientras que el operador rest genera un array a partir de una lista de valores, el operador spread genera una lista de valores a partir de un array.

Además, estos operadores tienen en común entre sí el utilizar exactamente la misma sintaxis de los tres puntos seguidos. Entonces, si el Rest operator es "..." y es exactamente el mismo código que usamos para el spread operator "..." ¿Cómo lo distinguimos? La diferencia está en que el rest operator lo usas en la cabecera de una función, al implementarla y el spread operator lo usas en la invocación. Lo veremos mejor con un ejemplo.

Spread operator en funcionamiento

Para nuestro ejemplo vamos a hacer uso de la función min() de la clase Math de Javascript. Por si no lo sabes, esta función espera recibir cualquier número de parámetros numéricos y devuelve el que tenga el valor menor.

Por ejemplo, podemos invocarla así.

Math.min(2, 5, 7, 1, 9);

Esto nos devolverá el valor 1, que es el mínimo de los parámetros enviados.

Para hacer uso del spread operator necesitamos partir de un array y conseguiremos convertir ese array en una lista de parámetros, de la siguiente manera.

let miArray = [2, 5, 7, 1, 9];
let minimo =Math.min(...miArray);

Como puedes ver, el operador de propagación se idéntico al operador rest. Lo único que aquí lo estamos usando en la invocación de una función.

Uso del operador rest en combinación con el operador spread

Estos dos operadores muchas veces los encontramos de la mano, usados en el mismo ejemplo.

Por ejemplo, pongamos una función que recibe cualquier número de cadenas por parámetro y nos devuelve un array con esas mismas cadenas, pero eliminados los espacios en blanco antes y después de la cadena.

Comencemos por refrescar la memoria, viendo la aplicabilidad del operador Rest en este ejemplo.

function limpiarEspacios(...cadenas) {
  for (let i=0; i<cadenas.length; i++) {
    cadenas[i] = cadenas[i].trim();
  }
  return cadenas;
}

En este caso hemos usado el operador "..." en la invocación de una función, luego lo que quiere decir es que una lista de parámetros la convertirá en un array.

Podemos ver el ejemplo en marcha con este código.

let cadenasLimpias = limpiarEspacios('hola ', ' algo ', ' más');
console.log(cadenasLimpias);

Ejecutando ese código observarás que "cadenasLimpias" es un array de cadenas, eliminadas los espacios.

Pero ¿Qué pasa si las cadenas que queremos limpiar están en un array?

const cadenasOriginales = ['hola ', ' algo ', ' más'];
let cadenasLimpias = limpiarEspacios(cadenasOriginales);

Esto te arrojaría un error, pues dentro de la función se intentará hacer trim() sobre un array y Javascript te diría que "cadenas[i].trim is not a function".

Bien, aquí es donde el operador spread sale al rescate, permitiendo convertir tal array en una lista de parámetros para usar en la invocación de la función.

const cadenasOriginales = ['hola ', ' algo ', ' más'];
let cadenasLimpias = limpiarEspacios(...cadenasOriginales);

En este caso todo irá bien, ya que el array se convertirá en una lista de parámetros, justo lo que necesita la función limpiarEspacios().

Nuevamente queremos insistir en que el operador es exactamente el mismo, es decir, usa la misma sintaxis. Solo que su función será diferente si la usas en la definición de una función o en su invocación. Al definir una función se llama "rest operator" y al invocarla se llama "spread operator".

Otros usos de spread operator

El operador de propagación también se puede usar al definir literales de array en base a otros arrays. Por ejemplo, mira el código siguiente.

let misConocimientos = ['variables', 'operadores', 'estructuras de control', 'funciones'];
let aprendido = ['rest operator', 'spread operator'];
let misConocimientosAmpliados = [...misConocimientos, ...aprendido, 'otra cosa más'];

Para la creación del array "misConocimientosAmpliados, definido como un literal, estamos usando dos veces el operador de propagación. Una para incorporar todos los valores de "misConocimientos", como una lista, y otra para incorporar como otra lista de valores el array "aprendido".

Conclusión

Esperamos que estas explicaciones sobre el operador spread, también llamado operador de propagación, te sirvan para incorporar nuevas alternativas y mejoras en tu código Javascript. Son muy útiles ya que nos permiten realizar de una manera muy cómoda cosas que antes de ES6 debeíamos hacer usando más líneas de código.

Aunque comparta sintaxis con el operador rest de ES6, esperamos que no te lies al usarlo y puedas distinguir qué hace cada cual. Rest sirve para convertir una lista en un array y spread para hacer el paso contrario, a partir de un array generar una lista.

Spread Operator en Arrays

Tal como se comentó en el post “Clonando Objetos en JavaScript (I)” cuando asignamos un objeto o un array a una variable no se crea una copia si no que se guarda una referencia hacia a la original, por tanto, cualquier modificación en la variable asignada también afectará al objeto u array original. Una forma sencilla y rápida de evitar esto es utilizar el operador de propagación o Spread Operator de ES6 (Figura 1).

const cars = ['Ford', 'Seat', 'Renault'];
const copyOfCars = [ ...cars];
copyOfCars[2] = 'Opel';
// cars = ['Ford', 'Seat', 'Renault'];
// copyOfCars = ['Ford','Seat','Opel'];

¡ Pero cuidado! Si alguna de las propiedades del objeto original es un array u otro objeto no se clonaría, por lo que spread operator solo no nos serviría para hacer una copia profunda del objeto original (sólo para objetos planos).

Spread Operator también nos da la posibilidad de concatenar arrays o añadir valores a un array dado (Figura 2).

const numbers = [1,2,3];
const newNumber = [...numbers, 4, 5];
console.log(newNumber); // [1,2,3,4,5]

const letter = ['a','b','c'];
const word = ['cat', 'dog', 'horse'];
const letterAndWords = [ ...letter, ...word];
console.log(letterAndWords);
// ['a','b','c', 'cat', 'dog', 'horse']

Además el spread operator también nos puede ser útil para pasar todos los valores de un array como argumentos de una función dada (Figura 3).

function makeWords(...sounds) {
    console.log(sounds);
}

const vowels = ['a','e','i','o','u'];
makeWords(vowels); //sounds = ['a','e','i','o','u']

Spread Operator en Objetos

Del mismo modo que con los arrays podemos usar spread operator para el clonado de objetos, de forma que si modificamos una propiedad en el objeto deportivo, el objeto original coche permanecerá inalterable.

const coche = {
    marca: 'seat',
    modelo: 'leon',
    puertas: 5
}
const deportivo = { ...coche, puertas: 3 }
console.log(deportivo); // { marca: 'seat', modelo: 'leon', puertas: 3 }

De la misma forma podemos concatenar o fusionar objetos (Figura 5).

const coche = {
    marca: 'seat',
    modelo: 'leon',
    puertas: 5
}
const motor = {
    cilindros: 4,
    caballos: 120
}
const propCoche = { ...coche, ...motor}
console.log(propCoche); 
// { marca: 'seat', modelo: 'leon', puertas: 5, cilindros: 4, caballos: 120 }

Diferencia entre forEach() y map()

Victor Hugo Aguilar — Fri, 10 Mar 2023 09:02:59 +0000

ForEach

El método forEach() ejecuta la función que se le pasa por parámetro para cada elemento del array. Este método no devuelve nada, por lo tanto, si intentamos guardar su ejecución en una variable lo que ocurrirá es que esa variable tomará el valor de undefined.

En el siguiente ejemplo, en cada iteración el valor de item que se le pasa por parámetro a la función, tomará los valores del 1 al 4 y luego se irán imprimiendo por consola.

[1, 2, 3, 4].forEach(function (item) {   
     console.log(item); 
});
// Imprimirá por consola
1
2
3
4

En este otro ejemplo voy a guardar la ejecución del forEach() en una variable y lo que va a ocurrir es que esa variable tomará el valor de undefined, debido a que forEach() no devuelve nada.

let numbers = [1, 2, 3, 4].forEach(function (item) {   
     console.log(item); 
});
console.log(numbers);
//Devuelve que numbers es undefined

Creando un forEach()

Una manera de comprender mejor las funciones propias de Javascript es intentar crear funciones que simulen sus comportamientos. En este caso vamos a crear nuestro propio forEach().

La función que simula el comportamiento de la función forEach() la denominaremos myForEach(). Esta función acepta dos parámetros, una función y un array de elementos. Utilizamos un bucle for para iterar sobre cada elemento del array y además aplicaremos la función que pasamos por parámetro a cada elemento.

function myForEach(f, items){ 
    for(let i = 0;i < items.length;i++){
         f(items[i]);
    }
}
myForEach(function(item) { console.log(item); }, [1,2,3,4]);
// Imprimirá por consola
1
2
3
4

Hay que recalcar que aunque nuestra función anterior tuviera un return, no va a devolver ningún valor. Lo veremos en el siguiente ejemplo.

var result = myForEach(function (item) {
     console.log(item * 2);
     return item * 2;
}, [1,2,3,4]);
// Imprimirá por consola
2
4
6
8
console.log(result);
// Devolverá que result es undefined

Map

El método map() ejecuta la función que se le pasa por parámetro para cada elemento del array. A diferencia del método forEach() este método devuelve un nuevo array con los resultados de aplicar la función a cada elemento.

En el siguiente ejemplo, al igual que con el método forEach, en cada iteración el valor de item que se pasa por parámetro a la función, tomará los valores del 1 al 4. A cada elemento se le aplicará la función y su nuevo valor se irá acumulando en un nuevo array que se almacenará en la variable result. Es importante utilizar el return dentro de la función, porque en caso contrario obtendremos un nuevo array lleno de undefined.

var result = [1,2,3,4].map(function (item) { return item * 2; });
console.log(result);
// Resultado
[2,4,6,8]

Creando un map()

Vamos a crear una función map(), al igual que hicimos con el forEach(). De esta manera comprenderemos mejor su funcionamiento.

La función que simula el comportamiento de la función map() la he denominado myMap(). Esta función acepta dos parámetros, una función y un array de elementos. Creamos un array vacío denominado result y luego utilizaremos un bucle for para iterar sobre cada elemento del array denominado items. En cada iteración aplicaremos la función que hemos pasado por parámetro a cada elemento e iremos guardando los valores en result.

function myMap(f, items){
    let result = [];
    for (let i = 0;i < items.length;i++){
       result.push(f(items[i]));
    }
    return result;
}
var result = myMap(function(item){ return item * 2; }, [1,2,3,4]);
console.log(result)
// Resultado
[2, 4, 6, 8]

Conclusión

La verdad es que es importante entender la diferencia entre el método forEach y el map, ya que eso te permite saber cuando utilizar uno o cuando utilizar otro.

El método forEach() está pensado para recorrer colecciones, mientras que el método map() está pensado para iterar sobre una colección dada, pero con el objetivo de tratar esa colección y devolver una nueva con los elementos modificados a partir de la anterior.

Referencias

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

Composition API: Ref vs Reactive

Victor Hugo Aguilar — Tue, 08 Nov 2022 15:59:48 +0000

La característica más importante de Vue 3 es la API de composición. Esta ofrece un enfoque alternativo para crear componentes que es muy diferente a la API de opciones existente. No tengo ningún problema en admitir que cuando lo vi por primera vez, no lo entendí. Cuanto más lo uso, más sentido tiene. Si bien no reescribirá aplicaciones completas con la API de composición, le hará pensar en cómo crear componentes y componer la funcionalidad en el futuro.

Ahora viene una de las cuestiones que me planteo al ir descubriendo la api de composición, y es cuando utilizar ref o cuando utilizar reactive en la declaración de las propiedades. Aqui nos centraremos en Ref vs Reactive y no en la mecánica de la API de composición.

Estados reactivos en vue 2

Cuando desee que Vue realice un seguimiento de los cambios en los datos, debe declarar esa propiedad dentro de un objeto que se devuelve desde la función de datos.

<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
    data() {
        return {
            title: "Hello, Vue 🫡!",
        };
    },
};
</script>

Por debajo, Vue 2 analiza cada propiedad y usa Object.defineProperty() para crear captadores y definidores para cada dato que necesita para realizar un seguimiento. Esta es una explicación básica del proceso, pero lo que quiero transmitir es que no es magia. No puede simplemente crear datos en cualquier lugar y esperar que Vue realice un seguimiento de ellos. Debes seguir el proceso de definición en la función data().

REF VS REACTIVE

Con la API de opciones, tenemos que seguir algunas reglas al definir datos reactivos y la API de composición no es diferente. No puede simplemente declarar datos y esperar que Vue sepa que le gustaría realizar un seguimiento de los cambios. En el siguiente ejemplo, definí un título y lo devolví desde la función setup() para que esté disponible en la plantilla.

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  export default {
    setup() {
      let title = "Hello, Vue 3 🫡!";
      return { title };
    }
  };
</script>

Esto funcionará, pero la propiedad del título no es reactiva. Esto significa que si algo cambia de título, esos cambios NO se reflejarán en el DOM. Digamos, por ejemplo, que desea actualizar el título después de 5 segundos, lo siguiente NO funcionará.

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  export default {
    setup() {
      let title = "Hello, Vue 3 🫡!";

      setTimeout(() => {
        title = "Esto nunca se mostrará 🤬";
      }, 5000);

      return { title };
    }
  };
</script>

Para solucionar el ejemplo anterior, podemos importar {ref} desde 'vue' y usar ref(), que marcará esa variable como datos reactivos. Por debajo en Vue 3, creará un Proxy.

template>
  <h1>{{ title }}</h1>
</template>

<script>
  import { ref } from "vue";

  export default {
    setup() {
      const title = ref("Hello, Vue 3 🫡!");

      setTimeout(() => {
        title.value = "Nuevo título este sí,😜";
      }, 5000);

      return { title };
    }
  };
</script>

Cuando se trata de ref vs reactive existen diferentes utilizaciones, como por ejemplo la primera tiene que ver con la creación de un componente como el que mencionamos anteriormente y necesita definir datos reactivos. La segunda es cuando está creando funciones componibles que usarán funciones o componentes

REF

Si desea convertir un tipo de datos primitivo en una propiedad reactiva, ref() será su primera opción. Si necesita un repaso, los siete tipos de datos primitivos en JavaScript son:

String
Number
BigInt
Boolean
Symbol
Null
Undefined

import { ref } from "vue";

export default {
    setup() {
        const title = ref("🤭");
        const one = ref(1);
        const isValid = ref(true);
        const foo = ref(null);
    },
};

Del ejemplo anterior, teníamos un String llamado título, por lo que ref() era una buena opción para declarar datos reactivos

import { ref } from "vue";

export default {
    setup() {
        const title = ref("Hello, Vue 3 🫡!");

        setTimeout(() => {
            title.value = "New Title 🤖";
        }, 5000);

        return { title };
    },
};

¿Por qué usar una const para el título cuando el valor va a cambiar? ¿No deberíamos usar let aquí? Si fuera a console.log(título), es posible que esperara ver el valor ¡Hola, Vue 3!, en su lugar, obtiene un objeto que se ve así:

{_isRef: true}
value: (...)
_isRef: true
get value: ƒ value()
set value: ƒ value(newVal)
__proto__: Object

ref() toma un valor interno y devuelve un objeto ref reactivo y mutable. El objeto ref tiene una sola propiedad .value que apunta al valor interno. Esto significa que si desea acceder o mutar el valor, debe usar title.value. y debido a que este es un objeto que no cambiará, he decidido declararlo como const.

REF UNWRAPPING

La siguiente pregunta que podría hacerse es "¿Por qué no tenemos que hacer referencia a .value en la plantilla"?

<template>
    <h1>{{ title }}</h1>
</template>

Cuando se devuelve una referencia como una propiedad en el contexto de representación (el objeto devuelto por la configuración()) y se accede a ella en la plantilla, se desenvuelve automáticamente en el valor interno. No es necesario agregar .value en la plantilla.

Las propiedades calculadas funcionan de la misma manera, por lo que si necesita el valor de una propiedad calculada dentro del método setup(), deberá usar .value

REACTIVE

Acabamos de ver algunos ejemplos del uso de ref() cuando desea definir datos reactivos en valores primitivos. ¿Qué sucede si desea crear un objeto reactivo? En ese caso, aún podría usar ref() pero debajo, solo está llamando a reactive(), así que me limitaré a usar reactive().

Por otro lado, ese reactivo () no funcionará con valores primitivos. reactive() toma un objeto y devuelve un proxy reactivo del original. Esto es equivalente a Vue.observable() de 2.x y se le cambió el nombre para evitar confusiones con los observables de RxJS.

import { reactive } from "vue";

export default {
    setup() {
        const data = reactive({
            title: "Hello, Vue 3 🫡!",
        });

        return { data };
    },
};

La gran diferencia aquí es cuando desea acceder a los datos definidos usando reactivo() en su plantilla. En el ejemplo anterior, los datos son un objeto que contiene una propiedad denominada título. Deberá hacer referencia a data.title en su plantilla:

<template>
  <h1>{{ data.title }}</h1>
</template>

<script>
  import { ref } from "vue";

  export default {
    setup() {
      const data = ref({
        title: "Hello, Vue 3 🫡!"
      });

      return { data };
    }
  };
</script>

Ejemplo de creación composable logic

Se le ha encomendado la tarea de crear alguna lógica que realice un seguimiento de la posición del mouse de un usuario. También necesita la capacidad de reutilizar esta lógica en cualquier componente que lo necesite. Crea una función de composición que realiza un seguimiento de las coordenadas x e y y luego las devuelve al consumidor.

import { ref, onMounted, onUnmounted } from "vue";

export function useMousePosition() {
    const x = ref(0);
    const y = ref(0);

    function update(e) {
        x.value = e.pageX;
        y.value = e.pageY;
    }

    onMounted(() => {
        window.addEventListener("mousemove", update);
    });

    onUnmounted(() => {
        window.removeEventListener("mousemove", update);
    });

    return { x, y };
}

Si desea consumir esta lógica en un componente, puede llamar a la función, desestructurar el objeto de retorno y luego devolver las coordenadas x e y a su plantilla.

<template>
  <h1>Use Mouse Demo</h1>
  <p>x: {{ x }} | y: {{ y }}</p>
</template>

<script>
  import { useMousePosition } from "./use/useMousePosition";

  export default {
    setup() {
      const { x, y } = useMousePosition();
      return { x, y };
    }
  };
</script>

Esto funcionará, pero cuando echó un vistazo a esta función, decidió refactorizar x e y en un objeto de posición:

import { ref, onMounted, onUnmounted } from "vue";

export function useMousePosition() {
    const pos = {
        x: 0,
        y: 0,
    };

    function update(e) {
        pos.x = e.pageX;
        pos.y = e.pageY;
    }

    // ...
}

El problema de este enfoque es que el consumidor de la función de composición debe mantener la referencia al objeto devuelto en todo momento para conservar la reactividad. Esto significa que el objeto no puede ser desestructurado o esparcido:

// consuming component
export default {
    setup() {
        // reactivity lost!
        const { x, y } = useMousePosition();
        return {
            x,
            y,
        };

        // reactivity lost!
        return {
            ...useMousePosition(),
        };

        // this is the only way to retain reactivity.
        // you must return `pos` as-is and reference x and y as `pos.x` and `pos.y`
        // in the template.
        return {
            pos: useMousePosition(),
        };
    },
};

Sin embargo, esto no significa que no puedas usar reactivos. Hay un método toRefs() que convertirá un objeto reactivo en un objeto simple, donde cada propiedad en el objeto resultante es una referencia que apunta a la propiedad correspondiente en el objeto original.

function useMousePosition() {
    const pos = reactive({
        x: 0,
        y: 0,
    });

    // ...
    return toRefs(pos);
}

// x & y are now refs!
const { x, y } = useMousePosition();

Como puede ver, hay algunas cosas a tener en cuenta al crear funciones de composición. Mientras comprenda cómo se pueden consumir sus funciones, debería estar bien.

referencias

Creación de objecto literal en javascript

Victor Hugo Aguilar — Mon, 24 Oct 2022 11:42:27 +0000

Remplazar if...elseif..elseif o switch por object literal

En muchos lenguajes de programación, la switch declaración existe, pero ¿debería seguir existiendo? Si es un programador de JavaScript, a menudo salta dentro y fuera de los objetos, creándolos, instanciandolos y manipulándolos.

Los objetos son realmente flexibles, están en el corazón de casi todo en JavaScript, y usarlos en lugar de la switchdeclaración ha sido algo que he estado haciendo últimamente.

If...elseif...elseif

Cuando comienza a ver muchas else if declaraciones, es probable que algo esté mal y, en general, debe usar algo así switch, ya que es más adecuado para el propósito y la intención. Aquí hay algunos else if abusos:

Esta implementación es demasiado vaga, hay espacio para errores, además es una sintaxis muy detallada para seguir repitiéndola.

También hay espacio para trucos, ya que puede evaluar múltiples expresiones dentro de cada uno else if, como else if (mood === 'happy' && somethingElse !== 'sad'). Fue el switch la mejor herramienta para el trabajo, aunque debe seguir agregando declaraciones break; para evitar que los casos fracasen, uno de sus muchos problemas.

function getEmoji(mood) {
    if (mood === "happy") {
        return "😃";
    } else if (mood === "sad") {
        return "😔";
    } else if (mood === "angry") {
        return "😡";
    } else {
        return "😑";
    }
}

console.log("Getting angry emoji", getEmoji("angry"));
// Getting angry emoji 😡

Switch

Se siente un poco fuera de lugar sintácticamente, ya que es lo único que no usa llaves y debes recordarlo breakpara cada case. Además, su rendimiento es menos que estelar ya que su flujo de control es procedimental.

Afortunadamente, los literales de objetos de JavaScript son una alternativa bastante buena para la mayoría switchde los casos de uso de declaraciones que se me ocurren. La idea es definir un objeto con una clave para cada uno caseque tendría en una switchdeclaración. Luego puede acceder a su valor directamente usando la expresión que pasaría a la switch declaración.

function getEmoji(mood) {
    switch (mood) {
        case "happy":
            return "😊";
        case "sad":
            return "😔";
        case "angry":
            return "😡";
        default:
            return "😑";
    }
}
console.log("Getting sad emoji", getEmoji("sad"));
// Getting angry emoji 😡

Algunos problemas con los switch

Hay varios problemas con switch, desde su flujo de control de procedimientos hasta su forma no estándar en la que maneja los bloques de código, el resto de JavaScript usa llaves, pero Switch no lo hace. Sintácticamente, no es uno de los mejores de JavaScript, ni lo es su diseño. ¡Nos vemos obligados a agregar declaraciones break manualmente dentro de cada case, lo que puede conducir a una depuración difícil y errores anidados más adelante en el caso si lo olvidamos! Douglas Crockford ha escrito y hablado al respecto en numerosas ocasiones, sus recomendaciones son tratarlo con precaución.

A menudo usamos búsquedas de objetos para cosas en JavaScript, a menudo para cosas que nunca contemplaríamos usar switch, así que ¿por qué no usar un objeto literal para reemplazar switch? Los objetos son mucho más flexibles, tienen mejor legibilidad y mantenibilidad y no necesitamos introducir break manualmente en cada “caso”. También son mucho más amigables con los nuevos desarrolladores de JavaScript, ya que son objetos estándar.

A medida que aumenta el número de "casos", el rendimiento del objeto (tabla hash) mejora el costo promedio del cambio (el orden de los casos es importante). El enfoque de objeto es una búsqueda de tabla hash, y el conmutador tiene que evaluar cada caso hasta que encuentre una coincidencia y una ruptura.

Búsquedas de objetos literales

Usamos Objetos todo el tiempo, ya sea como constructores o literales. A menudo, los usamos para fines de búsqueda de objetos, para obtener valores de las propiedades de los objetos.

Configuremos un objeto literal simple que devuelva Stringsolo un valor.

function getEmoji(mood) {
    let emoji = {
        happy: "😊",
        sad: "😔",
        angry: "😡",
    }[mood];
    return emoji || "😑";
}

console.log("Getting happy emoji", getEmoji("happy"));
// Getting happy emoji 😊
console.log("Getting default emoji", getEmoji());
// Getting default emoji 😑
console.log("Getting haa emoji", getEmoji("haa"));
// Getting haa emoji 😑

Casos por defecto

Para manejarlo, simplemente podemos agregar una 'default'clave y verificar si el valor de la expresión existe en nuestro objeto.

El literal de objeto debería ser capaz de manejar casos fallidos, similar a lo que sucede cuando no hay break declaración. Se trata de simplemente extraer y reutilizar la lógica en el objeto literal.

Para resumir todo esto, podemos generalizar y extraer esta lógica en una función reutilizable simple. Le proporcionaremos el objeto de búsqueda y un nombre opcional para el caso predeterminado (lo usaremos de forma predeterminada _default para evitar conflictos). Esta función, a su vez, devolverá una función con la lógica de búsqueda adecuada y podemos usarla para reemplazar cualquier switch declaración.

const switchFn =
    (lookupObject, defaultCase = "_default") =>
    (expression) =>
        (lookupObject[expression] || lookupObject[defaultCase])();

const logMood = {
    happy: () => "😊",
    sad: () => "😔",
    ungry: () => "😡",
    default: () => "😑",
};

const moodSwitch = switchFn(logMood, "default");

console.log("mood ", moodSwitch("happy"));
// mood 😊
console.log(moodSwitch("nothing"));
// mood 😑

Estas son soluciones muy básicas, y los objetos literales contienen un función que devuelve un String, en el caso de que solo necesite un String, puede usar un String como el valor de la clave; algunas veces las funciones contendrán lógica, que será devuelta por la función.

Si está mezclando funciones con cadenas, podría ser más fácil usar una función en todo momento para evitar buscar mood invocar si es una función; no queremos intentar invocar un String.

Resumen

Los objetos literales son un control de flujo más natural en JavaScript, switches un poco antiguo y torpe y propenso a errores de depuración difíciles. Los objetos son más extensibles, fáciles de mantener y podemos probarlos mucho mejor.

También forman parte de un patrón de diseño y se utilizan con mucha frecuencia en el día a día en otras tareas de programación. Los objetos literales pueden contener funciones, así como cualquier otro tipo de objeto , ¡lo que los hace realmente flexibles! Cada función en el literal también tiene un alcance de función, por lo que podemos devolver el cierre de la función principal que invocamos (en este caso, moodSwitch devuelve el cierre).

Maneras de clonar un objecto en javascript

Victor Hugo Aguilar — Wed, 14 Sep 2022 11:56:13 +0000

Ya que los objetos en javascript son valores por referencia, no pueden copiarse simplemente con el =. Aqui os dejo diferentes maneras de hacerlo.

let profesiones = { medico: '🚑', policia: '🚓', bombero: '🚒' }

// "Spread operator"
let clone_one = { ...profesiones }
console.log(clone_one) 
// clone_one { medico: '🚑', policia: '🚓', bombero: '🚒' }

// "Object.assign
let clone_two = Object.assign({}, profesiones)
console.log(clone_two) 
// clone_two { medico: '🚑', policia: '🚓', bombero: '🚒' }

// "JSON"
let clone_three = JSON.parse(JSON.stringify(profesiones))
console.log(clone_three) 
// clone_three { medico: '🚑', policia: '🚓', bombero: '🚒' }

Los objetos son tipo referencia

Si utilizamos el operador de asignación pasa lo siguiente

const obj = { one: 1, two: 2 }

const obj2 = obj

console.log(
  obj, // {one: 1, two: 2}
  obj2, // {one: 1, two: 2}
);

En principio es todo correcto, el problema viene cuando editamos por ejemplo el segundo objeto

const obj2.three = 3;

console.log(obj2);
// {one: 1, two: 2, three: 3} <- ✅

console.log(obj);
// {one: 1, two: 2, three: 3} <- 😱

Al ser objetos que van por tipo de referencia, cuando asignas '=' también copias el puntero al espacio de memoria que ocupa. Los tipos de referencia no contienen valores, son un puntero al valor en la memoria.

Spread Operator

El uso del spread operator clonará el objecto, pero es una copia superficial del mismo.

let profesiones = { medico: '🚑', policia: '🚓', bombero: '🚒' }

let clone_spread = { ...profesiones }

console.log(clone_spread)
// clone_spread { medico: '🚑', policia: '🚓', bombero: '🚒' }

Usando Object.assign

Esta opción tambien creará una copia superficial del objeto.

let profesiones = { medico: '🚑', policia: '🚓', bombero: '🚒' }

let object_assign = Object.assign({}, profesiones)

console.log(object_assign)
// object_assign { medico: '🚑', policia: '🚓', bombero: '🚒' }

Tener en cuenta el primer argumento {}, esto asegurará que no mute el objeto original

Usando JSON

Está manera si que dará una copia profunda. Aunque es una manera sucia de hacerlo, pero rápida.

let profesiones = { medico: '🚑', policia: '🚓', bombero: '🚒' }

let clone_json = JSON.parse(JSON.stringify( profesiones))

console.log(clone_json)
// clone_json { medico: '🚑', policia: '🚓', bombero: '🚒' }

Utilizando librerias externa loadash

DeepClone funciona con todos los tipos, funciones y símbolos, se copian por referencia

const lodashClonedeep = require('lodash.clonedeep')

let profesiones = { medico: '🚑', policia: '🚓', bombero: '🚒' }

let clone_lodash = lodashClonedeep(profesiones);

console.log(clone_lodash)
// clone_lodash { medico: '🚑', policia: '🚓', bombero: '🚒' }

Ahora está libreria tiene una ventaja que también clona todos los tipos, funciones y símbolos se copian por referencia.

const lodashClonedeep = require('lodash.clonedeep')

const arrOfFunction = [
  () => 2,
  {
    test: () => 3,
  },
  Symbol('4'),
];

// deepClone copy by refence function and Symbol
console.log(lodashClonedeep(arrOfFunction))
// [ [Function (anonymous)], { test: [Function: test] }, Symbol(4) ]

// JSON replace function with null and function in object with undefined
console.log(JSON.parse(JSON.stringify(arrOfFunction)))
// [ null, {}, null ]

// function and symbol are copied by reference in deepClone
console.log(
  lodashClonedeep(arrOfFunction)[0] === lodashClonedeep(arrOfFunction)[0],
)
// true

console.log(
  lodashClonedeep(arrOfFunction)[2] === lodashClonedeep(arrOfFunction)[2],
)
// true

El método JSON tiene problemas con las dependencias circulares. Además, el orden de las propiedades en el objeto clonado puede ser diferente.

Cuando utilizar una clone superficial o profundo

Si utilizamos el spread operator, para copuar un objeto, solo se copia superficialmente, si la matriz está anidada o es multidimensional, no funcionará correctamente

const nestedObject = {
    name: 'batman',
    country: {
      city: 'gotam'
    }
}

A. Copia Superficial

Clonamos el objeto y lo modificamos

const shallowClone = { ... nestedObject }

// modificamos los valores.
shallowClone.name = 'superman'
shallowClone.country.city = 'metropolis'

console.log(shallowClone);
// {name: 'superman', {city: 'metropolis'}}

console.log(nestedObject);
// {name: 'batman', {city: 'metropolis'}} <- 😱

Una copia superficial significa que se copia el primer nivel, se hace referencia a los niveles más profundos.
En temas de perfomance decir que Object.assign es mucho más rápido que JSON.

B. Copia Profunda

Tomemos el mismo ejemplo pero aplicando una copia profunda usando JSON

const deepClone = JSON.parse(JSON.stringify(nestedObject));

console.log(deepClone);
// {name: 'superman', {city: 'metropolis'}}

console.log(nestedObject);
// {name: 'batman', {city: 'gotam'}}

Como puede ver, la copia profunda es una copia fiel de los objetos anidados. A menudo, la copia superficial es lo suficientemente buena, realmente no necesita una copia profunda.