Programación para web (4/8): estructura de datos, objetos, arreglos de datos

Cada objeto material de nuestro entorno presenta propiedades que pueden ser enlistadas. Por ejemplo, mi celular tiene un peso, dimensiones, color, año de creación y más de una docena de detalles técnicos. Sin embargo, esas propiedades no pueden ser absolutamente modificadas por mi.

A diferencia de un objeto material, una estructura de datos sí puede ser alterada según objetivos únicos. Esos datos pueden ordenarse o ampliarse, tal como si fuera el listado de la plantilla de jugadores en un equipo de fútbol: si bien el director técnico la establece de antemano, esa plantilla podría no será fija: algunos jugadores entrarán, otros saldrán; es decir, la plantilla (los datos) podría ser alterada según desafíos de cada encuentro deportivo.

Estructura de datos

ARREGLO DE DATOS

Muchos lenguajes de código permiten el uso de un tipo de dato conocido como arreglo –array–. Este es una línea de casilleros cuya ubicación de sus elementos es enumerada -en lo interno- desde el cero en adelante. Cada casillero aloja un tipo de dato numérico o alfanumérico o incluso otro arreglo o un objeto. 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".

En Javascript

// 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:
/* Ahora, en el indice cero hay 'pulpo' */
menu[0] = "pulpo";

/* Ahora, en el indice 4 hay 'guatita' */
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 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(). Muchos de estos métodos se revisarán luego.

Por otro lado, 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.

En Javascript

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]);
}
/* 
Hoy tenemos: Ceviche
Hoy tenemos: Cangrejo
Hoy tenemos: Encebollado
*/

En el siguiente ejemplo se demuestra que los arreglos pueden contener uno o más arreglos y objetos:

En Javascript

// Arreglo
var cosas = [
// Cada elemento se separa con coma
"compu","zapatos",
      // Objeto con propiedades y valores
      cajaObjeto = {
            "camisa": "blanca", 
            "gorra": "Nike",
            "corbata": "amarilla"},
      // Arreglo con elementos  
      arregloLibros = [
            "diccionario", 
            "novela"
      ]];

/* Se invoca al ARREGLO y al elemento cero 'compu' */
console.log(cosas[0]);
// compu

/* Se invoca al ARREGLO, luego al OBJETO -índice '2'- */
console.log(cosas[2]);
// { camisa: 'blanca', gorra: 'Nike', corbata: 'amarilla' }

/* Se invoca al ARREGLO, al índice del OBJETO, y 
luego al valor de 'camisa' */
console.log("La camisa tiene color " + cosas[2].camisa);
// La camisa tiene color blanca

/* Se invoca al ARREGLO -indice [3]-, luego al elemento 0 */
console.log( "El libro es un " + cosas[3][0] );
// El libro es un diccionario

RECORDAR:

• Los arreglos solo contienen elementos con índice de ubicación.
• Los objetos solo contienen propiedades -identificadas con un nombre- que contienen valores.

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 */

Tomando en cuenta lo expuesto en el recuadro anterior. Cada elemento del arreglo se lo 'extrae' a partir de su ubicación:

En Javascript

// 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
*/

LOS ARREGLOS PUEDEN CONTENER INVOCACIONES DE FUNCIÓN

Recordemos que las funciones son también datos. Por lo que un arreglo puede contener invocaciones de función de otros arreglos u objetos:

En Javascript

// Función con argumento
function cubo(x) {
  return x * x;
}

// Arreglo con invocacines de función
const llamadorFunc = [
  cubo(2),
  cubo(3),
  cubo(4)
];

// Invocación de las invocaciones de función
console.log(llamadorFunc.join(', ')); 
// 4, 9, 16

ANIDACIÓN DE ARREGLOS

Cada arreglo puede contener otros arreglos. Y su ubicación dentro del arreglo está dado mediante índices –desde el 0 en adelante–. En el ejemplo de abajo, cada elemento es un índice enumerado (ele0, ele1...); y al mismo tiempo, cada arreglo también es un índice.

En Javascript

