Arrow functions

Clase 15 de 55 • Fundamentos de JavaScript 2018

Resumen

En esta clase aprenderemos a utilizar Arrow Functions que permiten una nomenclatura más corta para escribir expresiones de funciones. Este tipo de funciones deben definirse antes de ser utilizadas.

Al escribir las Arrow Functions no es necesario escribir la palabra function, la palabra return, ni las llaves.

Daniel Muñoz Martín

student•

Aquí les dejo otra opción utilizando el operador ternario con Javascript, para escribir un if en una sola línea:

const permitirAcceso = ({ edad }) => !esMayorDeEdad({ edad }) ? console.log('Acceso denegado') : console.log('Adelante')

Aquí preguntamos: es cierto (true) que no es mayor de edad ?
o: es diferente a mayor de edad ? (por lo que es menor de edad)

Si es así, quiere decir que es menor de edad (porque estamos preguntando por una negación), entraría al if, y haría la acción que viene despues del ?
Y el else sería lo que haría si no entrara al if ( si es mayor de edad ), haría la acción despues de los :

Aquí tienen la documentación del operador ternarío: documentación

Gran curso y gran trabajo por parte del equipo de Teaching y de Sacha por explicar mucho más claro estos conceptos tan complejos. 👍🏻😉

Cristhian Camilo Perez Veloza

student•

que función cumple el signo de interrogación en la función ?

Daniel Muñoz Martín

student•

Es un if, si la condición se cumple haría el código que viene después del signo de interrogación. Si no se cumple se ejecuta lo que viene después de los dos puntos.

Ten en cuenta que este caso estoy preguntando por una negación. Para que haga la parte de código del if la afirmación debe de ser negativa, es decir que sea cierto, que no sea mayor de edad .

Espero haberme explicado, cualquier cosa me cuentas 😉

CESAR AUGUSTO TAPIAS SIERRA

student•

Mi solución al reto!

oscar arcia

student•

ejeje me muy parecida a tu solucion,

Heydy Mayumy Carrasco Huaccha

student•

