Nov 28 2022

duduromeroa.com

Javascript

Programación para web (p4): estructura de datos, objetos, arreglos de datos


Esta sección aportará con estudio y análisis de la sintaxis del lenguaje de programación Javascript, creado en sus fases iniciales por el estadounidense Brendan Eich en 1995.

George Póyla, matemático. Resolver problemas de diseño. www.duduromeroa.com

Por Eduardo J. Romero Andrade
| Guayaquil

Twitter   JS para Guayacxs   duduromeroa@gmail.com



Aunque no sea evidente, cada objeto de nuestro entorno presenta detalles que pueden ser enlistados. Al lado mío, mi celular tiene un peso, dimensiones, color, año de creación y más de una docena de detalles técnicos, todos ellos enumerables en una gran lista –a veces ordenada– de valores secuencia.

Así mismo, una estructura de datos como los que veremos a continuación sí pueden ser alterados varias veces una vez definidos. A diferencia de los datos primitivos –como numéricos, alfanuméricos o boleanos– que no pueden ser alterados, excepto para arrojar un nuevo dato o resultado. Imaginemos una estructura de datos como una plantilla de jugadores de un equipo de fútbol: si bien el D.T. establece de antemano a los jugadores, esa plantilla no será fija: algunos entrarán, otros saldrán.

Estructura de datos
ARREGLO DE DATOS

Muchos lenguajes de código presentan un tipo de dato conocido como arreglo –array–. Funciona como una línea de casilleros cuya ubicación de sus elementos es enumerada desde el cero -0- en adelante. Cada casillero aloja un elemento –solo tipo de dato numérico o alfanumérico– u otro arreglo. Finalmente, cada elemento de un arreglo puede ser accedido desde fuera mediante la sintaxis nombreDelArreglo[0]; donde [0] ubica el índice del primer elemento del arreglo.

Para Haverbeke[1], "Los arrays –arreglos– son un tipo de objeto especializado para almacenar secuencias de datos".

// Arreglo de 3 elementos
var menu = [
// Indice 0
"Ceviche de camarón o pulpo", 
// Indice 1
"Cangrejo encocado", 
// Indice 2
"Encebollado de albacora"
];

// Se actualiza:
/* Ya no hay ceviche de 
camarón en el índice cero. */
menu[0] = "Ceviche de pulpo";

/* Se agrega nuevo 
plato en el índice 4 */
menu[4] = "Guatita";

console.log("* Hoy hay " + menu[4]);
//-> * Hoy hay Guatita

console.log("* Hoy hay " + menu[0]);
//-> * Hoy hay Ceviche de pulpo

Según el ejemplo de arriba, algunos platos podrían acabarse y ser eliminados del menú. Uno de los métodos para borrar elementos es el operador delete, sin embargo, este no es recomendado por cuando deja un espacio vacío e indefinido dentro del arreglo. Por lo que se recomiendan métodos más eficaces como pop() o shift() -ver más abajo, Métodos–.

 var menu = [
// Indice 0
"Ceviche de camarón o pulpo", 
];

// Borrar ceviche en índice cero
delete menu[0];

console.log("* Hoy hay " + menu[0]);
// --> * Hoy hay undefined

Para enumerar los elementos de un arreglo, es necesario un bucle que 'busque' repetidamente cada elemento de inicio al fin; además de la propiedad length para determinar la cantidad de los elementos del arreglo.

var menu = [
"Ceviche",
"Cangrejo",
"Encebollado"
];

// Itera elementos del arreglo
for (let conteo = 0; conteo < menu.length; conteo++){
// Añade strings a los resultados
menu[conteo] = "Hoy tenemos: " + menu[conteo];

// Muestra resultados
console.log(menu[conteo]);
}
/* 
* Ceviche
* Cangrejo
* Encebollado
*/

En otro ejemplo, cada elemento del arreglo puede ser evaluado y determinar así comportamientos según los resultados. En el ejemplo de abajo cada palabra del menú será evaluada para determinar si es plural o singular, femenino o masculino, mediante los métodos startsWith y endsWith; por lo que iniciar cada nombre del plato con la preposición correcta (el, la, los, las) será trabajo del algoritmo.

// Arreglo de menu
var menu = [
"guacamole",
"papitas",
"panes",
"salsa"
];