// Arreglo con elementos y elementos arreglo
// Cada elemento es separado con una coma
var arreglo = [ 
// Elementos
"ele0", "ele1", "ele2", 
// Elemento arreglo con índice 3
["ele3", "elemento indice 3" ],
// Elemento arreglo con índice 4
["ele4", "elemento indice 4" ]
 ]

// Invocar al elemento índice 3 -que es otro arreglo-
console.log(arreglo[3]);
// [ 'ele3', 'elemento' ]

// Invocar al elemento índice 0 
console.log(arreglo[0]);
// ele0

// Invocar al elemento índice 4 y su sub-elemento índice 1
console.log(arreglo[4][1]);
// ele0

¡No me cansaré de recordarlo!: en arreglos toda ubicación o índice inicia desde cero en adelante.

ARREGLOS DE MÚLTIPLES DIMENSIONES

Un arreglo de multidimensión muestra datos en forma de filas y columnas. Cada columna y fila agrupa un conjunto de datos relacionados entre sí.

• columA | columB | columC
• .valor | .valor | .valor
• .valor | .valor | .valor
• .valor | .valor | .valor

Un ejemplo de un arreglo multidimensión –o matriz- en JS sería el siguiente:

En Javascript

// Arreglo de tres filas y cuatro columnas
let arreglo = [
      // arreglo elemento 0
      [1, 2, 3, 4],
      // arreglo elemento 1
      [10, 20, 30, 40],
      // arreglo elemento 2
      [100, 200, 300, 400]
];

// Acceder al elemento 0, y al subelemento 0
console.log(arreglo[0][0]); 
// 1

// Acceder al elemento 1, y al subelemento 2
console.log(arreglo[1][2]); 
// 30

/* Insertar nuevo elemento en el elemento 
dos y en el subelemento tres */
arreglo[2][3] = 20;

// Se confirma cambio
console.log(arreglo[2][3]);
// 20

Otra forma para generar arreglos multidimensionales:

En Javascript

// 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:

En Javascript

// 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, subelemento cero
vecindad[0][0] + 
" y " + 
// Índice uno, subelemento 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

En Javascript

console.table(vecindad);

// -> La pareja del año es: Ruben y Florinda
/*
┌─────────┬────────────┬────────────┐
│ (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?:

En Javascript

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

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

// Ubicar el elemento 0 con el sublemento 1
console.log(valores[0][1]);
// [ 'c', 'd' ]

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

En Javascript

 // Mostrar todos los elementos del arreglo
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' ] │
└─────────┴──────────────┴──────────────┴──────────────┘
*/

En Javascript

// Mostrar solo los elementos del subarreglo cero
console.table(valores[0]);
/*
┌─────────┬─────┬─────┐
│ (index) │  0  │  1  │
├─────────┼─────┼─────┤
│    0    │ 'a' │ 'b' │
│    1    │ 'c' │ 'd' │
│    2    │ 'e' │ 'f' │
└─────────┴─────┴─────┘
*/

Arreglos con objetos dentro

Un arreglo puede contener objetos y así mismo acceder a ellos. Donde la sintaxis de acceso a los elementos es: nombre_del_arreglo[ indice_del_arreglo ].valor

En Javascript

 /* Arreglos con dos objetos -propiedades y valores- */
let arregloConObjeto = [
{ a: 1, b: 2},
{ c: 3, d: 4},
]

/* ACCEDER A LOS VALORES DE LAS PROPIEDADES */
/* Se da el índice 0 y se accede 
al valor de la PROPIEDAD 'a' */
console.log("Valor de propiedad: " + arregloConObjeto[0].a);
// Valor de propiedad: 1

/* Se da el índice 1 y se accede 
al valor de la PROPIEDAD 'd' */
console.log("Valor de propiedad: " + arregloConObjeto[1].d);
// Valor de propiedad: 4

/* Se da el índice 1 y se accede 
al valor de la PROPIEDAD 'd' */
console.log("Valor de propiedad: " + arregloConObjeto[1]);
// Valor de propiedad: [object Object]

