Estructuras

definidas por el
programador-
Práctica guiada

Desarrollo web en entorno cliente

 Índice Unidad Didáctica Nº2

• Gestión del stock de una tienda

• Ampliación del número de

productos de la tienda

• Ranking con los productos mas

vendidos

Estructuras definidas por el

programador -práctica guiada
Los contenidos digitales de esta presentación son propiedad de la empresa
Educación Madrid 2016 S. L., y han sido desarrollados por su equipo
docente.
Así mismo, contiene citas y gráficos de la web del Institut Obert de
Catalunya.

2
 01
Gestión del stock de una tienda
Una buena forma de ver cómo se utilizan las funcionalidades
de las colecciones es a través del uso que se hace en un
ejemplo concreto, como puede ser la gestión del stock de
una tienda.

Se quiere tener grabado el stock de los productos de una

tienda. Por el momento, es una tienda pequeña y sólo tienen
diez productos, pero se venden mucho. Por eso debemos
controlar el stock de cada uno de ellos para que siempre los
tengamos disponibles.procesar toda la colección completa
a partir de una única variable (a la que está asignada la
colección).

3
El tendero nos ha pedido un listado con todo el stock de sus productos. Para crear un array se ha utilizado la instrucción :
let productos = new Array(10);
Y ésta ha sido nuestra implementación: Con esta instrucción se crea un array inicializado con 10 posiciones,
let productos = new Array(10); pero también podíamos haberlo asignado literalmente:
productos.fill(50) let productos = [];
function verStock(){
let listado = ""; ¿Qué diferencia existe entre las dos formas de crear un array ?
for(let i = 0; i < productos.length; i++){ A priori, parece que son iguales pero no, vea el siguiente ejemplo:
listado += `<li>El producto número ${i} tiene ${productos[i]} let a = [], // éstos son iguales
unidades`; b = new Array(), // aib son arrays con longitud 0
}
document.getElementById("listado").innerHTML=listado; c = ['foo', 'bar'], // éstos también son iguales
} d = new Array('foo', 'bar'), // cid son arrays con dos strings
verStock();
Puede ver este ejemplo en el siguiente enlace: https://codepen.io/EEP- // Aquí está la diferencia:
igroup/pen/qBXKEvR. e = new Array(3), // e.length == 3, e[0] == undefined
f = [3] // f.length == 1, f[0] == 3
El código HTML y CSS utilizado por estos ejemplos se puede encontrar ;
en los enlaces a CodePen.

Si observa el código anterior se ha utilizado un array para guardar el

stock de cada producto. Cada posición del array productes La diferencia entre crear un array con su constructor o
corresponde a uno de los productos de la tienda. El array contiene el crearlo de forma literal es que si se utiliza el constructor se
número de unidades que existen de cada uno de ellos. Inicialmente, el puede definir un tamaño inicial en el array .
array se llena con el número 50.

