{"id":384,"date":"2022-10-04T15:23:33","date_gmt":"2022-10-04T13:23:33","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=384"},"modified":"2022-10-07T13:04:16","modified_gmt":"2022-10-07T11:04:16","slug":"3-9-refactorizar","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/3-9-refactorizar\/","title":{"rendered":"3.9. Refactorizar"},"content":{"rendered":"<p>Con los conocimientos que ya poseemos sobre variables y funciones podemos crear un c\u00f3digo mucho m\u00e1s legible, flexible y reutilizable. En programaci\u00f3n se usa el t\u00e9rmino <em>refactorizar<\/em> para englobar una serie de pr\u00e1cticas que implican optimizar el c\u00f3digo que ya hemos escrito para simplificarlo y hacerlo m\u00e1s claro. Normalmente, cuando queremos realizar alguna tarea en nuestro c\u00f3digo (sea cual sea nuestro nivel como programadores) trataremos de dividir la tarea en cuesti\u00f3n en peque\u00f1os pasos e ir solucion\u00e1ndolos poco a poco, comprobando en cada paso que el c\u00f3digo hace lo que queremos. De esta manera, es m\u00e1s sencillo que si escribimos cien l\u00edneas de c\u00f3digo de una vez, ya que si nuestro programa no funcionara, tendr\u00edamos que revisar esas cien l\u00edneas de c\u00f3digo en busca de alg\u00fan error.<\/p>\n<p>Una vez completada la tarea, podemos echar la vista atr\u00e1s e identificar partes de nuestro c\u00f3digo que podr\u00edamos optimizar y que no hemos tenido en cuenta cuando est\u00e1bamos inmersos en solucionar la tarea. Pongamos el siguiente ejemplo: nuestra tarea es dibujar una diana.<\/p>\n<figure id=\"attachment_110\" aria-describedby=\"caption-attachment-110\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-110\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_038.jpg\" alt=\"\" width=\"800\" height=\"375\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_038.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_038-300x141.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_038-768x360.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-110\" class=\"wp-caption-text\">Figura 39. La diana<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>Podemos ver que hay ciertos valores que se repiten, como las coordenadas del centro de los c\u00edrculos, por lo que podr\u00edamos almacenarlos en variables y as\u00ed en caso de querer cambiarlos solo tendremos que hacerlo una vez en el c\u00f3digo. Tambi\u00e9n podemos almacenar el tama\u00f1o de la diana en una variable y hacer que los c\u00edrculos interiores sean proporcionales al tama\u00f1o total:<\/p>\n<figure id=\"attachment_112\" aria-describedby=\"caption-attachment-112\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-112\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_039.jpg\" alt=\"\" width=\"800\" height=\"455\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_039.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_039-300x171.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_039-768x437.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-112\" class=\"wp-caption-text\">Figura 40. La diana con variables<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>Lo siguiente que podr\u00edamos hacer es encapsular el c\u00f3digo que dibuja la diana en una funci\u00f3n:<\/p>\n<figure id=\"attachment_114\" aria-describedby=\"caption-attachment-114\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-114\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_040.jpg\" alt=\"\" width=\"800\" height=\"500\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_040.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_040-300x188.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_040-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-114\" class=\"wp-caption-text\">Figura 41. La diana en una funci\u00f3n<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>Y por \u00faltimo, para hacer m\u00e1s flexible la funci\u00f3n que dibuja la diana y que nos permita dibujarla en distintas posiciones y de distintos tama\u00f1os, podr\u00edamos a\u00f1adirle par\u00e1metros a la funci\u00f3n <span class=\"courier\">drawDiana()<\/span>:<\/p>\n<figure id=\"attachment_116\" aria-describedby=\"caption-attachment-116\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-116\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_041.jpg\" alt=\"\" width=\"800\" height=\"439\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_041.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_041-300x165.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_041-768x421.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-116\" class=\"wp-caption-text\">Figura 42. La funci\u00f3n <span class=\"courier\">drawDiana()<\/span> con par\u00e1metros<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Con los conocimientos que ya poseemos sobre variables y funciones podemos crear un c\u00f3digo mucho m\u00e1s legible, flexible y reutilizable. En programaci\u00f3n se usa el t\u00e9rmino refactorizar para englobar una serie de pr\u00e1cticas que implican optimizar el c\u00f3digo que ya hemos escrito para simplificarlo y hacerlo m\u00e1s claro. Normalmente, cuando queremos realizar alguna tarea en [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/384"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=384"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/384\/revisions"}],"predecessor-version":[{"id":385,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/384\/revisions\/385"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}