Capitulo 5 ➜ Objetos en Javascript

Empecemos recapitulando lo visto en la lección tres, aparte de hablar de funciones flecha, hablamos de los backticks y de cómo usarlos junto con la propiedad innerhtml, una de las ventajas de esto es que puedes poner el valor de las variables dentro de los backticks, de esa forma pudimos poner contenido en el carrito, armando la estructura que tendrá un curso en el carrito, pero todos los datos están en duro (no son dinámicos, me refiero) ¿como colocamos los datos del curso seleccionado? 

El This y las funciones flecha.

Tengo una posible solución, primero crearé mi contante curso, y le voy a dar el valor de this, ahora yo pregunto ¿que tiene guardado this? este curso fue creado en el ámbito de una función flecha yo pensaría que el this apuntaría a alguna instancia ¿pero a cuál instancia? para sorpresa (incluso mia) es window ¿que hace el objeto window ahí? Bueno, eso es una muestra de porque no debes trabajar el this con una función flecha, porque las funciones flecha no tienen su propio this, esto responde la pregunta de qué diferencia a una función regular de una de flecha que plantee en la lección anterior, la cual preferí responde en esta lección porque hoy hablamos de objetos.

Funciones flecha y funciones regulares (diferencias según el uso del this).

Lo que concluyo es que no hagan nunca lo que pone la imagen a continuación, como vieron nos manda window que esta hay porque el this medio que intenta encontrar un objeto si o si y lo primero que encuentra es el objeto window, que está en el ámbito antes que todos. Ahora, visto eso, parecería que la mejor opción es usar una función regular ¿no? comentamos la función flecha en bloque y voy a ir trayendo de vuelta a mi función comprar curso, porque como vimos en la lección anterior todas las funciones son objetos, y estas en comparación si deberían tener el this, y desde ya les digo, si, si que lo pueden usar, y dentro de mi función sólo voy a poner un console.log hacia el this; lo que verán en su navegador es que el this aqui si enlazara con el botón clicado, como dije parece que la respuesta es volver a las funciones regulares, pero hay un detalle que convenientemente he obviado comentar hasta ahora: element.

Cuando hacíamos la conversión a array, usamos un element, para representar cada elemento que necesitábamos recorrer como necesitamos el botón que clicó el usuario, dicho element, nos viene perfecto, por lo que yo pregunto, y aquí la respuesta puede ser variada, ¿vale la pena usar el this aqui? o reciclar el element que es perfectamente accesible desde una función de flecha, yo me decanto por lo segundo, vamos a reusar ese element.

Manejo del DOM: parentElement.

¿Para qué necesitamos el botón que clico el usuario?, y ¿cómo lo usamos para llegar a todos los datos del curso?, es simple, el botón forma parte de un primer div “info card”, es decir, es su elemento padre, para accederlo usamos, parentElement, y a su vez ese tiene otro padre, card, lo accedemos de la misma forma, entonces como curso ya está en el console.log, lo que veremos será el elemento padre, desde el cual podremos acceder al resto de datos del curso, porque dentro de él están todos esos datos, y va ser tal cual, vean la imagen a continuación Card es el div padre que contiene toda la info del curso, en el están otras dos etiquetas la imagen, y el div info card, este último tiene el nombre, el precio, e incluso el botón, que es el que usamos para llegar primero al div info card y luego recién, al div card, por eso uso dos parentElement.

Objetos literales.

Aprovechando la estructura hecha en innerHTML se presta para el uso de objetos, vamos a terminar la lección con ello, ¿y como hacemos objetos en javascript?, hay dos formas: una con funciones, y otra que se le suele llamar “objetos literales”, que son los que haremos en la lección de hoy, para usarlas, declaras una constante cualquiera, le das un nombre, y luego le pones llaves, para el cuerpo (como una función), dicho cuerpo del objeto debe tener la forma clave-valor, aca tengo un ejemplo miren, esta sintaxis que ven cumple con aquello de la llave valor, ¿y de donde salen todos los datos que necesitamos? pues del curso, recuerda que cursó guarda nuestra tarjeta con toda la info del curso seleccionado por el usuario, de esa forma accediendo a las etiquetas donde están los valores es que podemos recuperar todo lo que necesitamos; entonces creemos un objeto y llamemoslo: “cursoinfo” ¿cómo accedo a sus propiedades? (para usarlas dentro de estos backticks) con la notación de punto, miren, lo primero será poner el signo de dólar con llaves para acceder al contenido de una variable, y llamando a infocurso seguido de un punto y el nombre de la propiedad, obtendrás el valor de dicha propiedad; pero lo importante de todo esto es que ya se guardan en el carrito los cursos que seleccionamos.