MEJOR SITIO PARA DESARROLLADORES WEB

JS Tutorial

JS HOGAR JS Introducción JS A donde JS Producción JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS Let JS Const JS Operadores JS Aritmética JS Asignación JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadenas JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matrices JS Iteración de matriz JS Array Const JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Math JS aleatorio JS Booleanos JS Comparaciones JS If Else JS Switch JS Bucle For JS Bucle For In JS Bucle For Of JS Bucle While JS Break JS Iterables JS Conjuntos JS Maps JS Tipo de JS Conversión de tipo JS Bitwise JS RegExp JS Errores JS Alcance JS Hoisting JS Modo estricto JS this palabra clave JS Función de flecha JS Clases JS Módulos JS JSON JS Depuración JS Guía de estilo JS Mejores prácticas JS Errores JS Rendimiento JS Palabras reservadas

JS Versiones

JS Versiones JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021/2022 JS IE / Edge JS Historia

JS Objetos

Objeto Definiciones Objeto Propiedades Objeto Métodos Objeto Display Objeto Accesorios Objeto Constructores Objeto Prototipos Objeto Iterables Objeto Conjuntos Objeto Mapas Objeto Referencia

JS Funciones

Función Definiciones Función Parámetros Función Invocación Función Llamar Función Aplicar Función Unir Función Cierres

JS Clases

Clase Introducción Clase Herencia Clase Estático

JS Asíncrono

JS Devoluciones de llamada JS Asincrónico JS Promesas JS Async/Await

JS HTML DOM

DOM Introducción DOM Métodos DOM Documento DOM Elementos DOM HTML DOM Formularios DOM CSS DOM Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos

JS Navegador BOM

JS Ventana JS Pantalla JS Ubicación JS Historia JS Navegador JS Alerta emergente JS Momento JS Cookies

JS Web APIs

Web API Introducción API de formularios web API de historial web API de almacenamiento web API de trabajador web API de recuperación web API de geolocalización web

JS AJAX

AJAX Introducción AJAX XMLHttp AJAX Pedido AJAX Respuesta AJAX XML Archivo AJAX PHP AJAX ASP AJAX Base de datos AJAX Aplicaciones AJAX Ejemplos

JS JSON

JSON Introducción JSON Sintaxis JSON vs XML JSON Tipos de datos JSON Analizar JSON Stringificar JSON Objetos JSON Matrices JSON Servidor JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery Selectores jQuery HTML jQuery CSS jQuery DOM

JS Gráficos

JS Gráficos JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

JS Ejemplos

JS Ejemplos JS HTML DOM JS HTML Input JS HTML Objetos JS HTML Eventos JS Navegador JS Editor JS Ejercicios JS Prueba JS Bootcamp JS Certificado

JS Referencias

JavaScript Objetos HTML DOM Objetos

JavaScript. W3Schools en español. Lecciones para principiantes

Ua En De Fr

JavaScript Funciones


Una función de JavaScript es un bloque de código diseñado para realizar una tarea en particular.

Una función de JavaScript se ejecuta cuando "algo" la invoca (la llama).


Ejemplo

function myFunction(p1, p2) {
  return p1 * p2;  // La función devuelve el producto de p1 y p2
}
Try it Yourself »

Sintaxis de la función JavaScript

Una función JavaScript se define con la palabra clave function, seguida de un nombre, seguido de paréntesis ().

Los nombres de funciones pueden contener letras, dígitos, guiones bajos y signos de dólar (las mismas reglas que las variables).

Los paréntesis pueden incluir nombres de parámetros separados por comas:
(parámetro1, parámetro2, ...)

El código que ejecutará la función se coloca entre llaves: {}

function nombre(parámetro1, parámetro2, parámetro3) {
  // código a ejecutar
}

Los parámetros de la función se enumeran dentro de los paréntesis () en la definición de la función.

Los argumentos de la función son los valores que recibe la función cuando se la invoca.

Dentro de la función, los argumentos (los parámetros) se comportan como variables locales.

Una función es muy similar a un procedimiento o una subrutina en otros lenguajes de programación.


Invocación de función

El código dentro de la función se ejecutará cuando "algo" invoque (llame) a la función:

  • Cuando se produce un evento (cuando un usuario hace clic en un botón)
  • Cuando se invoca (llama) desde el código JavaScript
  • Automáticamente (autoinvocada)

Aprenderá mucho más sobre la invocación de funciones más adelante en este tutorial.


Retorno de función

Cuando JavaScript alcanza una declaración return, la función dejará de ejecutarse.

Si la función se invocó desde una declaración, JavaScript "regresará" para ejecutar el código después de la declaración que la invocó.

Las funciones a menudo calculan un valor de retorno. El valor de retorno se "devuelve" al "invocador":

Ejemplo

Calcular el producto de dos números y devolver el resultado:

let x = myFunction(4, 3);   // Se llama a la función y el valor de retorno terminará en x

function myFunction(a, b) {
  return a * b;            // La función devuelve el producto de a y b
}

El resultado en x será:

12
Try it Yourself »

¿Por qué usar funciones?

Puede reutilizar el código: defina el código una vez y úselo muchas veces.

Puede usar el mismo código muchas veces con diferentes argumentos para producir resultados diferentes.

Ejemplo

Convertir Fahrenheit a Celsius:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
Try it Yourself »

El operador () invoca la función

Usando el ejemplo anterior, toCelsius hace referencia al objeto de la función, y toCelsius() hace referencia al resultado de la función.

Si se accede a una función sin () se devolverá el objeto de la función en lugar del resultado de la función.

Ejemplo

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
Try it Yourself »

Funciones utilizadas como valores de variables

Las funciones se pueden utilizar de la misma forma que las variables, en todo tipo de fórmulas, asignaciones y cálculos.

Ejemplo

En lugar de utilizar una variable para almacenar el valor de retorno de una función:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Puedes utilizar la función directamente, como valor variable:

let text = "The temperature is " + toCelsius(77) + " Celsius";
Try it Yourself »

Aprenderá mucho más sobre las funciones más adelante en este tutorial.


Variables locales

Las variables declaradas dentro de una función de JavaScript se vuelven LOCALES para la función.

Solo se puede acceder a las variables locales desde dentro de la función.

Ejemplo

// El código aquí NO se puede usar carName

function myFunction() {
  let carName = "Volvo";
  // El código aquí PUEDE usarse carName
}

// El código aquí NO se puede usar carName
Try it Yourself »

Dado que las variables locales solo se reconocen dentro de sus funciones, las variables con el mismo nombre se pueden usar en diferentes funciones.

Las variables locales se crean cuando se inicia una función y se eliminan cuando se completa.


Ponte a prueba con ejercicios

Ejercicio:

Ejecuta la función denominada myFunction.

function myFunction() {
  alert("Hello World!");
}
;