dia_07_funciones.md

30 Días de JavaScript: Funciones

_{Autor: Asabeneh Yetayeh
Enero, 2020}

<< Día 6 | Día 8 >>

• 📔 Día 7
  • Funciones
    • Función declarativa
    • Función sin parámetros y return
    • Función que retorna un valor
    • Función con un parámetro
    • Función con dos parámetros
    • Función con muchos parámetros
    • Función con número ilimitado de parámetros
      • Número ilimitado de parámetros en una función regular
      • Número ilimitado de parámetros en una función flecha
    • Función anónima
    • Función de expresión
    • Funciones de autoinvocación
    • Función flecha
    • Función con parámetros por defecto
    • Función declarativa versus función flecha
  • 💻 Ejercicios
    • Ejercicios: Nivel 1
    • Ejercicios: Nivel 2
    • Ejercicios: Nivel 3

📔 Día 7

Funciones

Hasta ahora hemos visto muchas funciones JavaScript integradas. En esta sección, nos centraremos en las funciones personalizadas. ¿Qué es una función? Antes de comenzar a hacer funciones, comprendamos ¿Qué es una función? y ¿Por qué necesitamos una función?

Una función es un bloque reutilizable de código o declaraciones de programación diseñadas para realizar una determinada tarea.

Una función se declara mediante la palabra clave function seguida de un nombre, seguido de paréntesis (). Un paréntesis puede tomar un parámetro. Si una función toma un parámetro, se llamará con un argumento. Una función también puede tomar un parámetro predeterminado. Para almacenar datos en una función, una función debe devolver ciertos tipos de datos. Para obtener el valor llamamos o invocamos a la función.

La función hace código:

• limpio y fácil de leer
• reutilizable
• fácil de probar

Una función se puede declarar o crear de un par de maneras:

• Función declarativa
• Función de expresión
• Función anonima
• Función flecha

Función declarativa

Veamos cómo declaramos una función y cómo llamar a una función.

//declaramos una función sin un parámetro
function functionName() {
  // el código va aquí
}
functionName(); // llamando a la función por su nombre con paréntesis

Función sin parámetros y return

La función se puede declarar sin un parámetro.

Ejemplo:

// función sin parámetros. La función eleva al cuadrado un número
function square() {
  let num = 2;
  let sq = num * num;
  console.log(sq);
}

square(); // 4

// función sin parámetro
function addTwoNumbers() {
  let numOne = 10;
  let numTwo = 20;
  let sum = numOne + numTwo;

  console.log(sum);
}

addTwoNumbers(); // una función tiene que ser llamada por su nombre para ser ejecutada

function printFullName() {
  let firstName = "Asabeneh";
  let lastName = "Yetayeh";
  let space = " ";
  let fullName = firstName + space + lastName;
  console.log(fullName);
}

printFullName(); // llamando a una función

Función que retorna un valor

La función también puede devolver valores, si una función no devuelve valores, el valor de la función no está definido. Escribamos las funciones anteriores con return. A partir de ahora, retornaremos el valor a una función en lugar de imprimirlo.

function printFullName() {
  let firstName = "Asabeneh";
  let lastName = "Yetayeh";
  let space = " ";
  let fullName = firstName + space + lastName;
  return fullName;
}
console.log(printFullName());

function addTwoNumbers() {
  let numOne = 2;
  let numTwo = 3;
  let total = numOne + numTwo;
  return total;
}

console.log(addTwoNumbers());

Función con un parámetro

En una función podemos pasar diferentes tipos de datos(number, string, boolean, object, function) como un parámetro.

// función con un parámetro
function functionName(parm1) {
  //el código va aquí
}
functionName(parm1); // durante la llamada o la invocación es necesario un argumento

function areaOfCircle(r) {
  let area = Math.PI * r * r;
  return area;
}

console.log(areaOfCircle(10)); // debe ser llamado con un argumento

function square(number) {
  return number * number;
}

console.log(square(10));

Función con dos parámetros

// función con dos parámetros
function functionName(parm1, parm2) {
  //el código va aquí
}
functionName(parm1, parm2); // durante la llamada o invocación se necesitan dos argumentos
// la función sin parámetros no recibe entrada, así que hagamos una función con parámetros
function sumTwoNumbers(numOne, numTwo) {
  let sum = numOne + numTwo;
  console.log(sum);
}
sumTwoNumbers(10, 20); // llamando a la función
// si una función no es retorna esta no almacena datos, por lo que debe retornar

