Lectura 1 - Funciones
Lectura 1 - Funciones
Funciones 1
¿Qué aprenderás? 2
Introducción 2
Funciones 3
Estructura de una Función 3
Argumentos y Parámetros de una Función 4
Retornos de una Función 4
Ejercicio guiado: Suma de tres números 5
Otras formas de desarrollar funciones 7
Ejercicio guiado: Funciones anónimas 7
Alcance en una Función 8
Ejercicio guiado: Alcance en una función 8
Alcance de una Función dentro de una Función 11
Ejercicio guiado: Suma de términos 11
Ejercicio guiado: Factorial de un número 13
¡Comencemos!
_ 1
www.desafiolatam.com
¿Qué aprenderás?
● Codificar una rutina JavaScript aplicando las diferentes formas de declarar funciones
para resolver el problema planteado.
Introducción
Una de las tareas más comunes en programación es automatizar procesos, esto significa
que tareas que son repetitivas se pueden realizar “solas” con ayuda de un computador y un
par de líneas de código. Bajo esta misma premisa es que nacen las funciones, las cuales
nos permiten agrupar un bloque de código bajo un nombre que contiene entradas y ofrece
un valor de retorno.
_ 2
www.desafiolatam.com
Funciones
Existen dos tipos de funciones, las que vienen incluídas en JavaScript (también llamadas
built-in functions), como por ejemplo console y Math:
console.debug(Object);
console.info(Object);
console.error(Object);
console.log(Object);
Math.random();
function hola(nombre){
console.log(`Hola ${nombre}.`)
}
Una función se compone de cuatro elementos que si bien no son todos obligatorios, si son
primordiales para su funcionamiento: un nombre, argumentos, parámetros, un bloque de
operaciones y un retorno, estos se ordenan de la siguiente manera:
nombre(argumento1,argumento2);
_ 3
www.desafiolatam.com
Para recordar y ejercitar los elementos estructurales de una función, puedes consultar el
documento Material Apoyo Lectura - Estructura de una función, ubicado en “Material
Complementario”. En este documento podrás revisar en detalle aspectos teóricos y
prácticos de este contenido.
En JavaScript, no es necesario definir el tipo de dato del parámetro como se hace en otros
lenguajes de programación, ya que no revisa ni el número de parámetros (cantidad) ni los
tipos de datos de los parámetros recibidos en una función. Esto significa que puedes pasar
cualquier variable como argumento y recibirlos como parámetros sin importar el tipo de
dato.
Es posible guardar el valor retornado por una función a una variable utilizando el operador de
asignación. Debido a que JavaScript no demanda conocer el tipo de dato de retorno, es
posible retornar cualquier tipo de variable. Por ejemplo, en el siguiente código, se asigna el
valor de retorno de la función nombre a miVariable:
También se puede asignar cualquier tipo de retorno, esto incluye funciones. Por ejemplo, si
queremos construir una función que depende de otra función:
function buenosDias() {
return "Buenos días " + nombre + "!";
}
_ 4
www.desafiolatam.com
}
return buenosDias;
}
Por lo demás, JavaScript no exige que exista algún tipo de retorno en las funciones, una
función sin el uso de return es totalmente válida:
_ 5
www.desafiolatam.com
var num1 = 1;
var num2 = 2;
var num3 = 3;
sumaNumeros(num1,num2,num3);
_ 6
www.desafiolatam.com
Otras formas de desarrollar funciones
Es necesario mencionar que no todas las funciones poseen un nombre, sino que también
existen las funciones anónimas, las cuales son asignadas (de ser necesario) a una variable
que otorgará el nombre para poder ser invocada posteriormente:
Solicitar al usuario que ingrese dos números enteros, y dentro de una función anónima se
realice la división de ambos números, retornando y mostrando, en el mismo llamado de la
función, el resultado como una variable. Para ello, sigamos los pasos:
_ 7
www.desafiolatam.com
● Paso 2: Realizar el llamado a la función pasando los argumentos, en este caso, los
dos números ingresados por el usuario y agregamos la función dentro de la
estructura del mensaje con un document.write():
Demostrar cómo opera el alcance en las funciones, para esto: crear dos variables con el
mismo nombre ubicadas en distintos espacios de código (dentro y fuera de la función) y
mostraremos su valor. Para esto realizaremos los siguientes pasos:
_ 8
www.desafiolatam.com
la variable “miVariable” esta vez con el número 5 como valor inicial, luego dentro de
ella mostramos la variable recién creada dentro de la función con ayuda de un
console.log().
function miFuncion () {
var miVariable = 5 // se declara una "nueva" variable local al usar
'var'
console.log(miVariable); // se muestra la variable en la consola
};
function miFuncion () {
var miVariable = 5 // se declara una "nueva" variable local al usar
'var'
console.log(miVariable); // se muestra la variable en la consola
}
console.log(miVariable);
miFuncion(); // se hace el llamado de la función
console.log(miVariable);
10
5
10
_ 9
www.desafiolatam.com
● Paso 3: Qué pasaría si en el código anterior, realizamos un pequeño cambio dentro
de la función y no inicializamos la variable con la palabra reservada var y solamente
le cargamos el número 5, como se muestra en el siguiente código:
function miFuncion () {
miVariable = 5 // Se hace uso de la variable "global" 'miVariable'
console.log(miVariable);
}
console.log(miVariable);
miFuncion();
console.log(miVariable);
10
5
5
En este ejemplo nos damos cuenta que el último console.log toma el valor de 5 declarado
dentro de la función miFuncion, esto se debe a que dentro de esta función se está
modificando el valor de la variable global miVariable, en palabras simples, en todo el
código se está trabajando con la misma variable.
_ 10
www.desafiolatam.com
Alcance de una Función dentro de una Función
function miFuncion() {
let miVariable = 4;
function potencia() {
return miVariable * miVariable;
}
return potencia();
}
16
Calcular la suma de todos los términos almacenados en una variable con los datos del tipo
arreglo del 1 al 9.
_ 11
www.desafiolatam.com
inicializarla con los valores del 0 al 9 dentro de un array: [0,1,2,3,4,5,6,7,8,9].
Quedando de la siguiente forma:
console.log(sum(nums))
● Paso 2: Como el dato se encuentra inmerso dentro de una sola variable del tipo
arreglo, entonces la recursividad entre funciones es la solución para poder ir
realizando la suma de todos los términos que se encuentran en el arreglo. Por lo
tanto, dentro de la función, se debe crear una estructura de control de flujo con “if”,
para comprobar si ya no existen números dentro del arreglo para sumar, en el caso
de no existir se debe retornar cero y detener la recursión, esto se puede lograr
midiendo la longitud de la variable que contiene el arreglo con la instrucción “length”.
_ 12
www.desafiolatam.com
espacios que tiene la variable nums
return 0;
}
// El método shift() remueve el primer elemento del array
// y retorna ese valor. Este método cambia la longitud del array
var valor = nums.shift();
45
Por lo tanto, en el ejercicio anterior se muestra como se puede llamar una función dentro de
otra función logrando lo que se conoce como recursión. Para este caso en específico, la
función sum retorna el valor que extrae del arreglo y le suma el resultado de la misma
función, pero esta vez con un término menos en el arreglo debido al método shift(), que se
encargará de extraer y eliminar cada número del arreglo hasta dejarlo sin ningún dato.
Por ejemplo, si queremos calcular el factorial del número 4 (4!), sería igual a 4! = 1*2*3*4 =
24, por ende, se debe hacer el llamado a una función mientras el número enviado a la
función siga siendo mayor que 1.
Llevemos a código todo lo planteado mediante el uso de las funciones, por lo tanto:
_ 13
www.desafiolatam.com
function factorial_numero(x) {
if (x > 1) {
return x * factorial_numero(x - 1); // fórmula para el
factorial: X * (X-1)!
}
● Paso 2: En el caso que x sea menor o igual a 1, debe retornar solamente el valor de x.
Finalmente mostramos el resultado de la operación directamente desde el mensaje
al final del programa.
function factorial_numero(x) {
if (x > 1) {
return x * factorial_numero(x - 1); // fórmula para el
factorial: X * (X-1)!
} else {
return x;
}
}
Al ejecutar el código anterior, el resultado obtenido dependerá del valor ingresado por el
usuario. Por ejemplo, si el usuario ingresa el número 4, el resultado sería:
El factorial de 4! es: 24
Si realizamos una corrida manual del código anterior, es decir, paso a paso a modo
descriptivo y de pseudocódigo, podríamos analizar y observar lo que ocurre en cada paso:
Ve a factorial_numero(4).
¿4 es mayor a 1? Si. Coloca a factorial_numero(4) en espera y va a factorial_numero(3).
¿3 es mayor a 1? Si. Coloca a factorial_numero(3) en espera y va a factorial_numero(2).
¿2 es mayor a 1? Si. Coloca a factorial_numero(2) en espera y va a factorial_numero(1).
¿1 es mayor a 1? No. Evalúa factorial_numero(1).
Retoma factorial_numero(2).
Retoma factorial_numero(3).
Retoma factorial_numero(4).
_ 14
www.desafiolatam.com
factorial_numero(4)
4 * factorial_numero(3)
4 * ( 3 * factorial_numero(2))
4 * ( 3 * ( 2 * factorial_numero(1)))
4 * ( 3 * ( 2 * 1 ))
4*(3* 2)
4 * (6)
24
_ 15
www.desafiolatam.com