4
Podemos definir, con el constructor, un array de un tamaño concreto. Sin
embargo, si utilizamos la asignación literal []para crear arrays , no
podemos definir el tamaño inicial. Si añadimos en un array literal un
número, éste será el primer elemento del array y no su tamaño.
La sintaxis es la siguiente:
[elemento0, elemento1, ..., elementoN]
new Array(elemento0, elemento1[, ...[, elementoN]])
new Array(tamaño)
El array se inicializa con los elementos dados excepto si sólo existe un
elemento. En este caso, este elemento simboliza el tamaño del array
sólo si se utiliza la creación del array con la palabra reservada new.
Una vez creado el array lo llenamos con el valor 50:
productos.fill(50)
Con el método se fill()asigna el valor 50 a todos los elementos del array .
Cabe destacar que si el array está vacío, invocar este método no tendrá
ningún efecto.
Si en lugar de utilizar un valor estático quisiéramos generar los valores
aleatoriamente, podríamos hacerlo utilizando el método map()para
crear un nuevo array a partir de una función y asignándolo al array
productos :
productos = productos.map(() => Math.floor(Math.random() * 100));
Puede ver este ejemplo en el siguiente enlace: https://codepen.io/EEP-
igroup/pen/KKvepKO
Fíjese que al método map()se le ha pasado como argumento una
función de flecha que devuelve un número aleatorio entre 0 y 99:
() => Math.floor(Math.random() * 100)
Es importante recordar que la función map()sólo se aplica a los valores
asignados, ya sea mediante el método fill()o asignando los valores
manualmente.
La función verStock(), recorre el array productos y muestra por pantalla
la información de cada uno de ellos dentro de la etiqueta con
identificador listado(en el código HTML ).
Sólo queda ver el funcionamiento de la función verStocl():
function verStock(){
let listado = "";
for(let i = 0; i < productos.length; i++){
listado += `<li>El producto número ${i} tiene ${productos[i]}
unidades`;
}
document.getElementById("listado").innerHTML=listado;
}
Esta función la invocamos directamente desde JavaScript y es la
encargada de generar el listado que se visualiza en la pantalla.
Aunque sabemos que sólo hay 10 productos, este número no se ha
utilizado como condición de control. Es mucho más útil acceder a la
propiedad lengthdel array .
5
Volvemos al ejemplo. La función verStock()utiliza una variable local
llamada listado que se va llenando poco a poco a medida que el bucle
va dando vueltas. En cada vuelta del bucle la variable recoge los datos
del producto en curso. Por último, cuando se llega al final del array , la
variable contiene la información deseada por el usuario.

listado += `<li>El producto número ${i} tiene ${productos[i]} unidades`;

Sólo falta mostrar la información al usuario. Utilizamos el objeto

document de JavaScript para acceder al código HTML de la página
web.

Buscamos la etiqueta identificada con id=llistaty le asignamos el nuevo

código HTML que queremos que tenga. Así, podemos cambiar el
código HTML de la página y dar la información que deseemos.

document.getElementById("listado").innerHTML=listado;

6
 02
Ampliación del número
de productos de la
tienda
Queremos ampliar el número de productos de la tienda.
Cada vez que pulsamos un botón, debe ampliarse el
número de productos. Tanto el número de productos como
el stock deben ser aleatorios.

7
let productos = [];
function ampliarStock(){ Hacer refactorización significa, en programación,
let nuevoStock = pedirProductos(); reestructurar el código para mejorarlo y reducir su
complejidad sin cambiar las funcionalidades que habían
productos.push(...nuevoStock);
hasta el momento.
verStock();
} No se han cambiado las funcionalidades, sino que mejor se han
function pedirProductos(num){ aprovechado. De hecho, la función se demanarProductes(num)utiliza
if(arguments.length === 0){ por dos cosas: inicializar el array productos y, además, para pedir
nuevos productos. Echemos un vistazo a la función.
num = Math.floor((Math.random() * 5) + 1);
function pedirProductos(num){
}
if(argumentos.length === 0){
let nuevosProductos = new Array(num);
num = Math.floor((Math.random() * 5) + 1);
nuevosProductos.fill();
}
return nuevosProductos.map(() => Math.floor((Math.random() * 100)))
let nuevosProductos = new Array(num);
}
nuevosProductos.hijo();
productos = pedirProductos(10);
return nousProductes.map(() => Math.floor((Math.random() * 100)))
verStock();
}
Puede ver este ejemplo en el siguiente enlace: https://codepen.io/EEP-
igroup/pen/mdMKJRG La función admite un parámetro llamado num. Este parámetro es
opcional. Si se envía el parámetro creará un array con el número de
productos solicitados. Sin embargo, si no se envía el número de
En este ejemplo se han añadido dos botones al código HTML que
productos que se crearán será aleatorio.
llaman a las funciones verStock()y ampliarStock(). Si observa el código
HTML de los botones, verá que el evento de onclick los botones tiene
asignado los llamamientos a sus respectivas funciones. Esta funcionalidad se logra preguntando el número de parámetros
enviados a la función. En concreto, argument.lengthpodemos saber
<button onclick="verStock()">Ver stock</button>
exactamente el número de parámetros enviados. Si el tamaño es
<button onclick="ampliarStock()">Ampliar stock</button>
1significa que la variable numestá llena y nos piden un array con ese
Observe que se han creado dos nuevas funciones: ampliarStock()y tamaño. En cambio, si el tamaño se 0quiere decir que nos piden un
pedirProductos(num). Esta última función se ha creado para hacer array con un tamaño indeterminado. Este tamaño deberemos calcularlo
refactorización del codigo del código. aleatoriamente.