function sumTwoNumbers(numOne, numTwo) {
  let sum = numOne + numTwo;
  return sum;
}

console.log(sumTwoNumbers(10, 20));
function printFullName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}
console.log(printFullName("Asabeneh", "Yetayeh"));

Función con muchos parámetros

// función con múltiples parámetros
function functionName(parm1, parm2, parm3,...){
  //el código va aquí
}
functionName(parm1,parm2,parm3,...) // durante la llamada o la invocación necesita tres argumentos


// esta función toma un array como un parámetro y suma los números en el array
function sumArrayValues(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum = sum + arr[i];
  }
  return sum;
}
const numbers = [1, 2, 3, 4, 5];
    //llamada a la función
console.log(sumArrayValues(numbers));


    const areaOfCircle = (radius) => {
      let area = Math.PI * radius * radius;
      return area;
    }
console.log(areaOfCircle(10))

Función con número ilimitado de parámetros

A veces no sabemos cuántos argumentos va a pasar el usuario. Por lo tanto, debemos saber cómo escribir una función que pueda tomar un número ilimitado de argumentos. La forma en que lo hacemos tiene una diferencia significativa entre una función declarativa (función regular) y una función flecha. Veamos ejemplos tanto en la función declarativa como en la función flecha.

Número ilimitado de parámetros en una función regular

Una función declarativa proporciona una función con alcance de argumentos array como objeto. Se puede acceder a cualquier cosa que pasemos como argumento en la función desde el objeto de argumentos dentro de las funciones. Veamos un ejemplo

// Accedemos a los argumentos del objeto
​
function sumAllNums() {
 console.log(arguments)
}

sumAllNums(1, 2, 3, 4)
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// declaración
​
function sumAllNums() {
  let sum = 0
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i]
  }
  return sum
}

console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10))  // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40))  // 173

Número ilimitado de parámetros en una función flecha

La función flecha no tiene el objeto de alcance de los argumentos Para implementar una función que toma un número ilimitado de argumentos en una función de flecha, usamos el operador de propagación seguido de cualquier nombre de parámetro. Se puede acceder a cualquier elemento que hayamos pasado como argumento en la función como array en la función de flecha. Veamos un ejemplo

// Accedemos a los argumentos del objeto
​
const sumAllNums = (...args) => {
 // console.log(arguments), objeto de argumentos no encontrado en la función flecha
 // en su lugar, usamos un parámetro seguido de un operador de propagación (...)
 console.log(args)
}

sumAllNums(1, 2, 3, 4)
// [1, 2, 3, 4]

// declaración
​
const sumAllNums = (...args) => {
  let sum = 0
  for (const element of args) {
    sum += element
  }
  return sum
}

console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10))  // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40))  // 173

Función anónima

Función anónima o sin nombre

const anonymousFun = function () {
  console.log("Soy una función anónima y mi valor se almacena en anonymousFun");
};

Función de expresión

Las funciones de expresión son funciones anónimas. Después creamos una función sin nombre y la asignamos a una variable. Para retornar un valor de la función debemos llamar a la variable. Mira el ejemplo de abajo.

// Function expression
const square = function (n) {
  return n * n;
};

console.log(square(2)); // -> 4

Función de autoinvocación

Las funciones de autoinvocación son funciones anónimas que no necesitan ser llamadas para devolver un valor.

(function (n) {
  console.log(n * n);
})(2); // 4, pero en lugar de solo imprimir si queremos regresar y almacenar los datos, hacemos lo que se muestra a continuación

let squaredNum = (function (n) {
  return n * n;
})(10);

console.log(squaredNum);

Función flecha

La función flecha es una alternativa para escribir una función, sin embargo, la función declarativa y la función flecha tienen algunas diferencias menores.

La función flecha usa una flecha en lugar de la palabra clave function para declarar una función. Veamos tanto la función declarativa como la función flecha.

// Así es como escribimos una función normal o declarativa
// Cambiemos esta función de declarativa a una función flecha
function square(n) {
  return n * n;
}

console.log(square(2)); // 4

const square = (n) => {
  return n * n;
};

console.log(square(2)); // -> 4

// si tenemos solo una línea en el bloque de código, se puede escribir de la siguiente manera, return explícito
const square = (n) => n * n; // -> 4