Sin embargo, en las últimas líneas la una invocación del objeto con el índice 1 da como resultado [object Object]. ¿Por qué? esa invocación solo muestra el tipo de dato de ese objeto, no sus valores.

JSON.stringify()

Esta función convierte los valores del objeto a dato string. Pudiendo con eso mostrar los valores de la invocación de un objeto desde un arreglo:

En Javascript

let arregloConObjeto = [
{ a: 1, b: 2},
{ c: 3, d: 4},
] 
/* Se invoca al índice 1 para mostrar 
las propiedades y valores de su objeto */
console.log( JSON.stringify(arregloConObjeto[1]) );
// {"c":3,"d":4}

¿Y qué sucede si deseamos mostrar solo los valores de ese objeto desde una invocación?, ¿y también conocer la cantidad de propiedades de un objeto específico?:

En Javascript

let arregloConObjeto = [
  { a: 1, b: 2 },
  { c: 3, d: 4, e: 5, f: 6 },
];

// Alojamos la invocación del índice en una variable
let obj = arregloConObjeto[1];

/* uso de for...in -recorre SOLO los valores 
de las propiedades */
for (let recorrer in obj) {
  console.log(obj[recorrer]);
}
// -> 3, 4, 5, 6

/* Para contar la cantidad de 
propiedades del objeto índice cero */
console.log("Cantidad de propiedades: " + 
Object.keys(arregloConObjeto[0]).length);
// Cantidad de propiedades: 2

En el ejemplo anterior la función Object.keys() devuelve solo las propiedades del objeto indicado y se exige -accediendo a 'lenght'- que solo devuelva la cantidad de esas propiedades.

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]
*/

Y para determinar la cantidad de elementos contenidos en un arreglo, solo se accede a la propiedad interna length:

En Javascript

console.log("Elementos: " + datosPersonales.length);
// Elementos: 5

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:

// 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'  │
└─────────┴─────────────┘
*/

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' ]
]*/

RECUPERAR 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 elementos, entonces un objeto es un conjunto de propiedades y valores {propiedad1: "valor", ...}. El concepto de objeto es un proceso que inició en 1955 cuando investigadores noruegos y estadounidenses buscaban simular mediante un lenguaje de programación problemas del mundo real.

CRITERIOS DEL OBJETO EN JAVASCRIPT

• Cada { identificador : "valor" } debe separarse entre comas, excepto el último par.
• 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 al nombre de la 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', fue 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 de carecer de una representación visual que les permita a los niños –mediante el lenguaje de programación Logo– entender cómo una cosa es alterada por una acción externa. Entonces Papert construyó un mecanismo rodante del tamaño de una caja de zapatos. Este contenía un bolígrafo vertical dentro de una carcasa transparente. Este aparato -Papert le llamó tortuga– recibía sencillas órdenes desde el lenguaje Logo y que le permitía a la tortuga desplazarse, girar, rotar y dibujar, gracias al bolígrafo vertical, formas geométricas sobre papel. Lo ensayado por Papert inició un mejor acercamiento al problema del aprendizaje de conceptos abstractos en lenguajes de programación, y al representar el mundo real material (y no solo mediante cálulos abstractos) en acciones concretas mediante comandos desde una computadora.

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.

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.

Los objetos no serán iguales al compararlos con sus valores aunque sean similares

Para David Flanagan en JavaScript: The Definitive Guide (2020), los "objetos no pueden compararse con sus valores", pues dos objetos diferentes nunca serán estrictamente iguales.

En Javascript

// OBJETOS
let a = {b:1};
let b = {c:1};

// Objetos diferentes no son iguales
console.log(a===b);
// False

// ARREGLOS
let m = [1];
let n = [1];
console.log(m===n);
// False

Dos objetos serán iguales, solo y únicamente, si uno de ellos referencia correctamente al otro

Solo mediante la correcta referencia hacia un objeto (con las mismas propiedades) es que ambos contenedores pueden ser iguales. En el ejemplo de abajo: ya que la variable 'a=[]' aloja un arreglo vacío; y la variable 'b=' aloja a 'a=', entonces alojar desde 'b' y luego invocar desde 'a', corresponde a una igualdad.