8
El resto de la función ya es conocido. Sólo se ha cambiado el punto del
código donde se realiza la inicialización y el tamaño inicial, en lugar de
crear el array directamente se hace la llamada a pedirProductos()y se
asigna como array inicial el retorno de esta función.
Entonces, para inicializar el array productos se hace una llamada a esta
función.
productos = pedirProductos(10);
Puesto que inicialmente se quieren 10 productos, se envía el tamaño del
array deseado a la función. La función creará un array temporal que se
asignará a la variable productos.
La función pedirProductos(num)ha sido creada para utilizarla también
en caso de que se quiera ampliar la oferta de productos de la tienda.
function ampliarStock(){
let nuevoStock = pedirProductos();
productos.push(...nuevoStock);
verStock();
}}
Para ampliar aleatoriamente tanto el número de productos como el
stock utilizaremos la función pedirProductos()sin enviar ningún
parámetro. Si ejecutamos la función sin parámetros, nos devolverá un
array con las características deseadas.
Una vez tenemos el array con los nuevos productos deben añadirse al
array products .
Para añadir los elementos devueltos hemos utilizado el operador de
propagación …nuevoStock y los hemos añadido mediante el método
push().
Cabe recordar que este método añade uno o más elementos al final de
un array y que estos elementos deben estar separados por comas. Por
este motivo se utiliza el operador de propagación, ya que realiza la
conversión de un array a una lista de valores separados por coma.
El método push añade uno o más elementos al final del array . El array
original se modifica y aumenta su longitud. También es posible añadir
los elementos al inicio del array con el método unshift .
La sintaxis del método push()es la siguiente:
array.push(elemento1, ..., elementN)
Todos los elementos que se pasan como parámetro del método se
push() añaden al final del array .
En caso de haber invocado el método pasando como argumento
nuevoStock, el resultado habría sido diferente, puesto que, en lugar de
añadir todos los valores uno a uno, se habría añadido todo el array
como un único elemento.
9
 03
Ranking con los productos más
vendidos

En este apartado queremos añadir unas cuantas funcionalidades adicionales para

realizar la tienda más interactiva. La idea es que se puedan comprar y vender
productos y tener un ranking ordenado de los productos más vendidos.

En concreto, las funcionalidades que queremos tener son:

Funcionalidades del tendero

‣ Añadir 1 producto: añadir sólo un producto al catálogo de productos
disponibles a la venta. Este producto tendrá un número de stock aleatorio.
‣ Eliminar 1 producto: eliminar el último producto añadido al catálogo de
productos. Elimina todo el stock disponible en el producto.
‣ Ordenar los productos en función del stock que queda: ordena los productos
según su stock. El número de producto asociado al stock puede cambiar.

Funcionalidades del comprador

