Fundamentos de JavaScript (3ra parte)

Aprendiendo las bases solidas para dominar este lenguaje

toptal.com

(Si quieres leer las primeras partes de este articulo haz clic aqui: 1parte, 2 parte)

Condicionales

En esta nueva seccion hablaremos sobre las estructuras de control, las cuales me permitaran saber si un codigo se ejecuta o no, o cuantas veces se va a ejecutar.

la primera que veremos seran los condicionales

Empezaremos creando un objeto, en este caso una persona, que tendrá distintos atributos que para nosotros seran profesiones y algunos datos personales.

var Joaquin = {
     nombre: "Joaquin",
     apellido: "Solis",
     edad: 25
     programador: true,
     futbolista: false,
     tenista : false,
     cocinero: false,
     cantante: true
}

Notamos que cuando nos referimos a las profesiones usamos un tipo nuevo de variables, el tipo booleano, la cual solo puede tomar dos valores, TRUE o FALSE.

Ahora lo que haremos es crear una funcion que me muestre las profesiones de una persona, de la siguiente manera

function imprimirProfesiones(persona){
     console.log("${persona.nombre} es : ")
     
     if persona.programador === true {
        console.log("programador")
    }
}

El termino ${} (template string) nos permite interpolar variables, es decir colocar variable dentro de un string.

Podran notar lo que hace el codigo, si ejecuto la función con el parametro Joaquin, me mostrará en la pantalla si es programador o no.

Pero persona.programador ya es TRUE entonces puede omitir el compararlo con el “=== true” , ya que el condicional IF lo que me pregunta es si se cumple la condicion de TRUE. De la siguiente manera

function imprimirProfesiones(persona){
     console.log("${persona.nombre} es : ")
     
     if (persona.programador) {
        console.log("programador")
    }
}

Ahora lo haremos con todas las profesiones

function imprimirProfesiones(persona){
console.log("${persona.nombre} es : ")
     
     if (persona.programador) {
        console.log("programador")
    }
    if (persona.futbolista) {
        console.log("futbolista")
    }
    if (persona.tenista) {
        console.log("tenista")
    }
    if (persona.cocinero) {
        console.log("cocinero")
    }
    if (persona.cantante) {
        console.log("cantante")
    }
}

Si llamamos a la funcion que creamos

imprimirProfesiones(Joaquin)

Esta nos mostrara

Joaquin es :
programador
cantante

Si cambiamos el valor del atributo dentro del objeto, es decir si coloco programador : FALSE. Cuando llame a la funcion ya no me mostrará esa profesion.

Ahora si quiero que me muestre en pantalla que NO es programador. Es decir si ese atributo es FALSE voy a agregar otra parte a mi condicional IF. La condicion ELSE.