En Javascript

// Arreglo vacio
let a = [];
// Otra variable contiene el arreglo vacio
let b = a;
/* Se inserta un valor, pero desde 
LA variable que contiene a LA variable DEL arreglo */
b[0] = 1;
// Qué contiene el índice cero de la variable 'a'
a[0]

console.log(a===b);
/* Ya que la variable del arreglo 
esta contenida en otra variable, la igualdad
de ambas variables se consideran iguales */
// true

En el ejemplo de abajo el objeto agrupa las características de un teléfono móvil. Para invocar cada valor de propiedad: nombre del objeto.nombre de propiedad (el punto significa acceder a). Luego, para mostrar la cantidad de propiedades usamos el método Object.keys(); y para mostrar solo los nombres de las propiedades, usamos Object.keys(). forEach(nombre => { });.

En Javascript

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

/* Nombre del objeto . nombre de propiedad*/
console.log("El modelo es " + 
celular_de_Dudu.modelo);
// El modelo es SM90

// Y para mostrar la cantidad de propiedades del objeto
// Usar el método Object.keys()
console.log("Cantidad de propiedades: " + 
Object.keys(celular_de_Dudu).length);
// Cantidad de propiedades: 4

/* Y para mostrar solo los nombres 
de las propiedades del objeto */
Object.keys(celular_de_Dudu).forEach(nombrecito => {
  console.log("Propiedad: " + nombrecito);
});
/*
Propiedad: marca
Propiedad: modelo
Propiedad: year
Propiedad: color_carcasa
*/

Para agregar nuevo par propiedad/valor:

En Javascript

let objeto = {
cosa1: "valor1",
cosa2: "valor2",
}

/* La nueva propiedad es 'cosa3' */
/* Y su nuevo valor es 'valor3' */
objeto.cosa3 = "valor3";

/* Otra sintaxis */
objeto["cosa3"] = "Valor nuevito";

/* Confirmamos */
console.table(objeto);
/* 
┌─────────┬─────────────────┐
│ (index) │     Values      │
├─────────┼─────────────────┤
│  cosa1  │    'valor1'     │
│  cosa2  │    'valor2'     │
│  cosa3  │ 'Valor nuevito' │
└─────────┴─────────────────┘
*/

Así mismo, podemos conectar un código HTML junto a otro Javascript para crear una instancia desde una clase dada. Para conectar un código (con una clase) y vincularla hacia un código HTML. Primero damos el HTML:

En HTML

<!DOCTYPE html>
<meta charset="UTF-8">
<head>
      <!-- APUNTA A UN CÓDIGO EXTERNO DEL MISMO DIRECTORIO -->
      <script src="testA.js"> </script>

      <script>
      // Alojo y llamo a nueva instancia desde class noticias{}
      // Instanciador new crea un objeto de clase
      const invocaClase = new noticias;

      // Invoca clase y método
      invocaClase.noticiero1();
      </script>
</head>

<body>  
</body>
</html>

Luego definiendo el script en Javascript:

Nombre del archivo: testA.js

// Clase Padre
class noticias{

// Método
noticiero1(){
console.log("Noticias de la mañana");
}

// Método
noticiero2(){
console.log("Noticias de la tarde");
}
}

Al activar la consola, el resultado de la conexión de ambos códigos es: Noticias de la mañana

OBJETOS CON ARREGLOS DENTRO

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

PARA ACCEDER DESDE OBJETO HACIA ELEMENTO DE ARREGLO

• objeto.arreglo[indiceElemento]

PARA ACCEDER A PROPIEDAD DE OBJETO

• objeto.nombrePropiedad

En Javascript

/* Objetos */
let objeto = {
cosa1: "valor1",
cosa2: "valor2",
// Arreglos y sus elementos
colores: ["verde", "rojo"],
// El último elemento no finaliza en coma
nombres: ["Dudu", "Romero"]
}

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

// Acceder a objeto.propiedad
console.table("* esde objeto: " + 
objeto.cosa1);
// * Desde objeto: valor1