const changeToUpperCase = (arr) => {
  const newArr = [];
  for (const element of arr) {
    newArr.push(element.toUpperCase());
  }
  return newArr;
};

const countries = ["Finland", "Sweden", "Norway", "Denmark", "Iceland"];
console.log(changeToUpperCase(countries));

// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]

const printFullName = (firstName, lastName) => {
  return `${firstName} ${lastName}`;
};

console.log(printFullName("Asabeneh", "Yetayeh"));

La función anterior solo tiene la declaración de return, por lo tanto, podemos retornar explícitamente de la siguiente manera.

const printFullName = (firstName, lastName) => `${firstName} ${lastName}`;

console.log(printFullName("Asabeneh", "Yetayeh"));

Función con parámetros por defecto

A veces, pasamos valores predeterminados a los parámetros, cuando invocamos la función, si no pasamos un argumento, se usará el valor predeterminado. Tanto la función declarativa como la función flecha pueden tener un valor o valores predeterminados.

// sintaxis
// Declarando una función
function functionName(param = value) {
  //código
}

// Llamando una función
functionName();
functionName(arg);

Example:

function greetings(name = "Peter") {
  let message = `${name}, welcome to 30 Days Of JavaScript!`;
  return message;
}

console.log(greetings());
console.log(greetings("Asabeneh"));

function generateFullName(firstName = "Asabeneh", lastName = "Yetayeh") {
  let space = " ";
  let fullName = firstName + space + lastName;
  return fullName;
}

console.log(generateFullName());
console.log(generateFullName("David", "Smith"));

function calculateAge(birthYear, currentYear = 2019) {
  let age = currentYear - birthYear;
  return age;
}

console.log("Age: ", calculateAge(1819));

function weightOfObject(mass, gravity = 9.81) {
  let weight = mass * gravity + " N"; // el valor tiene que ser cambiado a string primero
  return weight;
}

console.log("Weight of an object in Newton: ", weightOfObject(100)); // 9.81 es la gravedad en la superficie de la tierra
console.log("Weight of an object in Newton: ", weightOfObject(100, 1.62)); // gravedad en la superficie de la luna

Veamos cómo escribimos las funciones anteriores con funciones flecha.

// sintaxis
// declarando una función
const functionName = (param = value) => {
  //código
};

// Llamando a la  función
functionName();
functionName(arg);

Example:

const greetings = (name = "Peter") => {
  let message = name + ", welcome to 30 Days Of JavaScript!";
  return message;
};

console.log(greetings());
console.log(greetings("Asabeneh"));

const generateFullName = (firstName = "Asabeneh", lastName = "Yetayeh") => {
  let space = " ";
  let fullName = firstName + space + lastName;
  return fullName;
};

console.log(generateFullName());
console.log(generateFullName("David", "Smith"));

const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear;
console.log("Age: ", calculateAge(1819));

const weightOfObject = (mass, gravity = 9.81) => mass * gravity + " N";

console.log("Weight of an object in Newton: ", weightOfObject(100)); // 9.81 es la gravedad en la superficie de la tierra
console.log("Weight of an object in Newton: ", weightOfObject(100, 1.62)); // gravedad en la superficie de la luna

Función declarativa versus función flecha

Será cubierto en otra sección.

🌕 Tienes una energía ilimitada. Acabas de completar los desafíos del día 7 y llevas siete pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos.

💻 Ejercicios

Ejercicios: Nivel 1

1. Declare una función fullName e imprima su nombre completo.

2. Declare una función fullName y ahora toma firstName, lastName como parámetro y retorna su nombre completo.

3. Declare una función addNumbers que toma dos parámetros y retorna la suma de ambos.

4. El área de un rectángulo se calcula de la siguiente manera: area = length x width. Escribe una función areaOfRectangle que calcule el área de un rectángulo.

5. El perímetro de un rectángulo se calcula de la siguiente manera: perimeter= 2x(length + width). Escribe una función perimeterOfRectangle que calcule el perímetro de un rectángulo.

6. El volumen de un prisma rectangular se calcula de la siguiente manera: volume = length x width x height. Escribe una función volumeOfRectPrism que calcule el volumen de un prisma.

7. El área de un círculo se calcula de la siguiente manera: area = π x r x r. Escribe una función areaOfCircle que calcule el área de un círculo.