// Itera elementos del arreglo
// Inicia desde el elemento cero
for (let conteo = 0; conteo < menu.length; conteo++){
// Condicional: detecta palabras terminadas en 'e'
if(menu[conteo].endsWith("e")){
// Valor inicia de variable
var preposicion = "El ";
}
// Condicional: detecta palabras terminadas en 'as'
if(menu[conteo].endsWith("as")){
// Nuevo valor
var preposicion = "Las ";
}

// Condicional: detecta palabras terminadas en 'es'
if(menu[conteo].endsWith("es")){
// Nuevo valor
var preposicion = "Los ";
}

// Condicional: detecta palabras terminadas en 'a'
if(menu[conteo].endsWith("a")){
// Nuevo valor
var preposicion = "La ";
}

// Nuevo valor de menú + cada iteración 
menu[conteo] = preposicion + menu[conteo];
}

// Muestra el arreglo
console.log(menu);
// --> [ 'El guacamole', 'Las papitas', 'Los panes', 'La salsa' ]


Por otro lado, se debe tener en cuenta el tipo de alojamiento para el arreglo; por ejemplo, al guardarlo en una declaración const –para valores constantes que nunca cambiarán–.

Un arreglo alojado en una declaración const no permitirá alterar el arreglo, pero sí sus elementos internos.

 /* Arreglo inmutable al 
ser declarado como CONST*/
const arreglo = ["a","b","c"];

/* Se altera el elemento 
de la posición cero */
arreglo[0] = 100;
console.log(arreglo[0]);
// --> 100

/* Se altera el último elemento (-1) */
arreglo[-1] = "el Último elemento";
console.log(arreglo[-1]);
// --> el Último elemento

/* Eso da ERROR: Alterar 
el arreglo al ser 
declarado como CONST*/
// --> arr = [9,0,0];
/* --> ERROR: Asignar una 
variable a una constante */

RECORDAR

La cantidad de los valores en un arreglo se enumeran desde el número 1 en adelante. Pero la ubicación o índice de esos mismos valores se enumeran desde el 0 en adelante.

  • Índice: 0, 1, 2...
  • Cantidad: 1, 2, 3...

Tomando en cuenta lo expuesto en el recuadro amarillo de arriba: cada elemento del arreglo se lo 'extrae' a partir de su ubicación (abajo):

// Lista de propiedades
var celular = ["azul", 2019, 560, "Samsung", "Guayaquil"];

// Separador de lista
var item = "--";

/* Recordar: la plantilla literal `${...}`
establece un solo elemento que puede
ser invocado decenas de veces */

// Ojo con el separador "\n"
// Llamar a la cantidad de propiedades
console.log(celular.length + " propiedades" + "\n");
// --> 5 propiedades

console.log(`${item} ` + "Color: " + celular[0] + "\n" +
`${item} ` + "Año compra: " + celular[1] + "\n" +
`${item} ` + "Precio: " + celular[2] + "\n" +
`${item} ` + "Marca: " + celular[3] +  "\n" +
`${item} ` + "Ciudad de compra: " + celular[4] + "\n" );

/* -->
-- Color: azul
-- Año compra: 2019
-- Precio: 560
-- Marca: Samsung
-- Ciudad de compra: Guayaquil
*/

ANIDACIÓN DE ARREGLOS

Así mismo, cada arreglo puede contener otros arreglos. Y la invocación de los valores dentro de cada arreglo debe hacerme siguiendo el criterio de índices –enumerados desde el 0 en adelante–. En el ejemplo de abajo, cada valor es un índice enumerado (letra i) y cada arreglo también es un índice.

  • arreglo = [
  • i0, i1, i2,
  • [Arreglo3_i0, Arreglo3_i1],
  • [Arreglo4_i0, Arreglolo4_i1],
  • i5
  • ]

Para obtener el valor del arreglo de índice 5, y a su vez su valor de índice 1:

  • console.log(arreglo[0][2]);

¡No me cansaré de recordarlo!: en arreglos y objetos JS –incluso anidados–, toda ubicación o índice inicia desde cero.

/*  Los valores se muestran con el 
índice según la posición del elementos */

// Índice es 'i'
var arreglo = [
"i0", 
"i1", 
"i2",

// Arreglos anidados
["Arr.i3-Elem i0", "Arr.i3-Elem i1"], 
["Arr.i4-Elem i0", "Arr.i4-Elem i1"],
["Arr.i5-Elem i0", "Arr.i5-Elem i1"],

// Otro elemento
"i6"
];