‣ Comprar un producto: el comprador puede comprar un producto de los
disponibles en el catálogo de productos. Cada vez que se compra un producto
se reordena y visualiza el ranking de productos más vendidos.
10
let productos = []; function comprar(numproducto) { function sortProducto(a, b) {
let vendidos = new Map(); if (productos[numproducto] !== undefined const aa = a.split("-")[0];
function verStock(){ && productos[numproducto] > 0) { const bb = b.split("-")[0];
let listado = ""; let cantidad = 0 return aa - bb;
for(let i = 0; i < productos.length; i++){ if (vendidos.has(numproducto)) { }
listado += `<li>El producto número ${i} cantidad = vendidos.get(numproducto); function ranking() {
tiene ${productos[i]} unidades`; } let aux = [];
} cantidad++; for (let [numproducto, cantidad] of
vendidos.set(numproducto, cantidad); vendidos) {
document.getElementById("listado").innerHT productos[numproducto]--; aux.push(cantidad + "-" + numproducto);
ML=listado; ranking(); }
} verStock(); aux.sort(sortProducto).reverse();
function ampliarStock(){ } let listado = "";
let nuevoStock = pedirProductos(); } for (let valor of aux) {
productos.push(...nuevoStock); function nuevoProducto() { let [stockProducto, codiProducto] =
verStock(); productos.push(Math.floor(Math.random() * valor.split("-");
} 100)); listado += `<li>se ha vendido $
function pedirProductos(num){ verStock(); {stockProducto} unidades del producto $
if(arguments.length === 0){ } {codiProducto}</li>`;
num = Math.floor((Math.random() * 5) + function eliminarProducto() { }
1); productos.pop(); document.getElementById("vendidos").inner
} HTML = listado;
verStock();
let nuevosProductos = new Array(num); }
}
nuevosProductos.fill(); productos = pedirProductos(10);
function ordenarProductos() {
return nuevosProductos.map(() => verStock();
productos.sort((a, b) => a - b);
Math.floor((Math.random() * 100))) Puede ver este ejemplo en el siguiente
verStock();
} enlace: https://codepen.io/EEP-igroup/pen/
}
porKJGN

11
3.1 Añadir un producto Vemos un ejemplo de utilización de la función unshift():
let productos = ["Legumbres", "Tomate", "Cebolla", "patata"];

Para añadir un producto al catálogo de productos se ha utilizado el let nuevosProductos = ["ajo", "pimiento"];

siguiente código: let numProductos = productos.unshift("Pasta", ...nuevosProductos);

function nuevoProducto() { console.log(productos);

productos.push(Math.floor(Math.random() * 100)); console.log(numProductos);

verStock(); Puede ver este ejemplo en el siguiente enlace: https://codepen.io/EEP-

} igroup/pen/vYJrZmo?editors=1111

Y el código HTML asociado a esta función es el siguiente:

<button onclick="nuevoProducto()" >Añadir 1 producto</button>
Como puede ver, al añadir un nuevo elemento con este método sólo se
debe calcular el stock de este producto ya que éste se añade al final del
array y, por tanto, el número de producto se calculará automáticamente.
Se llama a la función verStock()para hacer más interactivo el programa,
así se ve en el momento en que se han actualizado los productos del
catálogo.
Como se puede apreciar, se puede mezclar la inserción de elementos
individuales ( Pasta) y los elementos propagados ( …nuevosProductos).
Los métodos push()o unshift() devuelven la nueva longitud del array y, si
nos interesa, podemos almacenarla en una variable. En este caso, la
variable utilizada se llama numproductos.

La sintaxis de la función unshift()es la siguiente:

array.unshift([elemento1[, ...[, elementN]]])

Todos los elementos que se pasan como parámetro de la función se

unshift()añaden al principio del array .

12
3.2 Eliminar un producto Vemos ahora el mismo ejemplo pero utilizando shift():
function delProducto() {

Para eliminar un producto del catálogo de productos se ha utilizado el productos.shift();

siguiente código: verStock();

function eliminarProducto() { }

productos.pop(); La sintaxis del método shift()es la siguiente:

verStock(); let elemento = array.shift()

} El método shift()elimina el primer elemento del array y mueve todos los

