Estructuras de Datos en JavaScript

Muchas veces no le damos la importancia que estas merecen y estamos más preocupados o invertimos más tiempo aprendiendo y creando aplicaciones en el framework más popular. Este es el artículo 1 de 5.

Ciencias de la Computación 101

¿Qué son las estructuras de datos y por qué son importantes?

Las estructuras de datos son una forma de organizar la información que es almacenada en una computadora o en una base datos. Hay diferentes tipos de estructuras de datos y cada tipo de estructura de datos representa una manera diferente de organizar la información.

¿Por qué hay diferentes tipos de estructuras de datos?

Tal vez te preguntarás por que no usamos la misma estructura para todas nuestras cosas, bueno, cada estructura de datos tiene sus fortalezas y debilidades, por ejemplo algunas estructuras de datos son muy rápidas almacenando y guardando datos pero tal vez lentas buscando a través de esta y regresándola, otras estructuras son lo opuesto, son muy rápidas buscando y regresando los datos.

Así que cada estructura de datos puede ser útil por diferentes razones, esto es lo que físicamente son las estructuras digamos en términos de ciencias de las computación, veamos como se implementan en JavaScript.

¿Pero ….por qué es importante saber esto?

Son varias las razones, la más importante es que usar las estructuras de datos adecuadas en nuestros proyectos puede tener un gran impacto en la velocidad, eficiencia, y ejecución de nuestros programas.

Por ejemplo, imaginemos que estamos trabajando en Twitter y somos los responsables de almacenar los tuits no recientes en un base de datos, tal vez queramos utilizar una estructura de datos como una lista enlazada — Linked List, que es veloz grabando información aunque no es la más adecuada para recuperar esa información. Pero si nos dicen que tenemos que guardar los tuits más recientes para que la gente los vea inmediatamente, entonces necesitamos una estructura que pueda accesar rápidamente esa información como una tabla hash — Hash Table , algunas veces referida como tabla de dispersión o tabla fragmentada.

Utilizar la estructura de datos adecuada en tus proyectos puede ser crucial, ademas esto nos va ayudar a cimentar nuestro conocimiento de conceptos fundamentales como algoritmos, constructor, recursión, la palabra reservada this, el objeto prototype, la notación Big’O, etc, etc.

La entrevista técnica

Si de casualidad están aplicando a una entrevista técnica de trabajo, en muchos lados les van a pedir implementar en código este tipo de estructuras para demostrar que tienen sólidas bases en ciencias de la computación por que probablemente van a estar lidiando con estos temas regularmente.

Así que hay muchos beneficios, vamos a verlos de la manera sencilla posible. ¡Arre!

El Constructor y la palabra This.

Antes de entrar en nuestra primera estructura de datos, debemos dominar estos dos conceptos, vamos a usar la consola de Google, para abrir la consola de Google Chrome oprimimos al mismo tiempo la combinación de teclas Ctrl + Mayús + J si estas en Windows o Linux, Cmd + Opt + J si estas estas en Mac, si no, vayan a donde están los 3 puntos en la esquina superior derecha, despliega el menu contextual, ahi seleccionen Mas Herramientas (More Tools, si lo tienes en en inglés como yo) y finalmente Herramientas Desarrollador (Developer tools) , como se muestra en la siguiente imagen.

Un Abrimos la consola de Chrome

Un constructor es una function que crea una clase del objeto y nos permite crear muchas instancias de esa clase y todos estas instancias tendrán las mismas propiedades y funcionalidades.

El método constructor es un método especial para crear e inicializar un objeto creado a partir de una clase. MDN web Docs

Por ejemplo vamos a crear una función usuario, la cual nos permitirá crear uno o muchos usuarios, que van a tener las mismas propiedades y funcionalidad.

El constructor Usuario recibe 4 parámetros, nombre , apellido, edad y genero.

Nota: con shift+enter podemos escribir múltiples líneas de JavaScript en nuestra consola.

Entonces la palabra reservada this, hace referencia al objeto creado.

La palabra reservada this se comporta un poco diferente en JavaScript con respecto a otros lenguajes. También tiene algunas diferencias entre el modo estricto y el no estricto.

En la mayoría de los casos, el valor de this es determinado por la forma en como es llamada la función (runtime binding). No puede ser establecida durante su ejecución y puede ser diferente cada vez que la función es llamada.

ES5 introdujo el método bind() para establecer el valor de this en una función independientemente de como sea llamada y en ES2015 se introdujeron las funciones flecha ,( arrow functions o a veces llamadas fat arrow functions) las cuales no tienen su propia vinculación this si no que retienen el valor this del contexto lógico adjunto.

Contexto Global

En un contexto de ejecución global (afuera de cualquier función), this se refiere al objeto global ya sea en modo estricto o no.

//En los navegadores web, el objeto window es también el objeto global
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

Siempre podemos fácilmente obtener el objeto global usando la propiedad global globalThis , sin importar el contexto actual en que esta corriendo nuestro código.

Contexto en función

Dentro de una función, el valor this depende de como la función es llamada.

function f1() {
  return this;
}

// En el navegador:
f1() === window; // true

// En Node:
f1() === global; // true

En modo estricto, sin embargo, si el valor de this no está establecido cuando se entra al contexto de ejecución, este permanece como indefinido, como se muestra en el siguiente código.

function f2() {
  'use strict'; // modo estricto
  return this;
}

f2() === undefined; // true

En el ejemplo anterior, this nos da un undefined, porque f2 fue llamado directamente y no como un método o propiedad de un objeto (ej.window.f2()). Cabe mencionar que esta característica no fue implementada en algunos navegadores cuando empezaron a soportar en un inicio el modo estricto, como resultado, regresan incorrectamente el objeto window.

Y a través de la notación de punto podemos acceder a sus métodos y propiedades como se muestra en la siguiente imagen.

The Prototype Object

El objeto prototipo es simplemente un objeto que otros multiples objetos pueden referir para obtener información o funcionalidad que necesiten.

Todos los objetos en JavaScript provienen de Object; todos los objetos heredan métodos y propiedades de Object.prototype, aunque pueden ser sobrecargados. Sin embargo, un Object puede ser deliberadamente creado para que esto no sea cierto (por ejemplo usando Object.create(null)), o bien alterado para que no cumpla esta propiedad (por ejemplo usando Object.setPrototypeOf). Fuente:MDN web docs

Veamos el siguiente ejemplo, suponiendo que la empresa a todos los empleados les asignará un correo con el dominio como se muestra, vamos a establecer la propiedad dominioEmail en el objeto prototipo.

El Objeto prototype, estableciendo una propiedad

Ahora vamos a crear el método obtenerEmail en el objeto prototipo.

El Objeto prototype, estableciendo un método.

En la imagen anterior vemos que el método ya esta establecido en el objeto, si ahora invocamos el método con cualquier usuario (en este caso usuario1 ó usuario200) obtenemos el correo como se muestra a continuación.

¡Excelente!

En el siguiente artículo: Listas enlazadas y la notación Big-O (pero era importante tener muy claros estos conceptos previamente).

Nos seguimos leyendo, Alex

¿Quieres aprender, actualizarte o conocer más alcances de JS? Consulta los cursos en “blended mode” de KMMX tiene para ti https://kmmx.mx/our-courses/?s=javascript&ref=course

Anexos

Para mayor referencia pueden revisar la documentación de Mozilla.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this