Fundamentos de JavaScript (2da parte)

Si quieres empezar desde la primera parte aprendiendo sobre como declarar variables y funciones haz clic aqui.

Stack Overflow Blog

Objetos

Vamos a tomar un ejemplo de la clase anterior, la cual es una función que cambia a mayúsculas la variable nombre

var nombre = "Joaquin"
function ImprimirNombreEnMayuscula(){
     nombre = nombre.toUpperCase()
     console.log (nombre)
}
ImprimirNombreEnMayuscula()

Si queremos agrupar el nombre, el apellido y la edad, pero no solo de una persona sino de varias necesitamos crear algo llamado objeto. Es decir un elemento que reúne las características, en este caso, de una persona.

Si bien podríamos crear un variable para cada cosa y que acompañe al nombre, por ejemplo, las variables apellidoJoaquin, edadJoaquin, etc. Esto no es muy practico.

Para crear un objeto se coloca el nombre del objeto, signo igual y se colocan las llaves {}

var Joaquin = {

}

Dentro de un objeto podemos almacenar varias características, llamadas atributos.

var Joaquin = {
   nombre: "Joaquin",
   apellido : "Solis",
   edad : 25
}

Así creamos un objeto con las características que nosotros queremos darle (notar la coma ( , )que separan los atributos).

Estos atributos tienen la siguiente forma: una clave y un valor asignado a esa clave ( nombre : “Joaquin”)

Hagamos otro objeto

var Dario = {
    nombre: "Dario",
    apellido : "Sanchez",
    edad : 28
}

Si queremos imprimir el nombre de los dos objetos presten atención como se llaman a estas funciones en las ultimas lineas

function ImprimirNombreEnMayuscula(){
    var nombre = nombre.toUpperCase()
    console.log (nombre)
}
ImprimirNombreEnMayuscula(Joaquin.nombre)
ImprimirNombreEnMayuscula(Dario.nombre)

Ahora si quiero llamar el nombre desde la función como un parámetro, lo escribo en la función entre paréntesis ( )

function ImprimirNombreEnMayuscula(persona){
      var nombre = persona.nombre.toUpperCase()
      console.log (nombre)
}
ImprimirNombreEnMayuscula(Joaquin)
ImprimirNombreEnMayuscula(Dario)

Si no notaste el cambio, tomate unos minutos para ver como a través de un parámetro cambia la forma para pedir el nombre de mi objeto en la ultima linea.

Podemos hacerlo un poco mas simple y agrupar la variable dentro de la función en una sola linea

function ImprimirNombreEnMayuscula(persona){
      console.log(persona.nombre.toUpperCase())
}
ImprimirNombreEnMayuscula(Joaquin)
ImprimirNombreEnMayuscula(Dario)

La ultimas versiones de JS permiten hacerlo mas simple todavía, llamando directamente al parámetro nombre del objeto y colocarlo entre llaves {} en el nombre de la función.

function ImprimirNombreEnMayuscula({nombre}){
     console.log(nombre.toUpperCase())
}
ImprimirNombreEnMayuscula(Joaquin)
ImprimirNombreEnMayuscula(Dario)

También podemos crear un objeto y darle los valores al momento de llamar a la función

function ImprimirNombreEnMayuscula(persona){
console.log(persona.nombre.toUpperCase())
}
ImprimirNombreEnMayuscula({nombre : "Samuel" })
//la consola mostrará SAMUEL

Que pasa si en ves de pasarle el atributo nombre, le paso el atributo apellido

function ImprimirNombreEnMayuscula(persona){
console.log(persona.nombre.toUpperCase())
}
ImprimirNombreEnMayuscula({apellido: "Smith" })

La consola mostrará error, así como también si al momento de llamar mi función no le paso ningún atributo.

function ImprimirNombreEnMayuscula(persona){
console.log(persona.nombre.toUpperCase())
}
ImprimirNombreEnMayuscula({})

Desestructurar objetos

Otra forma de acceder a los objetos es desestructurarlos, esto me permite asignar valores directamente al atributo del objeto.

function ImprimirNombreEnMayuscula(persona){
     var {nombre} = persona
     console.log(nombre.toUpperCase())
}
ImprimirNombreEnMayuscula(nombre)

