A la hora de programar, habrá muchos momentos en los que tengamos un mismo contenido en distintos elementos. Por eso mismo, hay ocasiones en las que querremos copiar el contenido de un objeto a otro de una manera sencilla. Para ello, en este post, te presentaremos qué es y cómo funciona el spread operator de JavaScript, ideal para copiar y combinar contenidos.
¿Qué es el spread operator de JavaScript?
Para entender cómo funciona el spread operator de JavaScript podemos pensar en los distintos operadores que existen en este lenguaje de programación. Como has leído en nuestros posts sobre los operadores booleanos y los operadores aritméticos, un operador es un símbolo que nos permite realizar una función lógica de una manera simple.
El caso del spread operator no es distinto. Con el símbolo de tres puntos (…), este operador nos permite copiar de manera simple una parte o la totalidad de un elemento array o un objeto en JavaScript. En este sentido, spread javascript se parece al método object.assign. La diferencia es que un spread operator también puede usarse para los valores de un array, no solo de un objeto literal.
Ten presente que, aunque , spread javascript herramienta puede utilizarse para copiar tanto el contenido de un array como de un objeto, no podemos combinar el contenido entre estos dos tipos de elementos.
Para usar el spread operator de JavaScript, basta con insertar el operador y, a su lado, poner el nombre del objeto del que queramos copiar un contenido. Además, podemos insertar el operador spread en javascript como parámetro de una función.
¿Cómo funciona el spread operator de JavaScript?
Para ejemplificar cómo funciona el spread operator de JavaScript, utilizaremos las clases FootballLeague y League que hemos creado en posts anteriores sobre el manejo de este lenguaje de programación. En especial, te sugerimos leer los posts sobre recorrer un array con propiedades en JavaScript, cómo usar el método setup para simplificar clases y cómo funciona el método object.assign en JavaScript. Estos artículos te ayudarán a entender cómo hemos llegado a las clases que te mostramos a continuación para nuestro operador spread en javascript.
En este momento, tenemos una clase FootballLeague con las siguientes propiedades:
class FootballLeague extends League {
constructor (name, teams, config = { }) {
super (name, teams, config)
}
setup (config = { }) {
const defaultConfig = {
rounds: 1,
pointsPerWin: 3,
pointsPerDraw: 1,
pointsPerLose: 0,
}
this.config = Object.assign (defaultConfig, config);
}
}
Además, tenemos un array llamado ‘Teams’ que está compuesto por distintos strings de equipos deportivos, para la conformación del operador spread en javascript:
teams: [‘Hoffernheim’, ‘Lyon’, ‘Chelsea’, ‘Barca’, ‘Madrid’, ‘Atlético’, ‘Rayo Vallecano’, ‘Wolfsburg’]
En nuestro post sobre recorrer un array con propiedades hemos hecho que cada uno de estos strings esté acompañado por tres propiedades que definen el número de partidos ganados, perdidos y empatados. Para ello, hemos creado un objeto que insertamos dentro del array y luego llamamos desde la clase League, de la cual hereda nuestra clase FootballLeague.
Del mismo modo, hemos creado la siguiente función para el número de partidos ganados, perdidos y empatados:
customizeTeams (teamName) {
return {
name: teamName,
matchesWon: 0,
matchesLost, 0,
matchesLost: 0,
}
}
Ahora, lo que queremos es usar el método setup y el spread operator de JavaScript o operador spread en javascript para copiar los valores de esta función en nuestra clase FootballLeague y agregar nuevos parámetros para así personalizarla. Además, queremos que estos nuevos parámetros también tengan la cualidad de ser parte del recorrido del array ‘Teams’. Esto nos permite mantener la generalidad de la clase padre y ser flexibles con los cambios en la clase hija.
Entonces, dentro de la clase FootballLeague podemos crear el siguiente objeto:
customizeTeams (teamName) {
const customizedTeam = super.customizeTeams (teamName)
return {
name: teamName,
matchesWon: 0,
matchesLost, 0,
matchesLost: 0,
points: 0,
goalsFor:0,
goalsAgainst:0,
}
}
Aunque esto funciona, aquí no estamos reescribiendo ningún valor ni copiando los métodos de la clase padre que nos permiten recorrer el array. Con el uso del spread operator javascript, podemos simplificar estas líneas de código y lograr lo que necesitamos:
customizeTeams (teamName) {
const customizedTeam = super.customizeTeams (teamName)
return {
points: 0,
goalsFor:0,
goalsAgainst:0,
…customizedTeam
}
}
En esta nueva escritura hemos usado el spread operator para esparcir las propiedades del objeto customizedTeam, al cual hemos llamado con la palabra clave super en el constructor. Este método, además de tener las propiedades, copia el método que nos ha permitido recorrer el array dentro del nuevo objeto, permitiendo que sus propiedades también recorran el array.
Al entender cómo funciona el spread operator de JavaScript, debemos tener cuidado con su posicionamiento. Aunque en este caso no estamos sobrescribiendo ningún parámetro, cuando hay parámetros iguales en el método copiado y en el nuevo objeto, el programa elegirá el valor de la última variable escrita, pues es la última en leerse.
¿Te animas a seguir aprendiendo?
Ahora que sabes cómo funciona el spread operator de JavaScript y cómo utilizarlo para parametrizar las clases en este lenguaje de programación, ¡te invitamos a usarlo en tus propias lineas de código! Si quieres, además, aprender a desarrollar tus propios proyectos con con JavaScript y otros lenguajes de programación como CSS y HTML, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, con el que en pocos meses dominarás estos lenguajes y serás un experto en desarrollo web. ¡Anímate a matricularte!