function imprimirProfesiones(persona){
      console.log("${persona.nombre} es : ")
     
      if (persona.programador) {
        console.log("programador")
    
     }  else {
       console.log("No es programador")
     }

Funciones que retornan valores

Vamos a crear una nueva funcion que nos dira si la persona es mayor de edad

function imprimirSiEsMayor(){
     
   if (persona.edad >= 18) {
      console.log("${persona.nombre} es mayor de edad")
   } else {
    console.log("${persona.nombre} es menor de edad")
   }
}

Si llamamos en consola a esta funcion con el parametro Joaquin nos dira en la pantalla

Joaquin es mayor de edad

Asimismo si cambiamos el valor del atributo edad del objeto Joaquin y le damos un valor menor a 18, la consola nos dirá que es menor de edad.

Hablemos de buenas practicas para hacer el codigo mas legible

Podriamos poner la parte que decide que una persona sea mayor de edad (persona.nombre > =18) en otra funcion y que nos retorne el valor TRUE o FALSE.

function esMayorDeEdad (){
    return (persona.edad > =18)
}

Entonces ahora solo tenemos que agregar el nombre de la funcion recien creada a la condicion IF del codigo anterior

function imprimirSiEsMayor(persona){
     
   if (esMayorDeEdad(persona)) {
      console.log("${persona.nombre} es mayor de edad")
} else {
    console.log("${persona.nombre} es menor de edad")
   }
}

Podemos crear una variable especifica con el valor de la edad (cuando tenemos un valor que va a permanecer fijo en todo el codigo, antes que llamarlo VARIABLE, lo vamos a llamar con el termino “const” en referencia a CONSTANTE y con mayusculas con guione bajos entre palabras).

const MAYORIA_DE_EDAD = 18

esto dejaria a mi funcion creada anteriormente

function esMayorDeEdad (persona){
   return persona.nombre > = MAYORIA_DE_EDAD
}

Arrow functions

Vamos a referirnos a otra manera de escribir funciones, asignando una funcion a una variable.

var  esMayorDeEdad = function (persona){
   return persona.edad > = MAYORIA_DE_EDAD
}

(notar que la funcion no tiene nombre sino solo el parámetro, es anónima, pero aun asi, JS me deja crearla)

Si en la consola pedimos que nos muestre si es mayor de edad, seguira funcionando como antes.

Si queremos seguir ahorrando caracteres llegamos a las arrow functions

const  esMayorDeEdad = (persona) =>{
    return persona.edad > = MAYORIA_DE_EDAD
}

(Notar el “=>” para ahorrar la palabra function, cada vez esto se simplifica mas)

Esta funcion sigue corriendo como la anterior, es decir es lo mismo de un modo mas corto (salvo alguna caracteristica que diremos mas adelante).

podemos sacarle los parentesis del parametro si queremos ahorrar caracteres , (esto es solo cuando tenemos un solo parametro) . Tambien podemos omitir el return si una funcion solo tiene como fin el retornar algo. Las llaves que rodean a la funcion tambien pueden omitirse

const  esMayorDeEdad = persona => persona.edad >= MAYORIA_DE_EDAD

La funcion ahora quedo en una sola linea

Si queremos desestructurar podemos pasarle el parametro edad de la siguiente forma

const  esMayorDeEdad = ({edad})=> edad > = MAYORIA_DE_EDAD

Este metodo puede verse complejo pero es recomendable ya que puede tocarque un equipo de trabajo que se maneje de esta manera

Negacion

Ahora escribamos una funcion que nos permita o no, el acceso dependiendo de la edad

function permitirAcceso(persona){
     
   if ( ! esMayorDeEdad(persona)) {
      console.log("Acceso denegado")
}

Notar que si NO es mayor de edad tengo que negar la condicion del IF, esto se hace con el signo “ !” .

Estructuras repetitivas: FOR

Vamos a empezar con un nuevo ejemplo. Queremos que mi nueva funcion calcule si sube o baja de peso el objeto persona que le pase como parametro.

Voy a crear un objeto con ciertos atributos pero lo que me importa mas ahora es el atributo peso

var joaquin = {
    nombre : "joaquin",
    apellido : "solis",
    edad: 25,
    peso: 80
}

Vamos a pedir a mi codigo que me muestre el peso al principio del año y a fin de año

console.log("Al inicio del año ${joaquin.nombre} pesa ${joaquin.peso}
console.log("Al final del año ${joaquin.nombre} pesa ${joaquin.peso}

Entre estas dos declaraciones vamos a agregar un FOR

console.log("Al inicio del año ${joaquin.nombre} pesa ${joaquin.peso}
for (var i=1; i<= 365; i++){
}
console.log("Al final del año ${joaquin.nombre} pesa ${joaquin.peso}

Notar que el for tiene una variable propia “i” que va a ir creciendo DESDE 1, HASTA 365 con un paso de 1 en 1 (1++).

Ahora agreguemos la condicion para que el peso suba o baje, esto lo haremos pidiendo un numero random el cual irá, dependiendo su valor, sumando si es menor a 0,25,restando si es menor a 0.50, una cantidad de 200 gr. Es decir que el valor random solo me indica si subo o bajo, no que agregaré ese valor al peso. Tambien iremos agregando los condicionales IF y ELSE.

console.log("Al inicio del año ${joaquin.nombre} pesa ${joaquin.peso}
for (var i=1; i<= 365; i++){
    var ramdom = Math.ramdom()
    if (ramdom <0.25) 
      
    }else if (random < 0.5){
     }
}
console.log("Al final del año ${joaquin.nombre} pesa ${joaquin.peso}

Notar que no pusimos todavia las condiciones dentro del IF y ELSE, eso lo haremos llamando a otras funciones que las haremos con arrow function de la siguiente manera

const aumentarDePeso = persona => persona.peso +=200
const adelgazar = persona => persona.peso -= 200

podemos simplificar

const INCREMENTO_PESO = 0.2
const aumentarDePeso = persona => persona.peso += INCREMENTO_PESO
const adelgazar = persona => persona.peso -= INCREMENTO_PESO

El codigo completo nos quedaria

console.log("Al inicio del año ${joaquin.nombre} pesa ${joaquin.peso}
   for (var i=1; i<= 365; i++){
   var ramdom = Math.ramdom()
     if (ramdom <0.25){
     aumentarDePeso(joaquin)
    }else if (random < 0.5){
    adelgazar(joaquin)
    }
}
console.log("Al final del año ${joaquin.nombre} pesa ${joaquin.peso}

Al hacer esto el codigo tomara valores al azar determinando si sube o baja el peso, repitiendo ese proceso 365 veces como se lo pedi al FOR.

Algo que debemos corregir es que el numero final sera un decimal y JS mostrará diez digitos. Esto se repara colocando toFixed(n) y la cantidad de decimales que querramos en “n”.

console.log("Al final del año ${joaquin.nombre.toFixed(2)} pesa ${joaquin.peso})

Con esto creamos un codigo que nos realiza una tarea, una cantidad especifica de veces.

While

Nos permite repetir un codigo hasta que se cumple una condicion

podemos decirlo de la siguiente manera

while(condición) { 
// Este código se va a ejecutar siempre a menos que la condicion cambie 
}

vamos a tomar el ejemplo anterior del nutricionista pero que en vez de hacerlo por un tiempo fijo, la persona hará dieta hasta que cumpla nuestra condicion que en este caso sera bajar 3 kilos, la cantidad de dia es algo que sabemos

const META = Joaquin.peso - 3
while (){
}

Esto nos dice que lo que esta entre llaves {}se va a repetir mientras que la condicion entre ( ) sea verdadera

al momento que esa condicion es falsa, continua en la otra parte del codigo y termina el WHILE

Para agregar las condiciones de subir y bajar de peso vamos a usar dos IF

const META= sacha.peso - 3
while (Joaquin.peso > META){
   if (){
   }
   if (){
   }
}

Utilizamos las condiciones credas anteriormente

const INCREMENTO_PESO = 0.3
const aumentarDePeso = persona => persona.peso += INCREMENTO_PESO
const adelgazar = persona => persona.peso -= INCREMENTO_PESO

vamos a crear dos constantes que nos devuelvan un numero random

const comeMucho= () => Math.random() < 0.3
const realizaDeporte = () Math.random() < 0.4

Ahora colocamos esa condicion a nuestra codigo principal

const META= sacha.peso - 3
var dias =0

while (Joaquin.peso > META){
   if (comeMucho()){
      aumentarDePeso(joaquin)
   }
   if ( realizaDeporte()){
      adelgazar(joaquin)
    }
    dias += 1
 }

Notar que se agregó la variable “dias”, este es un contador que empieza en cero y cada vez que se repite el ciclo WHILE se suma una unidad. (dias += 1)

Agragamos el console.log al final para que nos muestre en consola cuantos dias le tomó bajar tres kilos.

console.log("pasaron ${dias} dias hasta que ${joaquin.nombre} adelgazó 3 kg")

Estructuras repetitivas DO-WHILE

Esta estructura es lo mismo que el while pero con la diferencia que ejecuta el codigo al menos una vez, cosa que en el while puede no pasar si la condicion no se cumple.

Condicional multiple: Switch

Este comando nos permite decidir que código ejecutar de acuerdo a MULTIPLES condiciones para evitar el uso repetitivo del IF

Creamos una archivo nuevo con la variable SIGNO, porque utilizaremos el caso donde el usuario ingresa su signo y la consola le devolvera su horoscopo.

Para tomar el signo desde la consola utilizamos prompt

var signoo = prompt ( "¿cual es tu signo?")

el comando prompt guardara el valor y lo compararemos con las opciones cargadas en el codigo para mostrarle su horoscopo

var signo = prompt ( "¿cual es tu signo?")
if (signo === "acuario"){
 console.log ( // horoscope de acuario)
}
if (signo === "acuario"){
 console.log ( // horoscope de acuario)
}
if (signo === "acuario"){
 console.log ( // horoscope de acuario)
}

En nuestro caso solo pondremos tres signos zodiacales y colocaremos la frase “// horoscopo de..” para simplificarlo

Como se puede ver hay muchos IF , para reemplazar esto vamos a usar el comando SWITCH

Este comando abre las condiciones con la palabra case y cierra con la palabra break en cada caso.

Switch (signo) {
 case "acuario"
   console.log(//horoscopo de acuario)
 break
 case "cancer":
   console.log(//horoscopo de cancer)
 break
case "virgo":
  console.log(//horoscopo de virgo)
 break
}

si el usuario ingresa un valor con tilde en cancer (cáncer) podemos agregar este caso (case) en la misma condicion switch

case "cancer":
case "cáncer":
 console.log(//horoscopo de cancer)
break

En el caso que ningun caso sea valido se utilizamos DAFAULT al final de todos los case.

default
 console.log (" no es valido")

un array es un conjunto de elementos, numeros, letras u objetos dentro de una coleccion para realizar operaciones con ellas.

Se utilizan los corchetes para agruparlos. En este caso seran objetos.

Cada objeto sera una persona con atributos “nombre”, “apellido”, “edad”, “ peso” y “altura”.

Llamamos personas a nuestro array.

var personas =[Juan, Luis, Maria]

Si en la consola llamamos a la variable personas nos mostrara todos los elementos que este contiene.

Si colocamos en la consola

personas[0]

me devolvera el primer elemento del array : “Juan”

Si escribo

personas[0].peso

me devolvera el peso del elemento cero: “80 kg”

Tambien puedo escribir de otra manera

personas[0].[“peso”]

Recorrer el array

Si queremos recorrer el array usamos un ciclo for:

for (var ì=0; i< personas.length; i++){
   var persona = personas[i]
console.log("${persona.nombre} mide ${persona.altura}")
}

Filtrar un array

Para filtrar necesitamos una condicion y una funcion.

Vamos a filtrar a las personas altas con una funcion llamada personasAltas

const esAlta = (persona) => {
return persona.altura >1.8
}
var personas =[Juan, Luis, Maria]
var personasAltas = personas.filter(esAlta)
console.log(personasAltas)

Usando el arrow function en la primera parte

const esAlta = persona =>persona.altura> 1.8
var personas =[Juan, Luis, Maria]
var personasAltas = personas.filter(esAlta)
console.log(personasAltas)

se puede expresar tambien colocando la condicion y la funcion juntos

var personasAltas = personas.filter(funcion()){
   return persona.altura> 1.8
}

Pero es mas prolijo tenerlos por separado

Importante: Lo que hace filter es darnos un array nuevo, ya que el original no se modifica

transformar un array

la funcion map modifica el array original

vamos a pasar el arreglo donde las alturas estan en metro, a centrimetros

var personasCms = personas.map(pasarAlturaACms)

luego

const pasarAlturaACms = persona => {
  persona.altura *= 100
  return persona
}
var personasCms = personas.map(pasarAlturaACms)
console.log(personaCms)

ahora si no queremos modificar el original

const pasarAlturaACms = persona => {
  return{
   ...persona,
    altura: persona.altura *100
}
}

con esta forma no se me modifica los valores del array original

Esto tambien se puede escribir con parentesis “” para omitir el “return”.

const pasarAlturaACms = persona => ({
 ...persona,
    altura: persona.altura* 100
  })

Reducir un Array

Otra de las opciones mas comunes de array es reduce, que transforma mi arreglo en un valor unico

Agragemos un atributo a cada persona de cuantos libros tiene cada uno y quiero calcular el total.

Para sumar todo uso un FOR

var acum = 0
for (var = i; i< persona.lenght; i++){
  acum= acum + personas[i].cantidadDeLibros
}
console.log("En total todos tienen ${acum} libros”)

Esto se puede escribir un poco mas prolijo con reduce (necesita una funcion y un valor inicial que en nuestro caso sera (reducer, 0)). Esta funcion traera el numero de libros de cada objeto y lo sumara empezando desde cero.

const reducer = (acum, persona) =>{
    return acum + persona.cantidadDeLibros
}
var totalDeLibros = personas.reduce(reducer,0)
console.log("en total todos tienen ${acum} libros”)

mas simple podemos decir, eliminado el return y desestructurando la persona diciendo que solo vamos a acceder a la cantidad de libros.

const reducer = (acum, {cantidaDeLibros}) => 
   acum + cantidadDeLibros
var totalDeLibros = personas.reduce(reducer,0)
console.log("en total todos tienen ${acum} libros”)

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