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?

● Distinguir el concepto de las funciones y sus estructuras para aplicar correctamente

sus características.

● 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.

La ventaja de utilizar funciones en nuestros desarrollos, es encapsular porciones de código y

llamarlas en cualquier momento desde nuestro programa; de esta manera, evitamos escribir
código una y otra vez, agilizando el desarrollo y facilitando su legibilidad y orden.

_ 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();

Y las otras, son las que podemos definir nosotros:

function hola(nombre){
console.log(`Hola ${nombre}.`)
}

hola('Javier'); // => Hola Javier

Según la página de desarrolladores de Mozilla Firefox, una función es un procedimiento en

JavaScript, es decir, un conjunto de sentencias que realizan una tarea o calculan un valor, o
sea, una función será una porción de código con un fin definido y establecido por el
programador. Este objetivo puede ser reutilizable: procesar datos, recibir valores o regresar
resultados, convirtiendo el código en pequeños módulos con funciones definidas.

Estructura de una Función

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:

function nombre (parametro1, parametro2, ...) {

// operaciones
return resultado;
}

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.

Argumentos y Parámetros de una Función

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.

Retornos de una Función

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:

function nombre (parametro1, parametro2, ...) {

// operaciones
return resultado;
}
var miVariable = nombre();

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:

const f = function saludar(nombre, nombreFuncion) {

function hola() {
return "Hola " + nombre;
}

function buenosDias() {
return "Buenos días " + nombre + "!";
}

if (nombreFuncion === "hola") {

return hola;

_ 4

www.desafiolatam.com
 }

return buenosDias;
}

let miFuncionDeHola = f("Desafio", "hola");

// Ahora miFuncionDeHola es una función y se debe llamar como tal.

miFuncionDeHola(); // "Hola Desafío"

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:

function imprimirArgumento (parámetro) {

console.log("El argumento es: " + argumento);
}

Ejercicio guiado: Suma de tres números

Desarrollar un programa en JavaScript que calcule la suma de tres números enteros e

indique el resultado directamente en la función, es decir, sin retorno de valor alguno.
Sigamos los siguientes pasos:

● Paso 1: Crear un archivo index.html y un archivo funciones.js dentro de una carpeta

en nuestro sitio de trabajo.

● Paso 2: Al archivo index.html debemos agregarle toda la configuración básica de un

documento HTML.

● Paso 3: En el archivo funciones.js debemos agregar el código necesario para

inicializar las tres variables con números diferentes, luego crear la función llamada
“sumaNumeros” que recibe como parámetros esos tres números, realice la suma y
los guarde en una variable, para luego mostrar el resultado dentro de la misma
función. Finalmente hacer el llamado a la función pasando como argumentos los
tres números iniciados en las variables.

_ 5

www.desafiolatam.com
 var num1 = 1;
var num2 = 2;
var num3 = 3;

function sumaNumeros (num1,num2,num3) {

let suma = num1 + num2 + num3;
alert("El resultado es: " + suma);
};

sumaNumeros(num1,num2,num3);

Siendo el resultado mostrado en la ventana emergente en el navegador:

Imagen 1. Resultado de la suma de tres números dentro de una función.

Fuente: Desafío Latam

_ 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:

const nombre = function (parametro1, parametro2, ...) {

// ...
}
nombre();

Simulando el ejemplo anterior de la suma:

const suma = function(a, b) {

return a + b;
}

Ejercicio guiado: Funciones anónimas

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:

● Paso 1: En el archivo funciones.js debes armar la estructura de la función anónima,

es decir, sobre una variable llamada “divide” declaramos la función. Luego inicializar
dos variables donde se almacenarán los datos ingresados por el usuario y serán
pasados como argumento en el llamado a la función, en este caso, podemos llamar
a las variables “num1” y “num2” y mediante la función “prompt()” solicitamos al
usuario ingresar los datos. Este paso se vé de la siguiente forma:

var num1 = prompt("Ingrese el primer número: ");

var num2 = prompt("Ingrese el segundo número: ");

let divide = function (num1,num2) {

//proceso
}

_ 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():

var num1 = prompt("Ingrese el primer número: ");

var num2 = prompt("Ingrese el segundo número: ");

let divide = function (a,b) {

let resultado = parseInt(a) / parseInt(b);
return resultado;
};

document.write("Resultado de la división: "+divide(num1,num2));

Generando el resultado en el navegador:

Imagen 2. Resultado de la función en el navegador.

Fuente: Desafío Latam

Alcance en una Función

El scope o alcance de una variable en JavaScript, se define como el espacio o segmentos de

código donde esa función es conocida. Es decir, el scope decide a qué variables de tu
programa tienes acceso directo. Sin embargo, la misma función delimita hasta donde
conocen sus propias variables y hacia dónde hacen referencia estas mismas.

