Lo dejó más limpio, ¿y sigue igual?
Un asistente te ofrece ordenar una función que repite la misma cuenta tres veces. El resultado se lee mejor. Pero ordenar el código es cambiarlo, y un cambio pequeño puede mover un resultado.
Refactorizar es cambiar cómo está escrito el código sin cambiar lo que hace. Aquí aprendes a pedirlo y a demostrar que no cambió.
Al final de esta lección
Nota
Puedo pedir una refactorización a un asistente y demostrar que el comportamiento no cambió.
Palabras clave
| Palabra | Qué significa |
|---|---|
| Refactorizar | cambiar cómo está escrito el código sin cambiar lo que hace |
| Comportamiento | lo que devuelve el código para cada entrada |
| Paso pequeño | un solo cambio que se revisa de una vez |
| Comparar antes y después | pasar las mismas entradas por las dos versiones |
| Diff | la lista de líneas que cambian entre dos versiones |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Refactorizar no cambia lo que hace
Una refactorización cambia la forma del código y deja igual su comportamiento: para cada entrada, la misma salida. Quitar una repetición, dar un nombre mejor o sacar una función aparte son ejemplos.
Si el resultado de alguna entrada cambia, ya no es una refactorización. Es un cambio de comportamiento, y merece su propia petición y su propia revisión.
Una petición posible
Esta es una petición posible, no la única. «Refactoriza points(total) para que no repita la cuenta. No cambies lo que devuelve para ninguna entrada. Haz un solo cambio y dime cuál. No toques otros archivos ni las pruebas.»
Pide siempre pasos pequeños. Un cambio corto se revisa de verdad, y uno largo se acepta sin mirar.
Compara antes y después con las mismas entradas
La versión vieja es tu referencia: sabes lo que hacía. Pasa las mismas entradas por la vieja y por la nueva, y compara las salidas. Si una difiere, no era una refactorización.
Incluye los valores del borde de cada regla: justo antes, en el borde y justo después. Ahí se esconde un >= cambiado por un >.
Un ejemplo escrito a mano
Las tres versiones de abajo las escribimos nosotros, a mano: la vieja, una refactorización buena y otra con un borde cambiado. Ningún asistente las escribió.
Los botones escriben archivos en la carpeta demo-refactor de tu proyecto. No tocan el programa de la caja.
Crear la carpeta de la demostración
docker exec -w /home/node/project agent mkdir -p demo-refactorSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Escribir la versión vieja
docker exec -w /home/node/project agent sh -c "printf '%s\n' '// Puntos de fidelidad: 2 por euro desde 10 euros, 1 por euro desde 5.' 'function points(total) {' ' if (total >= 1000) {' ' return Math.floor(total / 100) * 2;' ' }' ' if (total >= 500) {' ' return Math.floor(total / 100) * 1;' ' }' ' return 0;' '}' 'module.exports = { points };' > demo-refactor/antes.js"Se muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Escribir la refactorización buena
docker exec -w /home/node/project agent sh -c "printf '%s\n' '// Los mismos puntos, con la cuenta escrita una sola vez.' 'function factor(total) {' ' if (total >= 1000) return 2;' ' if (total >= 500) return 1;' ' return 0;' '}' 'function points(total) {' ' return Math.floor(total / 100) * factor(total);' '}' 'module.exports = { points };' > demo-refactor/despues.js"Se muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Escribir la que cambia un borde
docker exec -w /home/node/project agent sh -c "printf '%s\n' '// Casi igual, pero con un borde cambiado: > en lugar de >=.' 'function factor(total) {' ' if (total > 1000) return 2;' ' if (total >= 500) return 1;' ' return 0;' '}' 'function points(total) {' ' return Math.floor(total / 100) * factor(total);' '}' 'module.exports = { points };' > demo-refactor/despues2.js"Se muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Escribir el comparador
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'const before = require(\"./\" + process.argv[2]);' 'const after = require(\"./\" + process.argv[3]);' '' 'let different = 0;' 'for (const total of [0, 499, 500, 999, 1000, 1001, 2550]) {' ' const x = before.points(total);' ' const y = after.points(total);' ' if (x === y) {' ' console.log(total, x, y, \"igual\");' ' } else {' ' different = different + 1;' ' console.log(total, x, y, \"distinto\");' ' }' '}' 'console.log(\"distintos:\", different);' > demo-refactor/comparar.js"Se muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Comparar la vieja con la buena
docker exec -w /home/node/project agent node demo-refactor/comparar.js antes despuesSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Comparar la vieja con la del borde
docker exec -w /home/node/project agent node demo-refactor/comparar.js antes despues2Se muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Un diff de refactor solo mueve código
Un diff muestra qué líneas cambian. En una buena refactorización quitas algunas líneas y añades otras que hacen lo mismo. No aparece ninguna condición nueva, ningún archivo nuevo ni ninguna función que nadie pidió.
Si el diff trae algo así, el asistente hizo más de lo que pediste. Lee el diff entero antes de aceptar.
Ver el diff entre las dos versiones
docker exec -w /home/node/project agent sh -c "diff -U1 --label antes --label despues demo-refactor/antes.js demo-refactor/despues.js || true"Se muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Ejemplo resuelto: tres versiones de points
| Entrada | Vieja | Buena | Con el borde cambiado |
|---|---|---|---|
| 499 | 0 | 0 | 0 |
| 500 | 5 | 5 | 5 |
| 999 | 9 | 9 | 9 |
| 1000 | 20 | 20 | 10 |
| 1001 | 20 | 20 | 20 |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un error frecuente
Advertencia
Mucha gente cree que si las pruebas del proyecto pasan, la refactorización es segura. Las pruebas solo miran los casos que alguien escribió. Compara también las entradas de los bordes, aunque ninguna prueba las mire.
Para ir más lejos: tu propio cambio
En el laboratorio, elige una refactorización que no sea el defecto de la caja, que es la tarea del laboratorio. Por ejemplo, pide al agente que cambie el nombre de la función change por una que diga mejor lo que hace.
Antes de pedirlo, anota qué entradas vas a comparar. Después de aceptarlo, pásalas por las dos versiones y mira el diff entero.