Y el código HTML asociado a esta función es el siguiente: demás para que el índice del array siga comenzando por 0. El elemento
eliminado del array se devuelve para poder utilizarlo en el programa si
<button onclick="eliminarProducto()" >Eliminar 1 producto</button>
fuera necesario.

La sintaxis del método pop()es la siguiente:

Tanto si se utiliza el método pop()como si se utiliza el método, shift()se
let elemento = array.pop()
puede recuperar el elemento extraído y guardarlo en una variable. Por
El método pop()borra el último elemento del array pero lo devuelve ejemplo:
para poder utilizarlo.
function eliminarProducto() {
let produtoEliminado = productos.pop();
Para eliminar un nuevo producto utilizamos el método pop . Este
verStock();
método elimina el último elemento del array. El array original se
}
modifica y decrece su longitud en 1 elemento. También es posible
eliminar el primer elemento del array si utilizamos el método shift , en Aunque en este caso no hagamos nada con el valor devuelto, se

vez de utilizar el método pop(). encontrará casos en los que será interesante llevar a cabo alguna acción
sobre el elemento eliminado o habrá que devolverlo. Por ejemplo, para
notificar al usuario qué elemento ha sido eliminado.
Como puede apreciarse, basta con invocar el método pop()del array
para eliminar el último elemento y seguidamente invocamos la función
verStock()para refrescar los datos en el documento HTML .