Hay que notar que la segunda linea es equivalente a decir

var nombre = persona.nombre

Parametros como referencia o como valor

vamos a agregar a nuestro codigo anterior la siguiente función que recibe persona como parámetro

function cumpleaños(persona) {
    persona.edad += 1
}

si en la consola llamamos a cumpleaños(Joaquin), esta no mostrará nada. Pero si llamo a nombre solamente en la consola veremos que ahora la edad de mi objeto Joaquin es de 26 (1+). Si vuelvo a repetir este proceso de llamar a compleaños(joaquin) y luego llamar al objeto joaquin la edad irá cambiando el valor de mi objeto de forma permanente.

Si quiero que no se modifique el valor de mi objeto lo que voy a hacer es llamar como parametro al atributo de mi objeto. En este caso edad.

function cumpleaños(edad) {
    edad += 1
}

esto hará que al momento de llamar la edad en la consola y escribir (cumpleaños(joaquin.edad) ) solo se muestre ese valor y no me modifique de forma permanente el valor del atributo.

Cuando sucede esto que se cambian los atributos del objeto de forma permanente es porque se pasaron los valores por referencia.

Podemos tener dos situaciones:

·Que yo quiera cambiar de forma intensional el valor de mi objeto y se quede modificado

·Crear un nuevo objeto en mi funcion con solo el valor el modificado, con la siguiente caracteristica

function cumpleaños(persona) {
    return {
    ...persona,
     edad: persona.edad + 1
     }
}
(el "..." es para copiar todo los valores de mi objeto anterior)

Si llamamos a cumpleaños(joaquin) me muestra 26 y si llamo a joaquin me muestra 25. Ahora si quiero guardar ese nuevo valor puedo asignarle ese valor a otra variable.

var joaquinMasViejo = cumpleaños(joaquin)

Comparaciones

Para este caso vamos a comenzar con un archivo en blanco

Vamos a escribir lo siguiente

var x= 4 , y= "4"

Notamos que los tipos de variables de “x” e “y” son distintos, ya que que “y” es un string.

Si queremos compararlos dos variables utilizaremos el signo “==” (ya que un solo signo = se utiliza para asignar valores a un variable)

x == y

esto nos mostrara TRUE

Esto se debe a que JS se encarga, al momento de comparar, llevar las dos variables a un mismo tipo de dato. Es decir ambas tienen el mismo valor de string.

Si queremos preguntar si ambas tienen el mismo valor y son del mismo tipo de variable se usa el triple igual (===)

x === y

esto dara como resultado FALSE.

Se recomienda usar el triple igual y acordar con el equipo usarlo tambien para evitar problemas.

Si comparamos dos objetos

var joaquin = {
    nombre: "joaquin"
}
var otraPersona = {
    nombre: "joaquin"
}

Si comparamos dos objetos con el doble igual en la consola, mostrará FALSE. Tanto con el == y ===.

Esto se debe a que al compararlos nos estamos refiriendo a dos lugares distintos de la memoria ram, es como decir que tenemos dos objetos en distintas partes de la casa y el momento de compararlos nos referimos al lugar donde estan, esto nos dara FALSE.

Para que esto nos de TRUE debemos apuntar al mismo lugar de memoria de la siguiente manera

var otraPersona = joaquin

Al hacer esto, si los comparamos con el == y el === en la consola nos mostrará TRUE.

Ahora si utilizamos el metodo de crear un objeto dentro de otro y los comparamos

var otraPersona= {
     ...joaquin
}
consola
otraPersona == joaquin
FALSE

Al compararlos me mostrará FALSE porque sucede lo mismo que hace rato, nos estamos dirigiendo a distintos lugares de la memoria ram.

Un punto importante al momento de querer dirigirnos al mismo lugar de la memoria

var otraPersona = Joaquin

Si al momento de estar en la consola quiero cambiar el valor de un atributo en un objeto esto cambiará el valor de ambos, ya que nos estamos dirigiendo al mismo objeto.

(Este post esta basado en el curso Fundamentos de JavaScript dado por Sacha Lifszyc en la plataforma Platzi)

Link al curso aqui

Si quieres probar ese curso, te lo recomiendo, dejo un link si quieres un mes gratis en Platzi : https://platzi.com/r/joaquinsolis/