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?

¿Por qué hay diferentes tipos de estructuras de 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?

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

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

El Constructor y la palabra This.

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

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

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

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

Cheerleader in chief for KMMX, RPA Enthusiast, DevOps, Technical Writer & International Speaker, Dad & 2 cats.

Cheerleader in chief for KMMX, RPA Enthusiast, DevOps, Technical Writer & International Speaker, Dad & 2 cats.