13
3.3 Ordenar productos
según stock
Esta funcionalidad permite ordenar los
productos según su stock. Los productos con
poco stock serán los primeros. El código
asociado a esta funcionalidad es el siguiente:
function ordenarProductos() {
productos.sort((a, b) => a - b);
verStock();
} estos dos valores a la función de comparación y
El código HTML asociado a esta función es el
siguiente:
<button onclick="ordenarProductos()" >
Ordenar Productos según el stock que queda
</button>
Al utilizar la función ordenarProductes() debe
aparecer un listado similar a éste:
Listado de productos:
El producto 0 tiene 6 unidades
El producto 1 tiene 11 unidades
El producto 2 tiene 35 unidades
El producto 3 tiene 35 unidades
El producto 4 tiene 51 unidades
El producto 5 tiene 58 unidades
El producto 6 tiene 59 unidades
El producto 7 tiene 70 unidades
El producto 8 tiene 73 unidades proporcionamos la función que debe utilizar
para realizar la ordenación.
El producto 9 tiene 98 unidades
Si nos fijamos, para ordenar sólo necesitamos Como puede apreciarse, en este caso se ha
pasado como argumento del método sort()una
el método sort() que nos proporciona la
función de flecha (éste es un caso de uso muy
biblioteca JavaScript.
habitual para las funciones de flecha):
El método sort(), por defecto, ordena (a, b) => a - b
alfabéticamente, es decir, como si todo fuera
una string . Cuando la función sort()debe comparar dos
valores para determinar cuál es mayor, envía
La sintaxis del método sort()es la siguiente:
ésta debe devolver un valor negativo, un cero o
array.sort([funcionComparación])
un valor positivo, dependiendo de los
parámetros.
El método sort()permite ordenar los elementos
del array . El comportamiento por defecto del
Por ejemplo, si se compara el número 40 y el
método es ordenar los elementos del array
100, la función sort()llama a la función de
utilizando el código Uni-code de los caracteres
comparación con los parámetros (40, 100). La
del array a ordenar. Si se desea cambiar este
función de comparación calcula 40 - 100 y
comportamiento existe la posibilidad de enviar
devuelve -60 (un número negativo).
una función de ordenación como parámetro.
El método sort() determina que 40 es menor
Por ejemplo, para ordenar números no nos
que 100 y ordenará los valores según esta
interesa este comportamiento: si los números
información.
se ordenan como strings , “25” sería mayor que
“100”, ya que “2” es mayor que “1”.
Para solucionar este inconveniente, el método
sort() permite cambiar su comportamiento si le
14
3.4 Comprar un producto
La funcionalidad comprar producto es
indispensable si queremos realizar un ranking
de los productos más vendidos. La
funcionalidad que se quiere implementar es
que el comprador informe sobre el producto
deseado y que decrezca el número de stock del
producto. En este caso, el comprador debe
decir el número de producto que desea
comprar. El código JavaScript asociado a esta
funcionalidad se puede ver en el siguiente
código:
function comprar(numproducto) {
if (productos[numproducte] !== undefined &&
productos[numproducte] > 0) {
let cantidad = 0
if (ventas.has(numproducto)) {
cantidad = ventas.get(numproducto);
}
cantidad++;
ventas.set(numproducto, cantidad);
productos[numproducto]--;
ranking();
verEstoque();
} La clave vendidos debe coincidir con el índice
} de productos y, por consiguiente, es más
A continuación se muestra la llamada HTML
desde el botón comprar producto. Desde la
página HTML se hace el paso de parámetro con
el valor que el usuario introduzca en el textbox .
Este valor debe coincidir con un número de
producto válido.
<input type="texto" id="numProducto"
size="10"/>
<button onclick ="comprar
(document.getElementById('numProducte').val
ue);" >Comprar Producto</button>
El evento onclick del botón hace la llamada a la
función JavaScript comprar()pero esta función
necesita del número de producto que se desea
comprar. Así, desde la página web se accede al
elemento numProducto, que es el textbox que
utiliza el usuario para informar del producto
que desea comprar, y se toma el valor. Este
valor se envía por parámetro a la función
comprar().
Una vez se realiza la llamada a la función
comprar() ésta debe realizar las siguientes
acciones:
‣ Comprobar que el stock del producto se
haya definido y sea superior a 0: if
(productos[numproducto] !== undefined &&
productos[numproducto] > 0).
‣ Comprobar si el producto ya se encuentra en
el mapa vendidos; si es así, recuperamos el
valor asociado a la clave numproducto y, en
caso contrario, asignamos 0 a la cantidad: if
(vendidos.has(numproducto)).
‣ Incrementar en uno la cantidad vendida.
‣ Asignar el nuevo valor a vendes:
vendes.set(numproducto, cantidad);
‣ Reducimos el número de productos en stock
en uno: productos[numproducto]--;.
‣ En cualquier caso, se muestra el ranking y se
actualiza el listado de productos por pantalla.
Fíjese que vendidos es un map y no un array,
así que se trata de una colección desordenada
y se añaden los elementos indicando la clave y
el valor con el método set(), se recuperan con
get() y se comprueba si la clave existe con has().
En este caso hemos optado por utilizar un
diccionario de datos porque el orden en el que
se añaden los elementos no es importante y, en
caso de que se eliminara algún valor del mapa,
no queremos que las claves cambien (lo que
ocurre cuando se elimina un elemento de un
array , ya que los índices de todos los
elementos posteriores se actualizan para seguir
siendo consecutivos).
seguro utilizar un mapa.
15
Mostrar el ranking de los productos más vendidos
La función que calcula el ranking de los productos más vendidos se
basa en un array en el que están almacenados los productos que ha
comprado el usuario. Este array se va llenando a medida que el usuario
utiliza la función compra(numProducte).
El código para obtener un ranking ordenado de mayor a menor es el
siguiente:
function sortProducto(a, b) {
const aa = a.split("-")[0];
const bb = b.split("-")[0];
return aa - bb;
} identificador para cada producto.
El mapa vendidos utiliza su clave como número de producto.
Es importante remarcar este hecho ya que a la hora de realizar la
ordenación, la función sort()pone en la primera posición del array el
mayor número de unidades vendidas y perderemos a qué producto
corresponde.
Para generar el ranking de ventas nos encontramos con dos problemas:
‣ vendidos es un mapa y los mapas no se pueden ordenar.
‣ si lo convertimos en un array y lo ordenamos mediante el método
sort(), se pierde la correspondencia “índice-clave” con el array de
productos, ya que utilizamos el índice de productos cómo