const esMayorDeEdad = ( { edad } ) => edad >= MAYORIA_EDAD
const esMenorDeEdad = ( { edad } ) => !esMayorDeEdad({edad})
function permitirAcceso(persona){
(esMenorDeEdad(persona))?console.log("ACCESO DENEGADO") : console.log("ACCESO PERMITIDO")
}```

Pablo Andres

student•

Arrow Functions

JS permite asignar una función a una variable. Se llama función anónima. Y se puede escribir de varias maneras:

const MAYORIA_DE_EDAD = 18

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

Sacha prefiere declararla como ‘const’ y no como ‘var’ para definir que es una función y no una variable:

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

La palabra clave ‘function’ puede reemplazarse por un ‘=>’ después de persona y se convierte en un arrow function:

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

Se pueden seguir quitando caracteres.

Cuando hay un sólo parámetro se pueden quitar los paréntesis
Si una función sólo retorna un valor se puede quitar el keyword ‘return’ y las llaves {}

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

También se puede desestructurar el parámetro ya que sólo nos interesa la edad. Hay que agregar paréntesis:

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

Yury D. Morales

student•

Muy bien sintetizado, gracias!

Pablo Andres

student•

Hola, me alegra que te sirva.
Cualquier cosa aquí está el resumen completo.
Saludos.

Ginnio Sarabia

student•

¿Cual es el beneficio de usar arrows functions?

¿Ahorrar gigas de texto?

¿Complicar la lectura para lo menos experimentados?

sebastian mst

student•

Por lo que he leído (al menos hasta lo que he leído), solo es una manera más comprimida de escribir funciones, más bien, estás más limitado al usar arrow functions.

Stalin Badillo

student•

jajaja

Ruben Vazquez Almanza

student•

Listo!

const permitirAcceso = persona => !esMayorDeEdad(persona) ? console.log('ACCESO DENEGADO') : console.log('ACCESO PERMITIDO')

Gian Pumayalla

student•

Genial!

Carlos López Brú

student•

Excelente!

Wilmar Yoan Malaver Malaver

student•

Bueno realice lo siguiente.

// torneo saga majin buu

var goku = {
  nombre: 'Goku',
  edad: 38,
  raza: 'Sayayin'
}

var vegeta = {
  nombre: 'vegeta',
  edad: 44,
  raza: 'Sayayin'
}

var gohan = {
  nombre: 'Gohan',
  edad: 18,
  raza: 'Mestizo'
}
var goten = {
  nombre: 'Goten',
  edad: 7,
  raza: 'Mestizo'
}
var trunks = {
  nombre: 'Trunks',
  edad: 8,
  raza: 'Mestizo'
}

var MAYORIA_EDAD = 18;

const esMayorEdad = ({edad}) => edad >= MAYORIA_EDAD
const esMenorEdad = ({edad}) => edad < MAYORIA_EDAD


function ingresoAltoneoAdultos (persona) {
  if (!esMenorEdad(persona)){
    console.log(`${persona.nombre} usted puede participar en el torneo de adultos, es mayor de edad`)
  }else {
    console.log(`${persona.nombre} usted no puede participar en el torneo de adultos, es menor de edad`)
  }
 }
 
 ingresoAltoneoAdultos(goku)
 ingresoAltoneoAdultos(gohan)
 ingresoAltoneoAdultos(goten)
 ingresoAltoneoAdultos(trunks)
 ingresoAltoneoAdultos(vegeta)

fue divertido mientras duro :)

Bernardo Aguayo Ortega

student•

increible

Fabio Leonardo Fuentes Melendez

student•

puedes crear la siguiente linea de código: const MINORIA_DE_EDAD = 17 Y crear una arrow function así: const esMenorDeEdad = ({ edad }) => edad <= MINORIA_DE_EDAD

Así te puede funcionar!!! Suerte!!

Juan Marcos Caicedo Mejía

student•

Mi reto:

const esMenorDeEdad = persona => !esMayorDeEdad(persona);

Bernardo Aguayo Ortega

student•

genial

Julio Ignacio Oyarzun Cayuman

student•

Cabe aclarar que, a diferencia de las funciones normales, las arrow function deben ser declaradas antes de ser invocadas ya que su scope no es global como el de las funciones normales.

Willy David Da Conceicao Lozada

student•

Vimos funciones anónimas (una variable que es una funcion), los arrow function son funciones mas simplificadas donde podemos retornar algun valor de forma simplificada AL MOMENTO DE LLAMARLAS Y PASAR PARAMETROS ES TODO IGUAL. ![](

Daniel Páez

student•

Aqui mi codigo

//Imprimiendo algo en la consola
console.log("inicializando archivo");

/*Declaración de objetos
=========================================*/

//Creando el objeto persona
var daniel = {
	nombre: "Daniel",
	apellido: "Páez",
	edad: 18,

//Creando el atributo profesion donde contenemos las profesiones que ejerce el objeto persona
	profesion: {

		ingeniero: true,
		abogado: false,
		diseñador: false,
		marketer: false,
		web: true
		//profesion: valor booleano

	}
	
}

//Otro objeto persona, similar al anterior
var javier = {
	nombre: "Javier",
	apellido: "Carrasquero",
	edad: 8,
	//profesión no aplica
}

//esta variable es mas bien una constante
const MAYORIA_DE_EDAD = 18;



/*Declaración de funciones
=========================================*/

 //Colocando dentro de una variable una funcion, version 1.0 mi funcion
var esMayorDeEdad = function (persona) {
//funcion anonima, no tiene un nombre, para invocarla se invoca a la variable
	
	return persona.edad >=  MAYORIA_DE_EDAD;
	//para retornarla tenemos que colocar return
}

/*ARROW FUNCTION version 2.0*/
var esMayorDeEdad = (persona) => {
//arrow function, no tiene un nombre, para invocarla se invoca a la variable donde va la funcion, parametro, cuerpo
	
	return persona.edad >=  MAYORIA_DE_EDAD;
	//para retornarla tenemos que colocar return
}

//EXTREME ARROW FUNCTION version 3.0 de mi funcion
var esMayorDeEdad = ({ edad }) =>  edad >=  MAYORIA_DE_EDAD;


//RETO Funcion esMenorDeEdad
const esMenorDeEdad = (persona)  => !esMayorDeEdad(persona);
/*
mi variable es igual a la funcion donde
contiene el parametro
en este caso el objeto persona
donde ejecutaremos la inversa del resultado
de la funcion es mayor de edad
*/

//funcion para imprimir en consola si el objeto persona es mayor de edad
function imprimirSiEsMayorDeEdad(persona) {

	//Daniel es mayor de edad
	if ( esMayorDeEdad(persona) ) {
		console.log(`${persona.nombre} es mayor de edad`)
	}

	//Daniel es menor dde edad
	else {
		console.log(`${persona.nombre} es menor de edad`)
	}
}

//Esta funcion permite acceso al usuario si es Mayor de edad
function permitirAcceso(persona) {
	if (!esMayorDeEdad(persona) ) {
		//imprimir en consola acceso denegado
		console.log("ACCESO DENEGADO :( ")
	}
	else {
		//imprimir en consola acceso aprobado
		console.log("ACCESO APROBADO");
	}
}


/*Ejecución de funciones
=========================================*/

permitirAcceso(daniel)
permitirAcceso(javier)
imprimirSiEsMayorDeEdad(daniel)


/* 
IDEAS CLAVES
-------------
=> Descomponer tu codigo en mini funciones te permite que:

	1 tu codigo sea mas legible
	2 tu codigo sea mas reutilizable
	3 tu codigo sea mas escalable


=> Podemos asignar a una variable una funcion
  no todos los programas permiten eso 

=> Cada numero suelto deberia ser una variable con 
un nombre que la describa


CONTROL DE ERRORES, FALLOS
=> Simplemente se me habia olvidado pedir el parametro en la linea 81

RETO
escribir la funcion es menor de edad como arrow function
donde retorne la negacion a la llamada es mayor de edad
------------------------------*/

josue cieza

student•

gracias por tu aporte.

Daniel Páez

student•

Un placer Josue, ¿Que tal te fue en la clase? ¿Entendiste y manejaste bien los conceptos?

Adrian Salgado

student•

Porque esta de moda hacer arrow functions?

Nilson Diaz

student•

Hola :3 , El uso de arrow functions facilita el escribir y leer codigo,

Por ejemplo ,cuando necesitamos utilizar una funcion anonima en algun metodo , en este caso de un array, lo podemos hacer asi:

myArray.map(function(elemento){
	return elemento_Modificado
})

o lo puedes simplificar mucho mas con arrow functions

myArray.map(elemento => elementoModificado )

Recuerda que tenemos ciertas ventajas como el return implicito y recibir el elemento sin parentesis Lo cual hace en la mayoria de casos que nuestro codigo se vea mas limpio

pero aun ahi otra razon 👀 cuando trabajamos con clases tenemos que hacer uso de this , las arrow functions establecen un contexto diferente de this que el de las funciones normales

Te dejo este video del mismo profesor de este curso que te ayudara a entender mejor que es el this y la principal diferencia entre arrow functions y funciones normales Video de Sacha

Luis Lira

student•

Dependerá el momento en el que se usen para saca una ventaja o no. Las funciones anónimas creo que son convenientes cuando las pasarás como un callback, aunque en mi preferencia son las funciones normales cuando el código de la función es algo "complejo". Además de que eso lo haría más reutilizable desde mi punto de vista.

Además, otra ventaja de las funciones normales es que al momento de que el navegador lanza un error, es más fácil detectarlo cuando una función tiene nombre.

Ramdhei López Arcila

student•

Es mejor sacrificar legibilidad del código para ahorrar espacio?

Luis Mojica

teacher•

No. Es espacio de almacenamiento hoy en dia es muy barato, el tiempo de los desarrolladores no.

Patricio Villarroel Durán

student•

No, para nada. De hecho, hay movimientos, libros y "políticas" para evitar justamente eso, como "Clean Code" de Robert C. Martin. Seguro que si lees los primeros capítulos te convencerá de lo importante que es nombrar bien las variables, usar bien las funciones y definir estilos en común para cuando trabajar en equipo con otros programadores.

El código bien escrito es tan importante como un código que funcione. Porque sino luego no lo podrás mantenerlo. Ni menos colaborar con otros.

Revisa este link que te da ideas para tener un código legible y limpio en javascript: https://github.com/andersontr15/clean-code-javascript-es

Aaron Joel Limachi Quispe

student•

Me podrían explicar por favor cual es el beneficio de usar const en lugar de var.

Diego Forero

Team Platzi•

const se usa para almacenar valores que no cambian y prevenir su sobre escritura en el código, se usa también para guardar las funciones porque la función como tal no cambia, cambian los parámetros que recibe y con base en esos parámetros da una respuesta.

Juan Castro

teacher•

Esta lectura te ayudará: https://platzi.com/blog/la-diferencia-entre-let-y-var/. :wink:

Carlos Rodríguez Huerta

student•

Solución:

const esMenorDeEdad = ({ edad }) => !esMayorDeEdad({ edad })

Andres Buelvas Diago

student•

En el min 03:37, como hizo para pasar las lineas en comentarios así de rápido?

Ignacio Esteban Aredez Diaz

student•

Control + k + c para comentar (Primero una tecla y luego la otra sin soltar control) Control + k + u para quitarlo

Andres Buelvas Diago

student•

Aqui lo estoy haciendo y no me sale. Es para no tener que colocar los "//" manualmente. Porque sería?

Marisol Cervantes

student•

Pueden omitir las llaves del if si solo hay una línea de código dentro de ellas. Este ejemplo

function permitirAcceso(persona) {
    if(!esMayorDeEdad(persona)) {
        console.log('ACCESO DENEGADO')
	}
}

es lo mismo que este otro

function permitirAcceso(persona) {
    if(!esMayorDeEdad(persona)) 
        console.log('ACCESO DENEGADO')
}

Así pueden escribir con un poco más de claridad

José Manuel de Jesús López Arizmendi

student•

RETO:

const esMenorDeEdad = ({edad}) => !esMayorDeEdad({edad});

Antonio Madrid

student•

gracias, no había entendido bien el reto

Daniel Pino

student•

const acceso = ({ edad }) => edad < MAYORIA_DE_EDAD ?  'ACCESO DENEGADO' : 'Todo bien'

Sergio González

student•

Reto completado.

var sacha = {
    nombre: 'Sacha',
    apellido: 'Lifszyc',
    edad: 28,
    ingeniero: true,
    cocinero: false,
    cantante: false,
    dj: false,
    guitarrista: false,
    drone: true
  }

  var juan = {
      nombre: 'Juan',
      apellido: 'Gomez',
      edad: 16
    }

  const MAYORIA_EDAD = 18

 //ARROWS FUNCTION
  const esMayor = ({ edad }) => edad >= MAYORIA_EDAD

//RETO

  const esMenorDeEdad = persona => (!esMayor(persona))

Leonardo Pesina aviles

student•

<code> const notLegal = ({nombre, edad}) => {
    if (!legalAge({edad})){
        console.log(`${nombre} no puede pasar.`);
    }
    else { 
        console.log(`${nombre} ya tiene pelos, no hay pedo.`);
    }
}

Sebastián Riátiga

student•

Jajajajaja "... ya tiene pelos, no hay pedo." ¡Esa estuvo buena, Leonardo!