// Mostrar arreglo índice 4, elemento indice 1
console.log(arreglo[4][1]);
// --> Arreglo4-i2

// Mostrar elemento índice 6
console.log(arreglo[6]);
// --> i6

ARREGLOS DE MÚLTIPLES DIMENSIONES

Javascript no provee -por ahora– de un método incorporado desde el propio lenguaje para generar arreglos cuyas relaciones entre sus datos sean del tipo propiedad: valor | valor | valor. Un ejemplo de un arreglo multidimensión –o matriz- sería el siguiente:

  • A | B | C | D | E |
  • X | 3 | 1 | 1 | 1 |
  • Y | 5 | 3 | 1 | 0 |
  • Z | 9 | 0 | 0 | 4 |

Sin embargo existe formas para generar arreglos con ese tipo de relación entre datos:

// Arreglo 1
let nombres = ["pop", "rock", "bolero"];
// Arreglo 2
let decada = [1990, 1970, 2001];
// Arreglo 3
let ciudad = ["Guayaquil", "Manta", "Quito"];

/* En este arreglo insertar 
los 3 arreglos anteriores */
var conjunto = [nombres, decada, ciudad];
// Mostrar todo
console.log(conjunto);
/* 
[
  [ 'pop', 'rock', 'bolero' ],
  [ 1990, 1970, 2001 ],
  [ 'Guayaquil', 'Manta', 'Quito' ]
]
*/

/* Para acceder a algún elemento 
del arreglo conjunto */
console.log(
/* 
- Acceder al arreglo conjunto 
- Acceder al arreglo índice cero
- Acceder al elemento índice dos 
*/
conjunto[0][2]
);
// --> bolero

Otro ejemplo de arreglo multidimensión y recuperación de elementos según el índice es:

// Arreglo múltiples
let vecindad = [
// Íncide 0
["Ruben", "Ramon"], 
// Íncide 1
["Chavo", "Florinda"],
// Íncide 2
["Clotilde", "Pati"] ];

console.log("La pareja del año es: " + 
// Índice cero, elemento cero
vecindad[0][0] + 
" y " + 
// Índice uno, elemento uno
vecindad[1][1]);
// --> La pareja del año es: Ruben y Florinda

Finalmente, un llamado a la función console.table() mostrará un esquema de tabla e índices

console.table(vecindad);
/* 
┌─────────┬────────────┬────────────┐
│ (index) │     0      │     1      │
├─────────┼────────────┼────────────┤
│    0    │  'Ruben'   │  'Ramon'   │
│    1    │  'Chavo'   │ 'Florinda' │
│    2    │ 'Clotilde' │   'Pati'   │
└─────────┴────────────┴────────────┘
*/

Otro desafío con arreglos múltiples -con elementos y sub elementos– es el siguiente: ¿Cómo ubicar un elemento en dentro de sub arreglos?:

// Arreglo múltiples
let valores = [ 
// indice cero
[["a", "b"], ["c", "d"], ["e", "f"]], 
// indice uno
[["d", "f"], ["g", "h"], ["i", "j"]], 
// indice dos
[["1", "2"], ["3", "4"], ["5", "6"]]
];

// -Ubica el arreglo con indice uno..
// -Luego, ubica el elemento con indice dos..
// -Luego, ubica el elemento con indice cero.
console.log(valores[1][2][0]);
// --> Elemento i

Finalmente, invocado la función console.table(valores) se accede a toda la tabla de índices:

 console.table(valores);
/* 
┌─────────┬──────────────┬──────────────┬──────────────┐
│ (index) │      0       │      1       │      2       │
├─────────┼──────────────┼──────────────┼──────────────┤
│    0    │ [ 'a', 'b' ] │ [ 'c', 'd' ] │ [ 'e', 'f' ] │
│    1    │ [ 'd', 'f' ] │ [ 'g', 'h' ] │ [ 'i', 'j' ] │
│    2    │ [ '1', '2' ] │ [ '3', '4' ] │ [ '5', '6' ] │
└─────────┴──────────────┴──────────────┴──────────────┘
*/

Arreglos con objetos dentro

Un arreglo puede contener objetos, y así mismo acceder a ellos mediante el siguiente ejemplo. Donde la sintaxis de acceso a los valores es: nombre_del_arreglo[ indice_del_arreglo ].valor

 /* Arreglos con objetos dentro */