Ejercicio guiado: Alcance en una función

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:

● Paso 1: En el archivo funciones.js debemos agregar el código necesario para

inicializar la variable “miVariable” con el número 10, luego crear una función llamada
“miFuncion” que no recibirá ni retorna ningún tipo de valor, pero sí tendrá el inicio de

_ 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().

var miVariable = 10; // variable global

function miFuncion () {
var miVariable = 5 // se declara una "nueva" variable local al usar
'var'
console.log(miVariable); // se muestra la variable en la consola
};

● Paso 2: Fuera de la función realizaremos un console.log() de “miVariable” y el

llamado a la función “miFuncion”. Por último, hacemos nuevamente el llamado
mediante un console.log() de “miVariable” :

var miVariable = 10; // variable global

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);

Por ende, el resultado de la ejecución del código anterior sería:

10
5
10

Del resultado anterior podemos entender que el primer 10 corresponde a la declaración de

var miVariable = 10 que se encuentra al comienzo de nuestro código, el valor 5
corresponde al console.log de la función miFuncion, la cual en su interior declara otra
variable con valor 5 y el último valor de 10 corresponde al valor de miVariable declarado al
principio igual que el primer 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:

var miVariable = 10; // variable global

function miFuncion () {
miVariable = 5 // Se hace uso de la variable "global" 'miVariable'
console.log(miVariable);
}

console.log(miVariable);
miFuncion();
console.log(miVariable);

El resultado de la ejecución para este caso sería:

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

Existe un concepto en informática llamado recursividad, que en palabras simples consta de

hacer referencia o definir un elemento en base a sí mismo. En las funciones, consiste en
llamar nuevamente a la función desde ella misma de forma recursiva, de ahí el nombre, por
lo tanto, se pueden hacer ciclos repetitivos mediante la recursividad de funciones y con la
ayuda de condicionales, para ir repitiendo una secuencia hasta que cierto valor llegue a un
punto. Veamos un ejemplo donde se calcula el cuadrado de un número mediante
recursividad.

function miFuncion() {
let miVariable = 4;

function potencia() {
return miVariable * miVariable;
}

return potencia();
}

let resultado = miFuncion();

console.log(resultado);
resultado = potencia();

El resultado de la ejecución para console.log(resultado) sería:

16

Mientras que al tratar de asignar a la variable resultado, el resultado de la función potencia

obtendremos:

Uncaught ReferenceError: potencia is not defined

Ejercicio guiado: Suma de términos

Calcular la suma de todos los términos almacenados en una variable con los datos del tipo
arreglo del 1 al 9.

● Paso 1: En el archivo funciones.js debes armar la estructura de la función e inicializar

una variable con datos del tipo arreglo, en este caso la podemos llamar “nums” e

_ 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:

const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function suma (nums) {

}

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”.

const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function suma (nums) {

// La Recursión se detiene cuando un array está vacío
if (nums.length < 1) { // con el length se mide la cantidad de
espacios que tiene la variable nums
return 0;
}

● Paso 3: Para poder finalizar el proceso en la función, se debe ir extrayendo y

eliminando a la vez los números de la variable “nums” que contiene el arreglo de
números. Esto se puede lograr mediante el método “shift()”, el cual, se encarga de
extraer y eliminar el primer término de un arreglo, sin importar el tipo de dato, por lo
que se debe almacenar ese dato que extrae el método dentro de una variable “valor”,
para finalmente retornar la variable “valor” más el llamado de función principal
pasando como argumento la variable “nums” que contiene los datos del tipo arreglo,
quienes van a ir disminuyendo en cada recorrido de la función debido al método
shift.

const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function suma (nums) {

// La Recursión se detiene cuando un array está vacío
if (nums.length < 1) { // con el length se mide la cantidad de

_ 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();

// retornando en cada pasada la suma de los primeros valores que se

van removiendo
return valor + suma(nums);
}
console.log(suma(nums))

Al revisar el resultado veremos:

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.

Ejercicio guiado: Factorial de un número

Desarrollar un código en JavaScript que permita calcular el factorial de un número. La

fórmula para calcular el factorial es: X! = X * (X-1)!

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:

● Paso 1: En el archivo funciones.js, debemos agregar el código necesario para

inicializar la variable que almacenará el dato ingresado por el usuario. Luego crear
una función llamada “factorial_numero”, que recibe esta información y retorna el
resultado de la fórmula del factorial (x * (x-1)!), mientras x siga siendo mayor que 1.
Esto en código se expresa de la siguiente manera:

_ 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;
}
}

var x = prompt("Ingrese un número");

document.write(`El factorial de ${x}! es: ${factorial_numero(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).

Lo que sería igual a:

_ 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