En otro ejemplo, cada propiedad tiene un arreglo -con elementos- en forma de valores. RECORDAR: Cada elemento de arreglo está ubicado en un índice. Para mostrar cada elemento sin las llaves [...] se recurre al método join(), cuyo argumento funciona como separador.

En Javascript

let bandasMiembros = {
yucaerecta: ["Olivo", "Dudi","Max"],
viboraJulieta: ["Carlos", "Bruno", "Gabo"],
broca: ["Rick", "Dudi", "Miguel"]
}; 

console.log(bandasMiembros.yucaerecta);
// [ 'Olivo', 'Dudi', 'Max' ]

/* Si se desea mostrar los elementos sin las llaves rectas,
usar el método join */
console.log(bandasMiembros.yucaerecta.join(', '));
// Olivo, Dudi, Max

En otro ejemplo más complejo:

En Javascript

// OBJETO
let celular = {
/* A cada propiedad le siguen dos puntos 
junto al arreglo con sus elementos */
software: [3, "Windows"],
carcasa: ["OLed", "rojo"]
}; 

/* RECORDAR: Cada elemento de arreglo 
está ubicado en un índice. */

// 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, para mostrar uno de los elementos de uno de los arreglos: objeto.propiedadArreglo [indice]:

En Javascript

/* Le sigue al código de arriba */
/* objeto.propiedadArreglo[indice] */
console.log(celular.carcasa[0]);
// --> OLed

OBJETOS DENTRO DE OBJETO

Un objeto -con 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 u objeto contenedor:

En Javascript

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:

Mostrar uno de los elementos del objeto, todo el objeto, solo el nombre de la propiedad, y luego todos los nombres de propiedades del objetoTambién podemos alojar datos con estructura de objeto dentro de un arreglo. IMPORTANTE: cada índice de objeto debe COINCIDIR con el elemento buscado. Es decir, no se puede hallar un elemento que no este en el índice correcto:

En Javascript

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

// INVOCACIÓN DE UN SOLO ELEMENTO DE UN OBJETO
// arreglo[indiceObjeto].nombreElemento;
console.log(bandas[0].vigente + "\n"); 
//--> TRUE

// El indice debe coincidir con el elemento buscado
// arreglo[indiceObjeto].nombreElemento;
console.log(bandas[0].punk + "\n"); 
//--> NTN,The Clash,Misfist

// INVOCACIÓN DE TODO EL OBJETO
// arreglo[indice];
console.log(bandas[1]);
/* { hRock: [ 'LZeppelin', 'BSabbath' ], ardilla: true } */

// MOSTRAR SOLO EL NOMBRE DE UNA PROPIEDAD
// Object.keys( arreglo.[indiceObjeto]) [IndicePrimerElemento[0]]
console.log( Object.keys(bandas[0])[0] ); 
// punk
console.log("---");

/* MOSTRAR TODOS LOS NOMBRES PROPIEDAD DEL OBJETO 'BANDAS' */
bandas.forEach(propiedad => {
  Object.keys(propiedad).forEach(clave => {
    console.log(clave);
  });
});
/* 
      punk
      vigente
      hRock
      ardilla
      blues
      vigente
*/

Al final, es posible combinar arreglos y objetos creados por separado para invocar –respetando la sintaxis correcta– uno o más valores de propiedades:

En Javascript

 // 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 indice de arreglo
"El poeta " + nombres[0] + 

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

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

// Invocar propiedad de objeto
", en " + poetasEcu.EGonzalo + ".");
/* El poeta Gonzalo Escudero murió en 
Pichincha, Ecuador, en 1971. */

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' ]

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

Alternativa al bucle 'for'. for/in obtiene solo las propiedades o solo los valores del arreglo, o solo las propiedades de un objeto. 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.

En Javascript

// 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

Son funciones que permiten manipular los elementos de los arreglos y los valores de los objetos. Se profundizarán en la siguiente sección. El ejemplo de abajo es la aplicación del método push() para insertar nuevo elemento en el arreglo:

// 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