let objetoYarreglos = [
{ a: 1, b: 2},
{ c: 3, d: 4},
]
/* Mostrar arreglo ubicación cero */
/* Ubicar el valor de 'a' */
console.log(objetoYarreglos[0].a);
// --> 1

ITERACIÓN CON SENTENCIA FOR/OF

La sentencia FOR/OF 'busca' cada elemento de un arreglo. Para Svekis y Putten [4], este es un método fácil de usar, pero no debería ser usado para alterar valores asociados al índice del arreglo [como sí se lo puede hacer con los métodos slice() o splice()]".

// Arreglos
let datosPersonales = [
"duduromeroa@gmail.com", 
"Eduardo", 
"Javier", 
"Romero", 
"Andrade"];

/* La primera variable 
guarda toda la iteración */
for (let tomar_e_iterar of datosPersonales){
console.log(tomar_e_iterar);
}
/* 
duduromeroa@gmail.com
Eduardo
Javier
Romero
Andrade
[Finished in 1.5s]
*/

Método Object.keys()

ITERANDO Y CONVIRTIENDO OBJETOS EN ARREGLOS CON FOR/OF

Para Svekis y Putten[4], podemos convertir objetos en arreglos mediante 3 procesos:

  • Convertir el nombre de los valores en arreglo.
  • Convertir los valores a arreglo
  • Convertir el par nombre/valor en un arreglo de dos elementos o multidimensional

En el ejemplo inferior extraemos solo las propiedades de cada valor del objeto para finalmente llevar esos datos a un nuevo arreglo:

RECORDAR

Los objetos en JS contienen datos en forma de par propiedad:valor –en inglés se conoce como keys/values pair–. Ejemplo:

  • color: rojo,
  • mes: enero,
  • edad: 45

// Objeto
let jergaGuayaca = {
amigo: "pana",
problema: "pito",
agradable: "chévere",
correcto: "posi"
}

/* Guardar la conversión a arreglo */
/*  Ojo con console.table */
let nombresVal = Object.keys(jergaGuayaca);
console.table(nombresVal);
/* 
┌─────────┬─────────────┐
│ (index) │   Values    │
├─────────┼─────────────┤
│    0    │   'amigo'   │
│    1    │ 'problema'  │
│    2    │ 'agradable' │
│    3    │ 'correcto'  │
└─────────┴─────────────┘
*/

RECORDAR

La función console.table() permite mostrar los valores de una estructura de datos –ya sean arreglos u objetos-.




Así mismo, mediante la iteración de la expresión of Object.keys(nombreArreglo) extraemos cada propiedad, enlistándola:

for(let recorrer of Object.keys(jergaGuayaca)){
console.log(recorrer);
}
/* 
amigo
problema
agradable
correcto
*/

En cambio, para recorrer los valores del objeto y pasarlos como un arreglo, la expresión Object.values(nombreArreglo) funciona de la siguiente forma:

// Convertir en arreglo
let nombresVal = Object.values(jergaGuayaca);
console.log(nombresVal);
// [ 'pana', 'pito', 'chévere', 'posi' ]

// Extraer los elementos del arreglo
for(let recorrer of Object.values(jergaGuayaca)){
console.log(recorrer);
}
/* 
pana
pito
chévere
posi
*/

RECORRER TODOS LOS PARES PROPIEDAD:VALOR DEL OBJETO CONVERTIDO EN ARREGLO

Se necesitará la combinación de las expresiones Object.keys(nombre_objeto) y el uso de un iterador For:

// Objeto con pares propiedad:valor
let jergaGuayaca2 = {
novia: "pelada",
despistado: "gil",
bienParecido: "pintero",
atrevido: "sabido"
}
// Convertir valores a arreglo
let exploraJerga = Object.keys(jergaGuayaca2);
/* Ahora el objeto jergaGuayaca2 
es un arreglo únicamente de valores */

// Ahora, recorre cada elemento del nuevo arreglo
for (let contador = 0; 
contador < exploraJerga.length; 
contador++){

// Muestra cada propiedad recorrida
console.log(exploraJerga[contador] + ": " 
// Muestra cada valor recorrido
// objeto[objetoConvertido][iterador]
+ jergaGuayaca2[exploraJerga[contador]] );
}
/* 
novia: pelada
despistado: gil
bienParecido: pintero
atrevido: sabido
*/

