Uno de los aspectos más poderosos de JavaScript es poder referirse dinámicamente a las propiedades de los objetos. En este artículo veremos cómo funciona esto y qué ventajas podría darnos. Echaremos un vistazo rápido a algunas de las estructuras de datos utilizadas en Ciencias de la Computación. Además, veremos algo llamado notación Big O que se usa para describir el rendimiento de un algoritmo.
Introducción a los objetos
Comencemos por crear un objeto simple que represente un automóvil. Cada objeto tiene algo llamado properties. Una propiedad es una variable que pertenece a un objeto. Nuestro objetivo coche tendrá tres propiedades: make, modely color.
Veamos cómo podría verse:
const car = { make: 'Ford', model: 'Fiesta', color: 'Red'};Podemos referirnos a propiedades individuales de un objeto usando notación de puntos. Por ejemplo, si quisiéramos averiguar cuál es el color de nuestro automóvil, podemos usar la notación de puntos como esta car.color.
Incluso podríamos generarlo usando console.log:
console.log(car.color); //outputs: RedOtra forma de referirse a una propiedad es usar la notación de corchetes:
console.log(car['color']); //outputs: RedEn el ejemplo anterior, usamos el nombre de la propiedad como una cadena entre corchetes para obtener el valor correspondiente a ese nombre de propiedad. Lo útil de la notación de corchetes es que también podemos usar variables para obtener propiedades de forma dinámica.
Es decir, en lugar de codificar un nombre de propiedad específico, podemos especificarlo como una cadena en una variable:
const propertyName = 'color';const console.log(car[propertyName]); //outputs: RedUsar búsqueda dinámica con notación de corchetes
Veamos un ejemplo donde podemos usar esto. Digamos que tenemos un restaurante y queremos poder obtener los precios de los artículos de nuestro menú. Una forma de hacerlo es utilizando if/elsedeclaraciones.
Escribamos una función que acepte un nombre de artículo y devuelva un precio:
function getPrice(itemName){ if(itemName === 'burger') { return 10; } else if(itemName === 'fries') { return 3; } else if(itemName === 'coleslaw') { return 4; } else if(itemName === 'coke') { return 2; } else if(itemName === 'beer') { return 5; }}Si bien el enfoque anterior funciona, no es ideal. Hemos codificado el menú en nuestro código. Ahora, si nuestro menú cambia, tendremos que reescribir nuestro código y volver a implementarlo. Además, podríamos tener un menú largo y tener que escribir todo este código sería engorroso.
Un mejor enfoque sería separar nuestros datos y nuestra lógica. Los datos contendrán nuestro menú y la lógica buscará precios en ese menú.
Podemos representar el menucomo un objeto donde el nombre de la propiedad, también conocido como clave, corresponde a un valor.
En este caso, la clave será el nombre del artículo y el valor será el precio del artículo:
const menu = { burger: 10, fries: 3, coleslaw: 4, coke: 2, beer: 5};Usando la notación de corchetes podemos crear una función que aceptará dos argumentos:
- un objeto de menú
- una cadena con el nombre del elemento
y devuelva el precio de ese artículo:
const menu = { burger: 10, fries: 3, coleslaw: 4, coke: 2, beer: 5};function getPrice(itemName, menu){ const itemPrice = menu[itemName]; return itemPrice;}const priceOfBurger = getPrice('burger', menu);console.log(priceOfBurger); // outputs: 10Lo bueno de este enfoque es que hemos separado nuestros datos de nuestra lógica. En este ejemplo, los datos viven en nuestro código, pero también podrían provenir de una base de datos o API. Ya no está estrechamente relacionado con nuestra lógica de búsqueda que convierte el nombre del artículo en el precio del artículo.
Estructuras de datos y algoritmos
Un mapa en términos de informática es una estructura de datos que es una colección de pares clave / valor donde cada clave se asigna a un valor correspondiente. Podemos usarlo para buscar un valor que corresponda a una clave específica. Esto es lo que estamos haciendo en el ejemplo anterior. Tenemos una clave que es el nombre de un artículo y podemos buscar el precio correspondiente de ese artículo usando nuestro objeto de menú. Estamos usando un objeto para implementar una estructura de datos de mapa.
Veamos un ejemplo de por qué podemos querer usar un mapa. Digamos que tenemos una librería y tenemos una lista de libros. Cada libro tiene un identificador único llamado International Standard Book Number (ISBN), que es un número de 13 dígitos. Almacenamos nuestros libros en una matriz y queremos poder buscarlos usando el ISBN.
Una forma de hacerlo es recorriendo la matriz, verificando el valor ISBN de cada libro y si coincide, devolviéndolo:
const books = [{ isbn: '978-0099540946', author: 'Mikhail Bulgakov', title: 'Master and Margarita'}, { isbn: '978-0596517748', author: 'Douglas Crockford', title: 'JavaScript: The Good Parts'}, { isbn: '978-1593275846', author: 'Marijn Haverbeke', title: 'Eloquent JavaScript'}];function getBookByIsbn(isbn, books){ for(let i = 0; i < books.length; i++){ if(books[i].isbn === isbn) { return books[i]; } }}const myBook = getBookByIsbn('978-1593275846', books);Eso funciona bien en este ejemplo, ya que solo tenemos tres libros (es una librería pequeña). Sin embargo, si fuéramos Amazon, iterar sobre millones de libros podría ser muy lento y computacionalmente costoso.
La notación Big O se utiliza en informática para describir el rendimiento de un algoritmo. Por ejemplo, si n es el número de libros de nuestra colección, el costo de usar la iteración para buscar un libro en el peor de los casos (el libro que buscamos es el último en la lista) será O (n) . Eso significa que si la cantidad de libros de nuestra colección se duplica, el costo de encontrar un libro mediante iteración también se duplicará.
Echemos un vistazo a cómo podemos hacer que nuestro algoritmo sea más eficiente utilizando una estructura de datos diferente.
Como se discutió, se puede usar un mapa para buscar el valor que corresponde a una clave. Podemos estructurar nuestros datos como mapa en lugar de una matriz utilizando un objeto.
La clave será el ISBN y el valor será el objeto libro correspondiente:
const books = { '978-0099540946':{ isbn: '978-0099540946', author: 'Mikhail Bulgakov', title: 'Master and Margarita' }, '978-0596517748': { isbn: '978-0596517748', author: 'Douglas Crockford', title: 'JavaScript: The Good Parts' }, '978-1593275846': { isbn: '978-1593275846', author: 'Marijn Haverbeke', title: 'Eloquent JavaScript' }};function getBookByIsbn(isbn, books){ return books[isbn];}const myBook = getBookByIsbn('978-1593275846', books);En lugar de utilizar la iteración, ahora podemos utilizar una simple búsqueda de mapas por ISBN para obtener nuestro valor. Ya no necesitamos verificar el valor ISBN de cada objeto. Obtenemos el valor directamente del mapa usando la clave.
En términos de rendimiento, una búsqueda de mapas proporcionará una gran mejora con respecto a la iteración. Esto se debe a que la búsqueda de mapas tiene un costo constante en términos de cálculo. Esto se puede escribir usando la notación Big O como O (1) . No importa si tenemos tres o tres millones de libros, podemos obtener el libro que queramos con la misma rapidez haciendo una búsqueda en el mapa usando la clave ISBN.
Resumen
- We have seen we can access the values of object properties using dot notation and square bracket notation
- We learned how we can dynamically look up values of property by using variables with square bracket notation
- We have also learned that a map datastructure maps keys to values. We can use keys to directly look up values in a map which we implement using an object.
- We had a first glance at how algorithm performance is described using Big O notation. In addition, we saw how we can improve the performance of a search by converting an array of objects into a map and using direct lookup rather than iteration.
Want to test your new found skills? Try the Crash Override exercise on Codewars.
Want to learn how to write web applications using JavaScript? I run Constructor Labs, a 12 week JavaScript coding bootcamp in London. The technologies taught include HMTL, CSS, JavaScript, React, Redux, Node and Postgres. Everything you need to create an entire web app from scratch and get your first job in the industry. Fees are £3,000 and next cohort starts on 29th May. Applications are open now.