{"id":23076616,"url":"https://github.com/corbaz/pipe-en-javascript","last_synced_at":"2026-01-18T18:01:20.826Z","repository":{"id":125339236,"uuid":"437964707","full_name":"corbaz/Pipe-en-javascript","owner":"corbaz","description":"julio.corbaz@gmail.com","archived":false,"fork":false,"pushed_at":"2021-12-13T23:56:55.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-03T12:16:37.478Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/corbaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-13T17:30:51.000Z","updated_at":"2021-12-13T23:56:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"4148f664-b0d4-49d9-8aa1-109d5c0aacd0","html_url":"https://github.com/corbaz/Pipe-en-javascript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/corbaz/Pipe-en-javascript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2FPipe-en-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2FPipe-en-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2FPipe-en-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2FPipe-en-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corbaz","download_url":"https://codeload.github.com/corbaz/Pipe-en-javascript/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2FPipe-en-javascript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28547004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T14:59:57.589Z","status":"ssl_error","status_checked_at":"2026-01-18T14:59:46.540Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-16T09:41:58.255Z","updated_at":"2026-01-18T18:01:20.808Z","avatar_url":"https://github.com/corbaz.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cómo copiar un array en JavaScript\n\nDiciembre del 2021\nAl igual que vimos con objects en cómo copiar un object, clonar arrays no es trivial ya que en JavaScript todo se copia por referencia\n\nCuál es el problema con clonar arrays?\n\nconst miarray = ['Me caes muy bien', 'Filomena']\n\nconst miarray2 = miarray\nmiarray2[0] = 'Me caes fatal'\nmiarray2[1] = 'Eustakio'\n\nconsole.log(miarray) // [\"Me caes fatal\", \"Eustakio\"]\nconsole.log(miarray2) // [\"Me caes fatal\", \"Eustakio\"]\nLo suyo hubiera sido tener dos copias del array con contenido distinto e independiente, pero vemos que cuando cambiamos el segundo array también estamos cambiando el primero, y no es lo que queremos\n\nPara copiar todo el array podemos hacer lo siguiente:\n\nCopia simple\nconst myArr = ['😎😎😎😎']\n\nconst myCopy = myArr\nmyArr[0] = '🔥🔥🔥🔥'\n\nconsole.log(myArr) // [\"🔥🔥🔥🔥\"]\nconsole.log(myCopy) // [\"🔥🔥🔥🔥\"]\nCopia shallow\nUna copia shallow de arrays se refiere a copiar la primera “capa” o la primera dimensión del array\n\nSe puede hacer con un Array.from() o con el spread operator, que lo que hace es “desplegarnos” la estructura de datos\n\nconst myArr = [\n'😎😎😎😎', // una dimensión\n'😎😎😎😎', // una dimensión\n'😎😎😎😎', // una dimensión\n['🦄🦄🦄🦄', '🌛🌛🌛🌛'], // dos dimensiones\n{ myOtherArray: ['🤘🏾🤘🏾🤘🏾🤘🏾'] }, // tres dimensiones\n]\n\nconst myCopy = myArr // copia simple\nconst myShallowCopy = Array.from(myArr) // copia shallow, con el Array.from\nconst myShallowCopy2 = [...myArr] // copia shallow, con el spread operator\n\n// ahora cambio las variables de mi array inicial y así vemos cómo de independiente es mi copia\n\nmyArr[0] = '🔥🔥🔥🔥'\nmyArr[1] = '🔥🔥🔥🔥'\nmyArr[2] = '🔥🔥🔥🔥'\nmyArr[3][0] = '🔥🔥🔥🔥'\nmyArr[3][1] = '🔥🔥🔥🔥'\nmyArr[4].myOtherArray[0] = '🔥🔥🔥🔥'\n\n// el array original y la copia simple, son idénticas\n\nconsole.log(myArr) // [\"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\", [\"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\nconsole.log(myCopy) // [\"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\", [\"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\n\n// Las copias shallow, ves que ha protegido la primera dimensión del array, pero no las demás\n\nconsole.log(myArr) // [\"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\", [\"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\nconsole.log(myShallowCopy) // [\"😎😎😎😎\", \"😎😎😎😎\", \"😎😎😎😎\", [\"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\nconsole.log(myShallowCopy2) // [\"😎😎😎😎\", \"😎😎😎😎\", \"😎😎😎😎\", [\"🔥🔥🔥🔥\", \"🔥🔥🔥🔥\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\nCopia deep\nSi una copia shallow era “superficial”, una copia deep busca hacer una copia completa de todo el array, una copia de todas sus dimensiones\n\nY para hacerlo tenemos distintas maneras:\n\nDe forma manual con un loop que nos itere por todos los lados\n\nUtilizando alguna librería ultra-famosa como lodash\n\nVamos a ver los dos métodos, el primero (el manual) utilizando la solución de samanthaming, y el segundo con la librería lodash\n\n// importo lodash\nimport \\_ from 'lodash'\n\n// función manual para clonar arrays\nconst clone = items =\u003e items.map(item =\u003e (Array.isArray(item) ? clone(item) : item))\n\n// el array original\nconst myArr = ['😎😎😎😎', ['😎😎😎😎'], { myOtherArray: ['😎😎😎😎'] }]\n\n// copia shallow\nconst myShallowCopy = [...myArr]\n\n// copia deep manual\nconst myDeepCopy = clone(myArr)\n\n// copia deep con los dos métodos de lodash, uno para shallow y otro para deep\nconst myShallowLodashClone = _.clone(myArr)\nconst myDeepLodashClone =_.cloneDeep(myArr)\n\n// cambio el array original\nmyArr[0] = '🔥🔥🔥🔥' // 1 dimensión\nmyArr[1][0] = '🔥🔥🔥🔥' // 2 dimensiones\nmyArr[2].myOtherArray[0] = '🔥🔥🔥🔥' // 3 dimensiones\n\n// Y a ver qué nos dan los clones\n\nconsole.log(myArr) // [\"🔥🔥🔥🔥\", [\"🔥🔥🔥🔥\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\nconsole.log(myShallowCopy) // [\"😎😎😎😎\", [\"🔥🔥🔥🔥\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\nconsole.log(myDeepCopy) // [\"😎😎😎😎\", [\"😎😎😎😎\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\nconsole.log(myShallowLodashClone) // [\"😎😎😎😎\", [\"🔥🔥🔥🔥\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\nconsole.log(myDeepLodashClone) // [\"😎😎😎😎\", [\"😎😎😎😎\"], {myOtherArray: [\"😎😎😎😎\"]}]\nLas copias shallow sólo copian la primera dimensión, como hemos visto antes\nLa copia deep con la función propia no consigue copiar todas las dimensiones\nY una copia completa sí la conseguimos con \\_.cloneDeep de lodash\nPodríamos modificar la función para conseguir los mismos resultados de lodash, de hecho la tienes en lodash.clonedeep, por lo que no tienes que importar toda la librería\n\nO directamente puedes ir al github, ver la función, y utilizarla tu mismo\n\nCopia deep casi completa con JSON\nHay otro método tremendamente práctico y que no requiere de librerías externas\n\nEs el método JSON, y se trata de convertir nuestro array en un objeto JSON, y luego volver a convertir ese objeto en un nuevo array\n\nEn el proceso las referencias se consolidan en nuevos objetos, con lo que aunque la función JSON no está pensada para clonar datos, nos sirve perfectamente a este propósito\n\n// el array original\nconst myArr = ['😎😎😎😎', ['🐥🐥🐥🐥'], { myOtherArray: ['🦄🦄🦄🦄'] }]\n\n// la copia con JSON\nconst myJSONCopy = JSON.parse(JSON.stringify(myArr))\n\n// cambio el array original\nmyArr[0] = '🔥🔥🔥🔥' // 1 dimensión\nmyArr[1][0] = '🔥🔥🔥🔥' // 2 dimensiones\nmyArr[2].myOtherArray[0] = '🔥🔥🔥🔥' // 3 dimensiones\n\n// Y a ver qué nos da\n\nconsole.log(myArr) // [\"🔥🔥🔥🔥\", [\"🔥🔥🔥🔥\"], {myOtherArray: [\"🔥🔥🔥🔥\"]}]\nconsole.log(myJSONCopy) // [\"😎😎😎😎\", [\"🐥🐥🐥🐥\"], {myOtherArray: [\"🦄🦄🦄🦄\"]}]\nConseguimos clonar todo el objeto como hacíamos antes con el \\_.cloneDeep de lodash\n\nVentajas? Se lee muy fácilmente y no dependes de una librería externa\nDesventajas? Cierta incompatibilidad con algunos tipos de datos que no se pueden clonar bien (como Date)\nEn cuanto a velocidad, haciendo un benchmark con measurethat.net vemos lo siguiente:\n\nCon estructuras sencillas, la solución con lodash es un 1.5x más rápida que la solución con JSON\nCon estructuras “algo” complejas como la que verás debajo, la solución JSON ya empieza a ir más rápido que la de lodash\nconst myArr = [\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'] },\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'] },\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'] },\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'] },\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'] },\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'] },\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'] },\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'] },\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'] },\n]\nCon este array, la solución más rápida sería la de JSON\n\nEso sí, con ninguno de estos métodos conseguiríamos clonar un array que tenga una función en su estructura, lo puedes ver abajo\n\nconst myArr = [\n'😎😎😎😎',\n['🐥🐥🐥🐥'],\n{ myOtherArray: ['🦄🦄🦄🦄'], myMethod: () =\u003e console.log('hola como estamos') },\n]\nEste método tiene una función en la estructura, pues escojas el método que escojas, esa función no la podrás clonar\n\nInteresante\n[https://www.youtube.com/watch?v=luJ6GpZh4BM\u0026ab_channel=hdeleon.net]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorbaz%2Fpipe-en-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorbaz%2Fpipe-en-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorbaz%2Fpipe-en-javascript/lists"}