8. La circunferencia de un círculo se calcula de la siguiente manera: circumference = 2πr. Escribe una función circumOfCircle que calcule la circunferencia de un círculo.

9. La densidad de una sustancia se calcula de la siguiente manera:density= mass/volume. Escribe una función density que calcule la densidad de una sustancia.

10. La velocidad se calcula dividiendo el total de la distancia recorrida por un objeto en movimiento entre el tiempo total. Escribe una función que calcule la velocidad de un objeto en movimiento, speed.

11. El peso de una sustancia se calcula de la siguiente manera: weight = mass x gravity. Escribe una función weight que calcule el peso de una sustancia.

12. La temperatura en °C se puede convertir a °F usando esta fórmula: °F = (°C x 9/5) + 32. Escribe una función convertCelsiusToFahrenheit que convierta °C a °F.

13. El índice de masa corporal (IMC) se calcula de la siguiente manera: imc = peso en Kg / (altura x altura) en m2. Escribe una función que calcule imc. El IMC se utiliza para definir de forma amplia diferentes grupos de peso en adultos de 20 años o más. Compruebe si una persona tiene un peso bajo, peso normal, con sobrepeso u obeso según la información que se proporciona a continuación.

    • Se aplican los mismos parámetros de grupos tanto a hombres como a mujeres.
    • Peso bajo: IMC inferior a 18,5
    • Peso normal: IMC de 18,5 a 24,9
    • Sobrepeso: IMC de 25 a 29,9
    • Obeso: IMC es 30 o más

14. Escribe una función llamada checkSeason, toma un parámetro de mes y retorna la estación: Otoño, Invierno, Primavera o Verano.

15. Math.max retorna su argumento más grande. Escriba una función findMax que tome tres argumentos y devuelva su máximo sin usar el método Math.max.

    console.log(findMax(0, 10, 5));
    10;
    console.log(findMax(0, -10, -2));
    0;

Ejercicios: Nivel 2

1. La ecuación lineal se calcula de la siguiente manera: ax + by + c = 0. Escribe una función que calcule el valor de una ecuación lineal, solveLinEquation.

2. La ecuación cuadrática se calcula de la siguiente manera: ax2 + bx + c = 0. Escribe una función que calcule el valor o los valores de una ecuación cuadrática, solveQuadEquation.

   console.log(solveQuadratic()); // {0}
   console.log(solveQuadratic(1, 4, 4)); // {-2}
   console.log(solveQuadratic(1, -1, -2)); // {2, -1}
   console.log(solveQuadratic(1, 7, 12)); // {-3, -4}
   console.log(solveQuadratic(1, 0, -4)); //{2, -2}
   console.log(solveQuadratic(1, -1, 0)); //{1, 0}

3. Declare una función llamada printArray. Toma un array como parámetro e imprime cada valor del array.

4. Declare una función llamada showDateTime que muestre la hora en este formato: 01/08/2020 04:08 usando el objeto Date.

   showDateTime()
   08/01/2020 04:08

5. Declare una función llamada swapValues. Esta función intercambia el valor de x a y.

   swapValues(3, 4); // x => 4, y=>3
   swapValues(4, 5); // x = 5, y = 4

6. Declare una función llamada reverseArray. Toma un array como parámetro y retorna el array invertido (no use el método reverse()).

   console.log(reverseArray([1, 2, 3, 4, 5]));
   //[5, 4, 3, 2, 1]
   console.log(reverseArray(["A", "B", "C"]));
   //['C', 'B', 'A']

7. Declare una función llamada capitalizeArray. Toma un array como parámetro y retorna el array - capitalizedarray.

8. Declare una función llamada addItem. Toma un elemento de paŕametro y retorna un array después de agregar el un elemento.

9. Declare una función llamada removeItem. Toma como parámetro un index y retorna un array después de eleminar el elemento con ese index.

10. Declare una función llamada sumOfNumbers. Toma un número como parámetro y suma todos los números en ese rango.

11. Declare una función llamada sumOfOdds. Toma un parámetro numérico y suma todos los números impares en ese rango.

12. Declare una función llamada sumOfEven. Toma un parámetro numérico y suma todos los números pares en ese rango.

13. Declare una función llamada evensAndOdds . Toma un entero positivo como parámetro y cuenta el número de pares e impares.

    evensAndOdds(100);
    El número de impares son 50.
    El número de pares es 51.