function ranking() {
let aux = []; Debemos inventarnos una forma de no perder la referencia al producto.
Por suerte, sabemos que la función de ordenación la podemos cambiar.
for (let [numproducto, cantidad] of vendidos) {
La idea es la siguiente: para no perder la referencia al producto,
aux.push(cantidad + "-" + numproducto);
después de realizar la ordenación, éste debe estar dentro del valor
} junto con las unidades vendidas. Así, podemos crear una cadena de
aux.sort(sortProducto).reverse(); texto en la que una parte de la cadena sean las unidades vendidas y
let listado = ""; otra parte corresponda al producto asociado. Por ejemplo, si tenemos
for (let valor of aux) { 50 unidades vendidas del producto 3, podemos construir una cadena
de texto similar a “50-3”. Y así con todos los productos vendidos.
let [stockProducto, codiProducto] = valor.split("-");
listado += `<li>se ha vendido ${stockProducto} unidades del
producto ${codiProducto}</li>`;
}
document.getElementById("vendidos").innerHTML = listado;
}

16

Vea el código utilizado para crear un nuevo array donde guardamos las
cadenas de texto con el número de unidades vendidas y su producto.
for (let [numproducto, cantidad] of vendidos) {
aux.push(cantidad + "-" + numproducto);
} si el segundo valor es menor, un número negativo si el primer valor es
Observa que se ha utilizado for…of para recorrer el mapa de vendidos,
desestructurando el elemento, de modo que la clave queda asignada a
numproducto y el valor a cantidad.
Aunque en este ejemplo hemos utilizado const para indicar que los
valores de aa y bb no van a cambiar, esto no es necesario. Se podría
haber utilizado let.
Todas las funciones de ordenación deben devolver un número positivo
menor y 0 si son iguales. Para realizar el ranking de los productos más
vendidos se debe comparar las unidades vendidas de dos productos.
En este caso, a tiene la forma unidades-vendidas-de-productoA uy b
tiene la forma unidades-vendidas-de-productoB . Debemos separar las
unidades vendidas del número de producto.

Una vez obtenidas las variables, las concatenemos para generar la

Para separar una cadena de texto podemos utilizar el método split(). A
cadena de texto y las añadimos al array auxiliar y, seguidamente, la
este método le podemos pasar un carácter o una string y romperá la
ordenamos mediante el método sort(), pasando como argumento la
cadena de texto cada vez que encuentre ese carácter o string .
función sortProducto(). Ésta es la función que se pasa como argumento:
function sortProducto(a, b) {
La sintaxis de la función split()es la siguiente:
const aa = a.split("-")[0];
let nuevo_array = cadena.split([separador[, limit]])
const bb = b.split("-")[0];
El primer parámetro es opcional y especifica el carácter a utilizar para
return aa - bb;
separar la cadena de texto. Cada cadena de texto separada del original
} se almacenará en una posición del array devuelto. El segundo
En este caso, en lugar de pasar la función sortProducto()podríamos parámetro indica el número de veces que se separará como máximo la
haber utilizado una función de flecha, pero, dado que esta función de cadena de texto utilizando el separador.
ordenación es algo larga, se ha optado por implementarla como una
función estándar; de esta forma el código resulta menos enrevesado.
En definitiva, si invocamos el método split(), en los parámetros de la
función tenemos que, en la primera posición, [0] , estamos accediendo
Cabe recordar que, por defecto, el método sort()hace la ordenación al número de unidades vendidas y, en la segunda posición, [1] , al
alfabéticamente, pero esto no nos interesa porque se interpretaría que producto asociado.
5 es mayor que 100, ya que al ordenar cadenas de texto se hace la
comparación del código cada carácter y no se interpreta como número.

17
18