Funciones como parámetros

Clase 29 de 55 • Fundamentos de JavaScript 2018

Resumen

En JavaScript, los parámetros de funciones son por defecto undefined. De todos modos, en algunas situaciones puede ser útil colocar un valor por defecto diferente que lo evalúe como verdadero.

Danelia Sanchez Sanchez

student•

Valores falsy (valores falsos) en Javascript:

false
0
null
""
undefined
NaN

Los demás son valores Truthy (valores verdaderos).
https://developer.mozilla.org/es/docs/Glossary/Truthy

Jesus Ricardo Moreira Cedeño

student•

Gracias 😃

Daniel Páez

student•

Que cómica la palabra “truthy” y “falsy”. Gracias por dejar la referencia Dane.

Oscar Stevens Cuartas Bejarano

student•

seria genial que en TODOS los cursos de DESARROLLO los profesores empezaran o terminaran con un video PLUS de “engallar” (mejorar) el editor de codigo elegido por el mismo profesor, por ejemplo como instarle plugins, que plugins recomienda el profesor, snippetds, wiggets, manejo avanzado del mismo como comandos rapidos etc etc…

Jesús Alejandro Machado Ortiz

student•

Totalmente de acuerdo!!

Guillermo Baldán López

student•

Estaría genial que hicieran un curso sobre herramientas de productividad del developer , no?

Pablo Andres

student•

Resumen de la Clase
Funciones como parámetros

Es posible pasar funciones como parámetros como si fuera cualquier otro tipo de variable.

Cómo se declara?
Como cualquier función.

La siguiente función es una respuesta a la función saludar del código que traemos de las clases anteriores:

function responderSaludo(){
	console.log(`Buen día`)
}

Cómo se implementa al prototipo?
Se agrega un parámetro a la función que la va a disparar dentro del prototipo (‘saludar(fn)’, en este caso) y un if que evalúe si es llamada.

	saludar(fn){
		console.log(`Hola me llamo ${this.nombre} ${this.apellido}`)
		if(fn){
			fn()
		}
	}

Cómo se ejecuta?
Se ejecuta invocando la función sin paréntesis dentro de los paréntesis de la función saludar ya que es una respuesta al saludo:

sacha.saludar(responderSaludo)

Si quiero pasar parámetros?
Los agrego al declarar la función y luego los agrego entre paréntesis a la invocación de la misma dentro de la función que la dispara en el prototipo. Funcionan implícitamente, es decir, no se agregan cuando invoco la función dentro del ‘saludar()’.

En la declaración:

function responderSaludo(_nombre_, _apellido_, _esDev_){
	console.log(`Buen día ${_nombre_} ${_apellido_}.`)
	if (_esDev_) {
		console.log(`Ah mirá, no sabía que eras dev.`)
	}
}

En la función nativa:

	saludar(fn){
		console.log(`Hola me llamo ${this.nombre} ${this.apellido}`)
		if(fn){
			fn(_this.nombre_, _this.apellido_)
		}
	}

Se invoca:

sacha.saludar(responderSaludo)

Para despejar la lectura del código y escribir menos:

	saludar(fn){
		console.log(`Hola me llamo ${this.nombre} ${this.apellido}`)
		if(fn){
			var {nombre, apellido} = this 
			// == var nombre = this.nombre // var apellido = this.apellido
			fn(nombre, apellido)
		}
	}

Hay valores que al ser evaluados dentro de un if dan verdadero y otros falso, en este caso fn dentro del if evalúa si existe la función en la invocación de saludar().

El código completo quedaría así:

class Persona {
	constructor(nombre, apellido, altura, genero){
		this.nombre = nombre
		this.apellido = apellido
		this.altura = altura
		this.genero = genero
	}
	saludar(fn){
		console.log(`Hola me llamo ${this.nombre} ${this.apellido}`)
		if(fn){
			var {nombre, apellido} = this
			fn(nombre, apellido)
		}
	}
	soyAltX(){
		var altX = this.genero == 'masculino' ? 'alto' : 'alta'
		var string = this.altura >= 1.8 ? `Soy ${this.nombre} ${this.apellido} y definitivamente soy ${altX}.` 
										: `Soy ${this.nombre} ${this.apellido} y no, no soy ${altX}.`
		console.log(string)
	}
}