14. Escriba una función que tome cualquier número de argumentos y retorne la suma de los argumentos

    sum(1, 2, 3); // -> 6
    sum(1, 2, 3, 4); // -> 10

15. Escriba una función randomUserIp que genere una ip de usuario aleatoria.

16. Escriba una función randomMacAddress que genere una dirección mac aleatoria.

17. Declare una función llamada randomHexaNumberGenerator. Cuando se llama a esta función, genera un número hexadecimal aleatorio. La función retorna el número hexadecimal.

    console.log(randomHexaNumberGenerator());
    '#ee33df'

18. Declare una función llamada userIdGenerator. Cuando se llama a esta función, genera un id de siete caracteres. La función devuelve el id.

    console.log(userIdGenerator());
    41XTDbE

Ejercicios: Nivel 3

1. Modifique la función userIdGenerator. Declare una función de nombre userIdGeneratedByUser. No toma ningún parámetro pero toma dos entradas usando prompt(). Una de las entradas es la cantidad de caracteres y la segunda entrada es la cantidad de ID que se supone que se generarán.

   userIdGeneratedByUser()
   'kcsy2
   SMFYb
   bWmeq
   ZXOYh
   2Rgxf
   '
   userIdGeneratedByUser()
   '1GCSgPLMaBAVQZ26
   YD7eFwNQKNs7qXaT
   ycArC5yrRupyG00S
   UbGxOFI7UXSWAyKN
   dIV0SSUTgAdKwStr
   '

2. Escriba una función llamada rgbColorGenerator que genera colores rgb

   rgbColorGenerator()
   rgb(125,244,255)

3. Escriba una función arrayOfHexaColors que retorna cualquier cantidad de colores hexadecimales en un array.

4. Escriba una función arrayOfRgbColors que retorna cualquier cantidad de colores RGB en un array.

5. Escriba una función convertHexaToRgb que convierta el color hexa a rgb y retorna un color rgb.

6. Escriba una función convertRgbToHexa que convierta rgb a color hexa y retorna un color hexa.

7. Escriba una función generateColors que pueda generar cualquier número de colores hexa o rgb.

   console.log(generateColors("hexa", 3)); // ['#a3e12f', '#03ed55', '#eb3d2b']
   console.log(generateColors("hexa", 1)); // '#b334ef'
   console.log(generateColors("rgb", 3)); // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)']
   console.log(generateColors("rgb", 1)); // 'rgb(33,79, 176)'

8. Llame a su función shuffleArray, toma un array como parámetro y devuelve un array mezclada

9. Llame a su función factorial, toma un número entero como parámetro y devuelve un factorial del número.

10. Llame a su función isEmpty, toma un parámetro y verifica si está vacío o no.

11. Llame a su función sum, toma cualquier cantidad de argumentos y devuelve la suma.

12. Escriba una función llamada sumOfArrayItems, toma un array como parámetro y retorna la suma de todos los elementos. Compruebe si todos los elementos de la matriz son tipos de números. Si no, dé una respuesta razonable.

13. Escribe una función llamada average, toma un array como parámetro y retorna el promedio de los elementos. Compruebe si todos los elementos de la matriz son tipos de números. Si no, dé una respuesta adecuada.

14. Escriba una función llamada modifyArray que tome un array como parámetro y modifique el quinto elemento del array y retorna el array. Si la longitud del array es inferior a cinco, retorna 'elemento no encontrado'.

    console.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']);

    ['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot']

    console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft',  'IBM']);

    ['Google', 'Facebook','Apple', 'Amazon','MICROSOFT',  'IBM']

    console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']);

      'Not Found'

15. Escribe una función llamada isPrime, que verifica si un número es un número primo.

16. Escriba una función que verifique si todos los elementos son únicos en un array.

17. Escriba una función que verifique si todos los elementos de un array son del mismo tipo de datos.

18. El nombre de las variables de JavaScript no admite caracteres o símbolos especiales, excepto $ o _. Escriba una función isValidVariable que verifique si una variable es válida o inválida.

19. Escriba una función que devuelva un array de siete números aleatorios en un rango de 0-9. Todos los números deben ser únicos.

    sevenRandomNumbers()[(1, 4, 5, 7, 9, 8, 0)];

20. Escriba una función llamada reverseCountries, toma el array de países y primero copia el array y retorna el array original invertido 🎉 ¡FELICITACIONES! 🎉

<< Día 6 | Día 8 >>