JavaScript – Funciones

Que encontrarás aquí?

Aquí encontraras mis apuntes sobre como funcionan las funciones en JavaScript, además, links a documentación oficial.

• Crear funciones
  • Function expression
  • Function Declaration
  • Diferencias entre Function expression y Function Declaration
• Diferencias entre una función y un método
• Parámetros y argumentos en Funciones
• Parámetros por default
• Return – retornar un valor
• Métodos de propiedad – Funciones en un objeto
• Arrow Functions
  • Pasar parámetros

Crear funciones

JavaScript a día de hoy cuenta con mas de 1000 funciones nativas, podemos observarlas todas ejecutando en una consola de nuestro explorador web preferido la siguiente lineal de código: window.

Existen 2 formas de crear una función en JavaScript:

Function expression

Nosotros podemos expresar una nueva función:

const sumar = function() {
    console.log(3+3);

}

Function Declaration

Podemos declarar una nueva función:

function sumar () {
 console.log("Hola Mundo");
}

Diferencias entre Function expression y Function Declaration

A partir de 2015 en ECMAScript se aplica la propiedad en JavaScript de Hoisting, esta propiedad nos permite llamar una función mucho antes de crearla.

JavaScript Hoisting se refiere al proceso mediante el cual el intérprete parece mover la declaración de funciones, variables o clases a la parte superior de su alcance, antes de la ejecución del código.

developer.mozilla

Diferencias entre una función y un método

En la practica una función y un método son prácticamente idénticos. Por lo que importa es en el contexto que son utilizados.

const numero = 20
const numero2 = "20"

console.log(parseInt(numero2)) // Esto es una función
console.log(numero.toString()) // esto es un método

Parámetros y argumentos en Funciones

Los parámetros son los valores que se le dan a la entrada de la función y los argumentos son los valores reales que se pasaran como valores dentro de una función.

function sumar(a,b) { // a & b son parámetros que se le pueden pasar a la función
   console.log(a + b);
}

sumar(2,3);    // 2 & 3 son los argumentos que procesara nuestra funcion
sumar(50,50);

function saludar (nombre, apellido) {
   console.log(`Hola ${nombre} ${apellido}`);
}

saludar("juan","Sanchez");

Parámetros por default

En caso de que llamemos a una función y esta no tenga todos sus argumentos, esta transcribirá la falta de argumentos en un valor para el parámetro como undefined.

Algunas veces nos encontraremos en que no tenemos todos los argumentos para los parámetros de entrada. En JavaScript podemos poner algunos parámetros por default.

function saludar (nombre, apellido = "Desconocido") {
   console.log(`Hola ${nombre}, tu apellido es: ${apellido}`);
}

saludar("Eric");

Return – retornar un valor

En muchos casos necesitaremos que nuestras funciones nos devuelvan un valor y que este se pueda asignar a una variable. Para ello tenemos la función return, que nos permitirá devolver un resultado.

function sumar (a,b){
   return a + b;
}
const resultado = sumar(95,5)
console.log(resultado);

// En este ejercicio vamos a hacer que la función sume al total del valor de un carrito de compras. Seguidamente calcularemos un IVA del 21%

let total = 0;
let impuesto = 0;
function agregarCarrito(precio){
  return total += precio;
}

function calcularImpuesto(total){
   return total *1.21;
}



// simulamos dos compras y comprobamos que se acumula el valor en total.
total = agregarCarrito(300);
console.log(total);
total = agregarCarrito(200);
console.log(total);

// Aplicamos el IVA
const totalPagar = calcularImpuesto(total);
console.log(`El total a pagar es de ${totalPagar}`);

Métodos de propiedad – Funciones en un objeto

En la entrada JavaScript-objetos Ya hablamos de como funcionan los métodos en un objeto.
la creación de métodos es una forma de tener varias funciones usadas con un mismo interés agrupadas y ordenadas en forma de objetos

/*
// EJEMPLO de como se podrian organizar distintas funciones
// para un mismo ente como seria un reproductor.
*/

const reproductor = {
   reproducir: function(id){
      console.log (`Reproduciendo cancion con el id ${id}`);   },
   pausar: function() {
      console.log('Pausando');
   },   borrar: function(id) {      console.log(`Borrando cancion... ${id}`);   },   adderir: function(id) {
      console.log(` ${id} anadida a la lista de reproduccion`);   }}


reproductor.reproducir("Iron Maiden");
reproductor.reproducir("ACDC");
reproductor.pausar();reproductor.borrar("Queen");
reproductor.adderir("Skalariak");

Arrow Functions

Estas funciones son nuevas y llegaron a partir de ECMAScript 6. Actualmente la mayoría de librerías ya funcionan con Arrow Functions y fueron agregadas como una gran revolución, dando una sintaxis mas corta a las funciones tradicionales.

Una expresión de función flecha es una alternativa compacta a una expresión de función tradicional, pero es limitada y no se puede utilizar en todas las situaciones.

developer.mozilla

// Ejemplo funcion tradicional
const aprendiendo = function() {
   console.log('Aprendiendo JavaScript');
}
aprendiendo();



// Arrow function
const aprendiendo2 = () => 'Aprendiendo Arrows functions simples';

console.log(aprendiendo2());

Pasar parámetros

Podemos pasar parámetros a nuestras funciones arrow y estas dependiendo de la cantidad de argumentos podrá ser mas simplificada:

// Ejemplo función tradicional
const aprendiendo = function(tecnologia) {
   console.log(`Aprendiendo ${tecnologia}`);
}
aprendiendo('JavaScript');


// Ejemplos Función Arrow y sus abreviaciones
const aprendiendo2 = (tecnologia) => `Aprenent ${tecnologia}`;
const aprendiendo3 = tecnologia => `Aprenent ${tecnologia}`;
const aprendiendo4 = (tecnologia, tecnologia2)  => `Aprenent ${tecnologia} ${tecnologia2}`;

console.log(aprendiendo2('python'));
console.log(aprendiendo3('Javascript'));
console.log(aprendiendo4('Javascript','C++'));

Puede interesarte:

HTML
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web.

CSS
CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML.

Javascript
JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web.

Quieres saber mas?