class Desarrollador extends Persona {
	constructor(nombre, apellido, altura){
		super(nombre, apellido, altura)
	}
	saludar(fn){
		console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy desarrollader.`)
		if(fn){
			var {nombre, apellido} = this
			fn(nombre, apellido, true)
		}
	}
}

function responderSaludo(nombre, apellido, esDev){
	console.log(`Buen día ${nombre} ${apellido}.`)
	if (esDev) {
		console.log(`Ah mirá, no sabía que eras dev.`)
	}
}

var pablo = new Persona('Pablo', 'Andrés', 1.78, 'masculino')
var joaquin = new Desarrollador('Joaquín', 'Perez', 1.91, 'masculino')
var rosa = new Persona('Rosa', 'Mosqueta', 1.81, 'femenino')
var elis = new Persona('Elis', 'Detta', 1.73, 'femenino')

pablo.saludar()
joaquin.saludar(responderSaludo)
rosa.saludar(responderSaludo)
elis.saludar(responderSaludo)

Nathaly Stefani Riaño Bejarano

student•

Gran resumen, gracias!

Pablo Andres

student•

Hola @NathaRB me alegra que te sirva.
Si te interesa, en acá está el resumen del curso completo.
Saludos.

Juan Jose Puente Scapolatempo

student•

ah mirá, no sabía que eras desarrollador... eso sono tan argentino :D

Fabricio Moreno

student•

Chicos si logran terminar esta curso de js les aseguro que van a hacer unos maestros en el lenguaje, es uno de los mejores cursos que hay

Platzi Team

student•

Gracias por tus animos compañero.

Johan Manuel Perez Soto

student•

Clases como esta hace que valga la pena mi suscripción 👍👍

Willy David Da Conceicao Lozada

student•

Así funciona la lógica:

llamamos a un metodo y le mandamos una funcion por parametro
y en el metodo recibimos la funcion y evaluamos si nos mandan la funcion
llamara a la funcion y le mandamos parametros
y si cuando llamaron al metodo del objeto no mandaron una funcion como parametro no hara nada

MI CODIGO BIEN FINO

// podemos pasar funciones como parametros
class Persona {
    constructor (nombre, apellido, altura) {
        this.nombre = nombre // es un atributo del objeto que se esta creando
        this.apellido = apellido
        this.altura = altura
    }

    // metodos
    saludar(fn) {
        var { nombre, apellido } = this
        console.log(`Hola, Me llamo ${nombre} ${apellido}`)
        if (fn) { // si nos pasan una funcion (cuando llaman al metodo)
            fn(nombre, apellido) //llamamos a la funcion que nos mandan por parametro
        }
    }
    soyAlto() {
        return this.altura >= 1.8
    }
}

// para que una clase herede de otra
class Desarrollador extends Persona {
    constructor (nombre, apellido, altura) {
        super(nombre, apellido, altura) // no podemos usar this hasta que no llamemos al contructor padre | super define los atributos de la clase padre, y los hereda el hijo (desarrollador) le pasa los atributos al padre para que los tenga el hijo
    }
    
    //pisamos el metodo de la clase padre por esto:
    saludar(fn) {
        // var nombre = this.nombre // almacena en nombre el atributo nombre del objeto
        // var apellido = this.apellido
        var { nombre, apellido } = this // es lo mismo que lo de arriba

        console.log(`Hola, Me llamo ${nombre} ${apellido} y soy desarrollador/a`)
        if (fn) { // si nos pasan una funcion (cuando llaman al metodo como parametro)
            fn(nombre, apellido, true) //llamamos a la funcion que nos mandan por parametro
        }
    }
}


function responderSaludo(nombre, apellido, esDev) {
    console.log(`Buen día ${nombre} ${apellido} (respondo al saludo a ${nombre})`)
    if (esDev) { // si es true ejecuta esto
        console.log(`Ah mira, no sabia que eras desarrollador/a`)
    }
}

// instanciamos a los objetos (creamos objetos de diferentes clases)
var sacha = new Persona("Sacha", "Lifszyc", 1.72)
var erika = new Persona("Erika", "Luna", 1.65)
var arturo = new Desarrollador("Arturo", "Martinez", 1.89)

sacha.saludar()
erika.saludar(responderSaludo)
arturo.saludar(responderSaludo)


// llamamos a un metodo y le mandamos una funcion por parametro 
// y en el metodo recibimos la funcion y evaluamos si nos mandan la funcion
// llamara a la funcion y le mandamos parametros
// y si cuando llamaron al metodo del objeto no mandaron una funcion como parametro no hara nada```

Luis Felipe Medina Rodriguez

student•

fino

Andrés Felipe Lopez gomez

student•

Gracias

ANGEL DAVID SULBARAN CALDERON

student•

FUNCIONES COMO PARAMETROS Para ejecutar una función como parámetro, no es muy diferente al como veníamos haciéndolo, hemos pasado textos, nombres, números, apellidos, como parámetros, pero funciones también podemos hacerlo. Tomaremos el código de las clases y le agregaremos una función para que nos responda el saludo, para ello vamos a hacer lo siguiente;

Primero creamos la función

function responderSaludo (nombre, apellido, esDev){
    console.log(`Buen dia ${nombre} ${apellido}`)

    if(esDev){
        console.log(`ah mira, no sabia que eras desarrollador`)
    }

Esta es creada dentro de la clase desarrollador, y como podemos observar el tercer parámetro es el que verifica si es dev o no y le colocamos una condicional, de que si esDev le dirá “que no sabia que era un desarrollador”, como hacemos que la función verifique esto?, pues sencillo, lo veremos en las siguientes modificaciones, pero ten en mente que vamos a usar algo que ya hemos visto, lo haremos de manera booleana.

Ahora


var angel = new Desarrollador('Angel','Sulbaran', 1.71)
var pepe = new persona('Pepe','Trueno', 1.92)
var thor = new persona('Thor','Torero', 1.71)
var carl = new persona('Carl','Jhonson', 1.81)
var freddie = new persona('Freddie','Vega', 1.85)
var lorenzo = new persona('Lorenzo','VonMatterhorn', 1.76)
var lucas = new persona('Lucas','Posillo', 1.71)

angel.saludar(responderSaludo)
pepe.saludar()
thor.saludar(responderSaludo)
carl.saludar()
freddie.saludar(responderSaludo)
lorenzo.saludar(responderSaludo)

Tomamos a las persona y les colocamos dentro de sus parámetros la función para que al momento de ser llamadas, automáticamente, se ejecute la respuesta al saludo, en los objetos podemos observar que “angel” es el único desarrollador y por lo tanto será el único que tendrá la respuesta de “esDev” mientras que los demás tendrán una repuesta normal, tal como la asignamos. Luego de esto nos vamos a “saludar” de la clase persona y agregamos lo siguiente a la función

saludar(fn) {
    //var nombre = this.nombre
    //var apellido = this.apellido
    var {nombre, apellido} = this
    console.log(`Hola, me llamo ${nombre} ${apellido}`)
    if (fn){
        fn(nombre, apellido, null)
    }

Como podemos ver aca tenemos una variable un poco mas sencilla sobre lo que es nombre y apellido, de esta manera es igual de equivalente a como la parte que esta comentada, y creamos a parte la condicional “fn” la cual vamos a llamar en la misma como parámetro. ¿Por que? La cosa es que haciendo esto, al momento de llamar la función “responderSaludo” dentro de los parámetros de saludar al llamarla, esta lo va a reconocer como “fn” entonces,

angel.saludar(responderSaludo)

Al hacer esto le damos a fn un valor de true, de que existe un función que estamos pasando por parámetro lo que haría que, nos devuelva nombre, apellido y la booleana que comprobara si somos desarrolladores o no, por lo que al momento de llamar el saludo a un desarrollador nos respondera como tal, lo mismo pasa con el saludo de persona. Con esto explicado, nuestro código debería quedar asi:

class persona {
    constructor(nombre,apellido,altura) {
        this.nombre = nombre
        this.apellido = apellido
        this.altura = altura
       }

saludar(fn) {
    //var nombre = this.nombre
    //var apellido = this.apellido
    var {nombre, apellido} = this
    console.log(`Hola, me llamo ${nombre} ${apellido}`)
    if (fn){
        fn(nombre, apellido, null)
    }
}

soyAlto() {
    return this.altura >= 1.80
}
}

class Desarrollador extends persona {
constructor(nombre, apellido, altura) {
    super(nombre,apellido,altura)
}
    saludar(fn){
        var {nombre, apellido} = this
        console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy desarrollador`)
        if (fn){
            fn(nombre, apellido, true)
        }
    }

}

function responderSaludo (nombre, apellido, esDev){
    console.log(`Buen dia ${nombre} ${apellido}`)

    if(esDev){
        console.log(`ah mira, no sabia que eras desarrollador`)
    }
}


var angel = new Desarrollador('Angel','Sulbaran', 1.71)
var pepe = new persona('Pepe','Trueno', 1.92)
var thor = new persona('Thor','Torero', 1.71)
var carl = new persona('Carl','Jhonson', 1.81)
var freddie = new persona('Freddie','Vega', 1.85)
var lorenzo = new persona('Lorenzo','VonMatterhorn', 1.76)
var lucas = new persona('Lucas','Posillo', 1.71)

angel.saludar(responderSaludo)
pepe.saludar()
thor.saludar(responderSaludo)
carl.saludar()
freddie.saludar(responderSaludo)
lorenzo.saludar(responderSaludo)

Jonathan Jiménez Soveranes

student•

Buen resumen!

German Lagunes

student•

Muy Completo Spanky Gracias!!!

Rulo Code

student•

Hola Platzinautas !

Vengo del futuro(unas 5 clases adelante ) y quiero contarte que si has llegado hasta aquí es hora de que repases por completo todos los conceptos sobre funciones, ya que en las clases siguientes estaremos aprendiendo el asincronismo, un tema que pondrá a prueba nuestra capacidad de comprención.

Dejo aquí con mucho cariño un tutorial hecho por mi, espero sea de utilidad. https://platzi.com/tutoriales/1339-fundamentos-javascript/4253-todo-sobre-funciones/

Santiago Jimenez

student•

Muchas gracias !!!

Francisco Pin

student•

thank you, very nice

Daniel Alberto Esquinazi

student•

Si hacemos

obj.saludar('truthy value') la condición if (fn) dentro de la función saludar también seria verdadero e intentaría ejecutarse sobre un string lo cual retornaría una excepción.

Una alternativa podría ser preguntar por el tipo de fn? algo como if(typeof(fn) === 'function')

Daniel Vaca

student•

Excelente observación. Ese tipo de cosas son las pesadillas en JavaScript 😦

Diego Andrés Rojas González

student•

Podemos ahorrar unas lineas de código mas en:

	if ( fn ) {
		fn (nombre, apellido)
	}

y convertirlo en

	if ( fn ) fn (nombre, apellido)

Debido a que no tenemos una sentencia else ejecutándose

Teodoro Fernando Colque Valentin

student•

si en caso tienes varias lineas de codigo?

Santiago pascual plaus

student•

Dependiendo de la cantidad de código a evaluar, es decir queres evaluar en la misma función saludar si es o no es dev y que cada una te retorne un mensaje, podes utilizar if{ true }else{ false }, o ternarios** if(fn) ? true : false**.
En caso de que tus condicionales sean mayor que 2, podes utilizar Switch.
Espero haber sido útil 😃.

Rabi Leonel Leon Chan

student•

Null = false 0 = false Objeto(vacio) = true Array(vacio) = true String = true String (vacio) = false

Antonio Madrid

student•

Me ha costado bastante entender esta clase por el mal uso de nombres en funciones. En mi opinión llamar a la función fn de tal forma fue un desaciero total.

Si en lugar de:

saludar(fn) {
            var { nombre, apellido } = this
            console.log(`Hola, me llamo ${nombre} ${apellido} y soy desarrollador/a `)
            if (fn) {
                fn(nombre, apellido, true)
            }

Sustituimos fn con el nombre de la funcion a la que vamos a llamar, en este caso responderSaludo Tenemos:

saludar(responderSaludo) {
            var { nombre, apellido } = this
            console.log(`Hola, me llamo ${nombre} ${apellido} y soy desarrollador/a `)
            if (responderSaludo) {
                responderSaludo(nombre, apellido, true)
            }
        }

En mi opinión el código se lee infinitamente mejor. Si algo aprendí de Clean Code es la extrema importancia de un buen nombrado.

Aarón González

student•

Gracias!!! Me ha ayudado un montón esto.

Hugo Alexander Tellez Gomez

student•

Total mente de acuerdo contigo, aveces nos confundimos por el mal uso delosnombres de funciones

Aarón Fabricio Santa Cruz Valdez

student•

Vi dos veces la clase para entenderlo. Pero lo hice.

Harry Santiago Guarin Aristizabal

student•

valores que javascript toma como falsos:

false, 0, 0n " " , ' ', ``, null, undefined, Nan

Dejo los enlaces de truthy and falsy values

https://developer.mozilla.org/en-US/docs/Glossary/Falsy https://developer.mozilla.org/en-US/docs/Glossary/Truthy

Geraldine Hernández. Al-Attrach

student•

¿En que casos es util pasar funciones como parámetros? Si alguien por favor me puede ayudar a entender. Gracias

Luis Lira

student•

Cuando necesitas crear algo que se llama Callback, es decir, que dentro de una función, quieres que otra se ejecute en cierto momento, obviamente esta otra función estará en un archivo diferente y por eso no podrías llamarla directamente.

Anthony Smith Quispe De la cruz

student•

Otro gran aporte por parte de Luis_LiraC, hay otra situación de interés para tu pregunta, antes de nada veamos dos conceptos previos necesarios:

Concurrencia: La existencia de varios procesos de forma simultánea.
Constructores de POO: Son los métodos/funciones que usamos para crear objetos(ejemplos) de una clase(conjunto).
Uso de la concurrencia en los lenguajes de programación: Esto se consigue a través del uso de HILOS, dependiendo del lenguaje verás que cada lenguaje tiene su forma de llevar a cabo la concurrencia, por ejemplo Java y C++ son muy diferentes.

Tras explicar estos puntos te voy a hablar de la creación de hilos en C++, en este lenguaje te piden que crees los hilos de la siguiente forma:

Thead hiloA(nombreFuncionA);
Thread hiloB(nombreFuncionB);

¿Qué hace este código? Te crea dos objetos de la clase Thread(estos son nuestros hilos) lo cuales lanzarán la ejecución concurrente de dos funciones(el nombre de la función es el argumento del constructor de esa clase), este es un caso muy interesante de pasar una función como argumento, de hecho esto se usa para explotar las capacidades de los procesadores actuales.

German Enrique Ceballos Garcia

student•

Valores: Truthy y Falsy

¿Que tipos por default son verdaderos y falsos?

Usamos la función de JS que es Boolean() dentro del paréntesis ponemos el valor y nos dice si el mismo el False o True.

Falsy

Boolean() —> sin ningun valor es false
Boolean(0) —> false
Boolean(null) —> false
Boolean(NaN) —> false // NaN es Not and Number
Boolean(Undefined) —> false
Boolean(false) —> false
Boolean("") —> false

Truthy

Boolean(1) —> true //cualquier numero que no sea igual a cero es true
Boolean(“a”) —> true
Boolean(" ") —> true // siendo un espacio el valor es true
Boolean([]) —> true // un array nos da un true
Boolean({}) —> true // un objeto nos da el valor de true
Boolean(function() {}) —> true //una funcion tambien es true
Boolean(true) —> true

Todo esto lo vamos a usar en condiciones esto valida si es verdadero o falso para ejecutar cierta acción.

Referencias:

Obed Paz

student•

Les recomiendo que a apartir de aqui aprendan las diferencias de mandar una referencia y un valor, esto tiene que ver si enviamos las funciones como parametros CON o SIN ++parentesis++. 👍✨

Silvana Rolón

student•

Nazareno Aznar Altamiranda

student•

Me sale "buen dia undefined undefined " y no logro que la funcion "responderSaludo" ejecute el IF, en efecto no estoy logrando que dentro del IF se reconozcan los parametros que pongo ¿Pueden ayudarme con esto?

class Persona {
    constructor(nombre, apellido, altura) {
        this.nombre = nombre
        this.apellido = apellido
        this.altura = altura
    }

    saludar(funcion) {
        let {nombre, apellido} = this
        console.log(`Hola! me llamo ${nombre} ${apellido}!`);
        if(funcion) {
            funcion(nombre, apellido, false)
        }
    }
    soyAlto() {
       
        if(this.altura > 1.79) {
            console.log(`Soy alto :)`);
        } else {
            console.log(`Soy bajo :(`)
        }
    }
}

class Desarrollador extends Persona {
    constructor(nombre, apellido, altura) {
        super(nombre,apellido,altura)
    }

    saludar(funcion) {
        let {nombre, apellido} = this;
        console.log(`Wenas, soy ${nombre} ${apellido} y soy desarrollador`);
        if(funcion) {
            funcion(nombre, apellido, true)
        }
    }
}

function responderSaludo(nombre, apellido, esDev) {
    console.log(`Buen día ${nombre} ${apellido}`)
    if (esDev) {
        console.log(`Ah mirá, no sabía que eras desarrollador`)
    }
}

let naza = new Persona("Nazareno", "Altamiranda", 1.89);
let pipo = new Desarrollador("Pipo", "Herrera", 1.79);

naza.saludar(responderSaludo());
pipo.saludar(responderSaludo());

CRISTIAN BARBERO PÉREZ

student•

Ambas se solucionan quitando los paréntesis de responderSaludo(), quedaría así:

naza.saludar(responderSaludo);
pipo.saludar(responderSaludo)

jonathan gonzalez

student•

puedes mostrar tú codigo para ayudarte ?

Funciones como parámetros

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

¿Cuándo hace falta poner el punto y coma al final de la línea?