Para recorrer todos los pares simples propiedad:valor como si fuera un arreglo multidimensional –en este caso, un arreglo con tres arreglos anidados– el método Object.entries(nombreObjeto) permite –sin necesidad de un bucle For– lo siguiente:

// Objeto con pares propiedad:valor
let jergaGuayaca3 = {
comida: "jama",
loco: "lorenzo",
atrevido: "sabido"
}

// Convertir valores a arreglo
// Ojo con console.table()
let explorajergaGuayaca3 = 
// Obtiene todos los pares propiedad:valor
Object.entries(jergaGuayaca3);

// Los muestra como arreglo
console.log(explorajergaGuayaca3);
/* 
[
  [ 'comida', 'jama' ],
  [ 'loco', 'lorenzo' ],
  [ 'atrevido', 'sabido' ]
]*/


¿PORQUÉ DECIMOS QUE ES UN ARREGLO MULTIDIMENSIONAL?

Aunque un arreglo anide más arreglos, la multidimensión refiere a que los datos tienen una relación par propiedad: valor presente.



RECUPERACIÓN DE VALORES DE UN ARREGLO

OPERADOR SPREAD()

Obtiene los valores de un arreglo siempre que se lo use al invocar una función o al definir un arreglo. Para Antani y Stefanov[4] "spread se activa agregando tres puntos '...' junto al nombre del arreglo.

var abiertas = ['a', 'e', 'o'];
var cerradas = ['i', 'u'];

/* Variable que guarda nombres 
de arreglo con operador spread */
var vocales= [...abiertas, ...cerradas];
console.log(vocales);
// --> [ 'a', 'e', 'o', 'i', 'u' ]

En el ejemplo de arriba, gracias al operador spread se agregaron en un solo arreglo -arreglo 'vocales–' los elementos de los dos arreglos anteriores: 'abiertas' y 'cerradas'.

Así mismo, ya que el operador spread obtiene diferentes contenidos de arreglos en una sola invocación, este operador permite que un arreglo se comporte como un argumento válido desde una invocación.

Pero, ATENCIÓN: recordar la precedencia aritmética. Si no agrupásemos las operaciones entre paréntesis para que el sistema 'sume primero, multiplique luego y finalmente divida', el resultado daría en un valor diferente al que deseamos. Recordar la jerarquía de la precedencia aritmética -esto es materia de escuela-: primero se ejecutarán las multiplicaciones y las divisiones; luego la suma y la resta. Gracias a los paréntesis del ejemplo de abajo, le ordenamos al sistema que primero será (a+b), luego (c*d) y después, dividir ambas expresiones:

 
// función con 4 parámetros
function numeros(a,b,c,d){
// Operación a mostrar
console.log((a + b) / (c * d));
}

// arreglo
let pares = [2, 5];
// arreglo
let impares = [3, 7];

/* Función 'numeros' con 
arreglos spread como argumentos */
numeros(...pares, ...impares);
// 7 / 21
// 0.3333333333333333




OBJETOS (I)

Si un arreglo es una lista de nombres de propiedades (propiedad1, etc., etc,); entonces un objeto es un conjunto de propiedades y valores (propiedad1: valor o cantidad, etc., etc.). Para los lenguajes de programación, un objeto es todo aquel elemento real o ficticio que contiene aspectos enumerables e intercambiables con otros objetos. El concepto de objeto nace desde 1955, cuando investigadores noruegos y estadounidenses buscaban simular problemas reales del mundo real entendible para un sistema binario.

En el ejemplo de abajo, se creó un sencillo objeto con propiedades duales ( identificador : valor ). Para un sencillo objeto como este hay que tener en cuenta que:

  • Cada ( identificador : valor ) debe separarse entre comas, excepto la última.
  • Cada valor numérico va sin comillas.
  • Cada valor alfanumérico va CON comillas.
  • La invocación debe llamar a los nombres exactos del objeto y propiedad.
Juguetes para entender programación: ¿Por qué el término 'objeto' en lenguajes informáticos?

Un artículo publicado en 2013 por Adam Reed llamado Object-Oriented Programming and Objectivist Epistemology: Parallels and Implications –(p. 261, sección 4.3)– explica porqué el término 'objeto' y no otro, como 'cosa' o 'elemento', está incluido en la jerga informática desde la década de 1950 en adelante: en esos años el matemático estadounidense Seymour Papert profundizaba en investigaciones de psicología matemática e inteligencia artificial. En específico, Papert analizaba la aplicación de un sencillo lenguage de programación llamado Logo para enseñar aritmética en niños de séptimo grado.


