6

Tengo una función que recibe 2 argumentos:

  1. Una lista de libros (bookList).
  2. El libro a borrar de esa lista (book)

Pero después de la función quiero mantener intacta la lista original (bookList) así que la "copio" creando otra variable a una lista nueva (newlibrary)

var bookList = [
  "The Hound of the Baskervilles",
  "On The Electrodynamics of Moving Bodies",
  "Philosophiæ Naturalis Principia Mathematica",
  "Disquisitiones Arithmeticae"
];

function remove( library, book ) {
  var newlibrary = library;
  newlibrary.splice( newlibrary.indexOf( book ), 1 );
  return newlibrary;
}

console.log( 'Antes:', bookList );
remove( bookList, 'On The Electrodynamics of Moving Bodies' );
console.log( 'Después:', bookList );

La función devuelve newlibrary con la lista y el libro correctamente borrado, pero sin embargo si llamo después a la lista original bookList resulta que también me ha borrado ahí el libro:

Antes: [
  "The Hound of the Baskervilles",
  "On The Electrodynamics of Moving Bodies",
  "Philosophiæ Naturalis Principia Mathematica",
  "Disquisitiones Arithmeticae"
]
Después: [
  "The Hound of the Baskervilles",
  "Philosophiæ Naturalis Principia Mathematica",
  "Disquisitiones Arithmeticae"
]

Conclusión, ambas listas ahora han sido modificadas, cuando sólo quería modificar la nueva creada y dejar intacta la primera.

¿ Qué estoy haciendo mal ?

1

2 respuestas 2

8

Porque, en JavaScript, los objetos y los arrays se usan mediante referencias. Eso quiere decir que tú tienes varias referencias a un mismo objeto.

var newlibrary = library

Con eso, tienes 2 referencias; dos variables que, en realidad, apuntan al mismo objeto en memória. Este comportamiento solo se aplica a objetos, arrays y functiones. No se aplica para tipos primitivos:

function test( n ) {
  var n2 = n;

  ++n2;
  
  console.log( 'Valor de n2:', n2 );
}

var num = 10;
console.log( 'Original:', num );
test( num );
console.log( 'Después:', num );

Para hacer lo que pretendes, tienes que crear una copia en profundidad de tu array, y modificar la copia. Hay varias alternativas, pero mi preferidad, por su simpleza, es usar JSON.parse( JSON.stringify( ) );:

var bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"];

function remove (library, book) {
  var newlibrary = JSON.parse( JSON.stringify( library ) );
  newlibrary.splice( newlibrary.indexOf(book), 1 );
  return newlibrary
}

var newList = remove(bookList, 'On The Electrodynamics of Moving Bodies');

console.log( 'Original:' );
console.log( bookList );
console.log( 'Nuevo:' );
console.log( newList );

Hay que tener cuidado con este tipo de copias; por ejemplo:

var data = [ 1, 2 ];

data.push( data );
console.log( data );

Error: "Uncaught TypeError: Converting circular structure to JSON"

Es decir, no todos los objetos se pueden copiar en profundidad; podemos encontrarnos, como en el ejemplo, datos recursivos que, sencillamente, son imposibles de duplicar.

Nota ( Gracias al usuario JackNavaRow ). Para obtener resultados simlares, sin preocuparnos por realizar nosotros mismos las copias en profundidad de los Object u Array implicados, podemos usar librerías externas, como immutable-js. Así podemos tratar todos nuestros objetos como valores en lugar de referencias.

3
  • otra manera de hacer una copia de array es usar el spread operator: newLibrary = [...library]
    – lois6b
    Commented el 18 mar. 2019 a las 12:31
  • Pero no realiza una deep copy, ¿ No ? En el ejemplo es trivial, pero ... ¿ y si fuera un array de arrays ?
    – Trauma
    Commented el 18 mar. 2019 a las 13:01
  • 1
    Cierto... entonces "otra manera de hacer una copia de un array como este es usar el spread operator" xD
    – lois6b
    Commented el 18 mar. 2019 a las 13:06
0

Se debe a que la función splice modifca el array original, como se indica en la documentación.

Array.splice

Si quieres solo obtener una copia del array sin los elementos puedes utilizar slice.

Array.slice

1
  • hola Zerocool. Seguramente el usuario siga confuso porque hizo var newlibrary = library. puedes explicar tambien la creacion de nuevos arrays? y puedes mostrar un ejemplo de codigo usando slice en vez de splice?
    – lois6b
    Commented el 18 mar. 2019 a las 12:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.