Papert detectó un problema. Ese fue el carecer de una representación visual que les permita a los niños –mediante el lenguaje Logo– entender cómo algo es alterado por una acción. Por lo que se construyó un pequeño mecanismo con ruedas y un bolígrafo dentro, cubierto por una cúpula transparente. Este aparato -Papert le llamó tortuga– recibía sencillos mensajes desde el código que le permitía desplazarse, girar, rotar y dibujar formas geométricas sobre un papel. En otras palabras, ese objeto "recibía mensajes" y ejecutaba acciones a partir de esos mensajes, logrando un mejor acercamiento al problema del aprendizaje de conceptos abstractos en programación.


El video 'Seymour Papert presentando Logo en 1971', subtitulado en español por el instituto Intef muestra todo el proceso realizado con esos objetos junto con investigadores y estudiantes de esos años.


Seymour Papert junto con el artefacto 'tortuga' y el resultado de un dibujo realizado mediante código.
En la imagen: Seymour Papert junto con el artefacto 'tortuga' y el resultado de un dibujo realizado mediante código. Posiblemente entre 1969 y 1975. Tomado de Phogo: A low cost, free and “maker” revisit to Logo (nov. 2017) de Pablo Molins-Ruano, Carlos Gonzalez-Sacristan y Carlos Garcia-Saura.

Décadas después, en 1993, un genial recién graduado en matemáticas e informática de nombre Alan Kay visitó el laboratorio de Papert, donde absorbió su modelo y conceptos. El trabajo de Kay y de Papert junto a los de los noruegos Ole-Johan Dahl y Kristen Nygaard entre 1950 y 1967 sumó para crear un nuevo lenguaje de programación, el SmallTalk72. Este sentó las bases para un nuevo modelo de interacción mediante código con un computador: la programación orientada a objetos.



En el ejemplo de abajo, se creó un objeto con las características de un teléfono móvil ficticio. La forma de invocar cada propiedad dual requiere la sintaxis siguiente: Nombre del objeto . nombre de propiedad (recordermos que el punto significa acceder a).

 let celular_de_Dudu = {
marca: "Samsung",
modelo: "SM90",
year: 2019,
color_carcasa: "gris"
}

/* Nombre del objeto . nombre de propiedad*/
console.log(celular_de_Dudu.modelo);

Para agregar nuevos datos al objeto:

/* Objeto con dos pares/valores*/
let objeto = {
cosa1: "valor1",
cosa2: "valor2",
}

/* Agregamos un nuevo par/valor */
/* El valor se llama 'cosa3' */
objeto.cosa3 = "valor3";

// ** OJO ** //
/* Otra sintaxis para 
actualizar los datos del objeto: */
objeto["cosa3"] = "Valor nuevito";

/* Confirmamos actualización
 de nuevos elementos */
console.table(objeto);

/* Resultado:
┌─────────┬─────────────────┐
│ (index) │     Values      │
├─────────┼─────────────────┤
│  cosa1  │    'valor1'     │
│  cosa2  │    'valor2'     │
│  cosa3  │ 'Valor nuevito' │
└─────────┴─────────────────┘
*/

OBJETOS CON ARREGLOS DENTRO

Abajo, un ejemplo de un valor de objeto conteniendo valores en formato arreglo, y la forma de acceder a ambos:

/* Objetos con arreglos dentro */
let objeto = {
cosa1: "valor1",
cosa2: "valor2",

colores: ["verde", "rojo"],
nombres: ["Dudu", "Romero"],
}

// Acceder a elemento de ARREGLO
console.table("* Desde arreglo: " + 
objeto.colores[1]);
// --> rojo

// Acceder a elemento de OBJETO
console.table("* esde objeto: " + 
objeto.cosa1);
// --> valor1

En otro ejemplo, se podrían crear propiedades y valores separados en categorías, pero en formato arreglo. Por ejemplo, una lista podría agrupar los detalles técnicos de hardware; otra, las aplicaciones instaladas; y otra, los modelos disponibles.

// OBJETO
let celular = {
/*  LISTA. Al nombre de la 
propiedad le siguen dos puntos */
/*  Arreglo. Sus elementos van 
entre llaves rectas*/
software: [3, "Windows"],
// LISTA
carcasa: ["OLed", "rojo"]
}; 

// Separadores con plantillas literales
var item="* ";
var subItem="-";

// INVOCAR ELEMENTOS DE LISTA
console.log(`${item}` + "SOFTWARE");
// ELEMENTOS
console.log(`${subItem}` + 
"Cámaras: " + 
celular.software[0] +
 "\n" + 
`${subItem}` +
"Sistema: " + 
celular.software[1] + 
"\n" );

// INVOCAR ELEMENTOS DE LISTA
console.log(`${item}`+"CARCASA");
// ELEMENTOS
console.log(`${subItem}` +
"Pantalla: " + 
celular.carcasa[0] + 
"\n" + 
`${subItem}` +
"Carcasa: " + 
celular.software[1] + "\n" );

// * SOFTWARE
// -Cámaras: 3
// -Sistema: Windows
// ...

Luego (ejemplo abajo), si se desea leer uno de los elementos de la lista, se debe invocar el nombre del objeto, el nombre de la lista y la posición numérica del elemento

/* Le sigue al código de arriba */
/* Dice: invocar al objeto celular, 
al arreglo 'software' y al elemento 
con posición cero*/
console.log(celular.carcasa[0]);
// --> OLed

OBJETOS DENTRO DE OBJETO

Un objeto -lleno de propiedades y valores– también puede contener dentro de sí más objetos. El objeto interno –el objeto hijo– se convierte en propiedad del objeto padre, o objeto contenedor:

 
let himno = {
coro1: "Salve oh Patria, ¡mil veces!...",
coro2: "Ya tu pecho, tu pecho rebosa...",
	estrofas: {
	e1: "Indignados tus hijos del yugo",
	e2: "que te impuso la ibérica audacia,"
	},
	autores:{
	letra: "Juan León Mera", 
	musica: "Antonio Neumane",
	grito: "Viva el Ecuador!"
	}
}

// Objeto + propiedad1
console.log(himno.coro1);
// --> Salve oh Patria, ¡mil veces!...

// ObjetoPadre + ObjetoHijo + propiedad de objeto hijo
console.log(himno.estrofas.e1);
// --> Indignados tus hijos del yugo

// // ObjetoPadre + ObjetoHijo + propiedad de objeto hijo
console.log(himno.autores.grito);
// --> Viva el Ecuador!

OBJETOS DENTRO DE ARREGLO

Con una sintaxis de código deteminada, también podemos alojar datos con estructura de objeto dentro de un arreglo.

// OBJETOS DENTRO DE ARREGLO
let bandas = [
{ punk: ["NTN", "The Clash", "Misfist"], vigente: true},
{ hRock: ["LZeppelin", "BSabbath", "VíboraJulieta"], ardilla: true},
{ blues: ["Cream", "Joe Cocker"], vigente: false},
];

// INVOCACIÓN DE UN SOLO ELEMENTO DE UN OBJETO
console.log(
// nombre_Arreglo [ ubicación_Numérica_De_Arreglo ] . nombre_Elemento;
bandas[0].vigente + "\n"
); //--> TRUE

// INVOCACIÓN DE UN SOLO OBJETO
console.log(
// nombre_Arreglo [ ubicación_Numérica_De_Arreglo ];
bandas[1]
);

Al final, es posible combinar arreglos y objetos para invocar –respetando la sintaxis correcta– uno o más valors y propiedades:

 // Objeto
let poetasEcu= {
EGonzalo : 1971,
JJolmedo : 1847,
JCAndrade : 1978
}

// Arreglos
let pais= ["Ecuador", "etc", "etc"]
let provincia= ["Pichincha", "etc", "etc"]
let nombres = ["Gonzalo Escudero", "etc", "etc"]

/* Invocaciones */
console.log(
// Invocar elemento de arreglo
"El poeta "	+ nombres[0] + 

// Invocar elemento de arreglo
" murió en " + provincia[0] + 

// Invocar elemento de arreglo
", " + pais[0] + 

// Invocar propiedad de objeto
", en " + poetasEcu.EGonzalo + ".");

INSERTAR VALORES EN ARREGLOS

Con el método push() -abajo-, se pueblan con valores/elementos a arreglos vacíos o con elementos ya incluídos. El nuevo elemento se ubicará al final del arreglo.

// Dos elementos
const cosillas = ['Verde', 'Rojo'];
// Agrega nuevo elemento al final
cosillas.push("nuevo");
// Agrega nuevo elemento al final
cosillas.push("otro nuevo");
// Se guarda todo el arreglo aquí
let cosillasElementos = cosillas
// Se muestra
console.log(cosillasElementos);
// --> 'Gris'
// --[ 'Verde', 'Rojo', 'nuevo', 'otro nuevo' ]

RECORDAR

Un valor alfanumérico siempre debe ser declarado entre comillas: var pais = "Ecuador" . Mientras que un valor numérico operable con aritmética no necesita comillas.



También se puede crear una función para insertar elementos:

// Variable cuarda arreglo vacio
 let paises = [];

/* Donde 'cosa1' y  'cosa2' puede ser 
un valor o un arreglo */
 function agregar(cosa1, cosa2) {

// Método push --> insertar datos
// Hacia el arreglo donde se alimentarán los argumentos
   paises.push( {cosa1, cosa2} );
}
/* ALIMENTA ARGUMENTOS */
agregar(
/* POSICIÓN CERO */ 
/* cosa1 */ ["Alemania", "Bélgica", "Holanda"], 
/* cosa2 */ false); 

agregar(
/* POSICIÓN UNO */ 
/* cosa1 */ ["Ecuador", "Perú", "Colombia"], 
/* cosa2 */ false); 

agregar(
/* POSICIÓN DOS */ 
/* cosa1 */ ["Uganda", "Sudáfrica"], 
/* cosa2 */ true);

/* LLAMAR LOS DATOS SEGÚN LA POSICIÓN */ 
/* Disponibles [0], [1], [2] */ 
console.log(/**/paises[1]/**/);

// Se muestra pos. [1]
/* {
cosa1: [ 'Alemania', 'Bélgica', 
'Holanda', 'Austria' ],
cosa2: false} */

Iteración en objetos

Sentencia for/in

Es una nueva alternativa al clásico bucle 'for'. Con ligeras variaciones en la sintaxis se obtendrá o solo las propiedades o solo los valores del arreglo. Para Svekis y Putten[4], for/in no sería útil para iterar arreglos puesto que solo retornarán índices de ubicación de los elementos.

// Objeto
let banderaGye = {
color1: "blanco",
color2: "celeste",
estrellas: 3,
franjas: 5
}

// Mostrar SOLO las propiedades
for (let iterar in banderaGye){
console.log(iterar);
}
/* 
color1
color2
estrellas
franjas
*/

console.log("_ _ _" + "\n");

// Mostrar SOLO los valores
for (let iterar in banderaGye){
console.log(banderaGye[iterar]);
}
/* 
blanco
celeste
3
5
*/

Métodos

JS ofrece funciones para manipular arreglos –y como veremos, también objetos–. Esas funciones son los métodos. Estos permiten 'tocar' los elementos de una estructura de datos; por ejemplo, para insertar o eliminar –al final del arreglo– elementos varios:

// Lista de propiedades. 
var cardinal = ["norte"];

// Inserta nuevo elemento
cardinal.push("sur");

// --> Elimina el último elemento
// cardinal.pop();

console.log(
// Llame según ubicación
cardinal[0] + "\n" +
// Llame según ubicación
cardinal[1] + "\n"
);

// norte
// sur


Subir al inicio Seguir a la parte quinta



BIBLIOGRAFÍA:
    [1] Eloquent JavaScript 3ra edición. 2018. Marijn Haverbeke. No starch press.
    [2] MDN Web Docs, Javascript. Mozilla Foundation.
    [3] JavaScript: The Definitive Guide. David Flanagan (2020). Editorial O'Reilly.
    [4] Object-Oriented JavaScript Ved Antani, Stoyan Stefanov (2017). Packt Publishing.
    [5] Laurence Lars Svekis, Maaike van Putten. JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun, interactive, and dynamic web apps, games, and pages (2021). Editorial Packt.
    [6] Black, A. P. (2013) Object-oriented programming: Some history, and challenges for the next fifty years. Information and Computation. Elsevier.
    [7] John R. Pugh, Wilf R. LaLonde, David A. Thomas (1987) Introducing object-oriented programming into the computer science curriculum. ACM SIGCSE BulletinVolume 19Issue 1Feb. 1987 pp 98–102https://doi.org/10.1145/31726.31742.