Funciones en JavaScript

¿Qué es una función en JavaScript?

Una función en JavaScript es un bloque de código reutilizable que se puede invocar (llamar) en cualquier momento y en cualquier lugar en un script.

Las funciones tienen un nombre, un conjunto de parámetros de entrada y un bloque de código que se ejecuta cuando se llama a la función. Las funciones pueden devolver un valor o no devolver nada, dependiendo del uso específico.

Las funciones son una parte importante de la programación orientada a objetos y permiten encapsular código repetitivo en una sola unidad, lo que hace que sea más fácil de mantener y comprender.

Aquí hay un ejemplo de una función en JavaScript:


function saludar(nombre) {
  console.log("Hola, " + nombre + "!");
}

saludar("Juan"); // Imprime "Hola, Juan!"

Lenguaje del código: JavaScript (javascript)

En este ejemplo, la función saludar() toma un parámetro nombre y lo usa para imprimir un mensaje de bienvenida. La función se invoca en la última línea, pasando el valor “Juan” como argumento.

Crear una función en JavaScript

Las funciones en JavaScript se crean utilizando la palabra clave function, seguida del nombre de la función y una lista de parámetros entre paréntesis. Los parámetros son valores que se pasan a la función y se pueden utilizar dentro de la función.

Luego, se encuentra el cuerpo de la función, que es un bloque de código que se ejecutará cuando se invoque la función. El cuerpo de la función está delimitado por llaves {}.

El siguiente ejemplo muestra cómo crear una función en JavaScript que toma dos números como parámetros y devuelve su suma:


// Crea la función "sumar" que toma dos parámetros "a" y "b"
function sumar(a, b) {
  // Devuelve la suma de "a" y "b"
  return a + b;
}

// Invoca la función "sumar" y almacena el resultado en la variable "resultado"
var resultado = sumar(3, 5);

// Imprime el resultado en la consola
console.log(resultado); // Imprime "8"

Lenguaje del código: JavaScript (javascript)

En este ejemplo, se define la función sumar con dos parámetros a y b. La función devuelve la suma de a y b utilizando el operador +.

Luego, la función se invoca en la variable resultado y el resultado se almacena en la variable resultado. Finalmente, se imprime el resultado en la consola.

Formas de crear una función

Además de la sintaxis básica para crear una función en JavaScript, hay tres formas de crear funciones en JavaScript: funciones anónimas, funciones de flecha y funciones constructoras.

  1. Funciones Anónimas: Son funciones sin nombre y se utilizan a menudo como argumentos para otras funciones o como valores de retorno. Estas funciones se definen usando la siguiente sintaxis:

// Función anónima almacenada en una variable
let sumar = function(a, b) {
  return a + b;
};

// Invocación de la función anónima a través de su variable
let resultado = sumar(3, 5);
console.log(resultado); // Imprime "8"

Lenguaje del código: JavaScript (javascript)
  1. Funciones de Flecha: Son una forma más concisa de escribir funciones anónimas en JavaScript. Estas funciones se definen usando la siguiente sintaxis:

// Función de flecha almacenada en una variable
let sumar = (a, b) => a + b;

// Invocación de la función de flecha a través de su variable
var resultado = sumar(3, 5);
console.log(resultado); // Imprime "8"

Lenguaje del código: JavaScript (javascript)
  1. Funciones Constructoras: Son funciones que se utilizan para crear objetos personalizados. Se definen usando la siguiente sintaxis:

// Define la función constructora "Persona"
function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

// Crea un objeto "persona" utilizando la función constructora "Persona"
let persona = new Persona("Juan", 30);

// Imprime el objeto "persona" en la consola
console.log(persona); // Imprime "{ nombre: "Juan", edad: 30 }"

Lenguaje del código: JavaScript (javascript)

En este ejemplo, se define la función constructora Persona con dos parámetros nombre y edad. La función asigna estos valores a las propiedades nombre y edad del objeto this.

Luego, se crea un objeto persona utilizando la función constructora Persona y el operador new. Finalmente, se imprime el objeto persona en la consola.

Cómo llamar una función en JavaScript

En JavaScript, se puede llamar una función de varias maneras. Aquí hay dos formas comunes de hacerlo:

  1. Invocación de Función: Es la forma más común de llamar una función. Se utiliza la siguiente sintaxis:

// Define la función "sumar"
function sumar(a, b) {
  return a + b;
}

// Llama la función "sumar" y almacena el resultado en una variable
let resultado = sumar(3, 5);

// Imprime el resultado de la invocación de la función
console.log(resultado); // Imprime "8"

Lenguaje del código: JavaScript (javascript)

En este ejemplo, se define la función sumar con dos parámetros a y b. Luego, se llama la función sumar con los argumentos 3 y 5, y se almacena el resultado de la invocación de la función en una variable llamada resultado.

Finalmente, se imprime el valor de la variable resultado en la consola.

  1. Invocación de Método: Es una forma de llamar una función que se asigna como un método de un objeto. Se utiliza la siguiente sintaxis:

// Define un objeto "matematicas" con un método "sumar"
let matematicas = {
  sumar: function(a, b) {
    return a + b;
  }
};

// Llama el método "sumar" del objeto "matematicas" y almacena el resultado en una variable
let resultado = matematicas.sumar(3, 5);

// Imprime el resultado de la invocación del método
console.log(resultado); // Imprime "8"

Lenguaje del código: JavaScript (javascript)

En este ejemplo, se define un objeto matematicas con un método sumar que tiene dos parámetros a y b. Luego, se llama el método sumar del objeto matematicas con los argumentos 3 y 5, y se almacena el resultado de la invocación del método en una variable llamada resultado.

Finalmente, se imprime el valor de la variable resultado en la consola.

Ámbito de las funciones en JavaScript

El ámbito de una función en JavaScript es el contexto en el que se define una variable y en el que está disponible. Hay dos tipos de ámbitos en JavaScript: el ámbito global y el ámbito de función.

  1. Ámbito Global: Es el contexto en el que se definen todas las variables y funciones en un script. Todas las variables y funciones definidas en el ámbito global están disponibles en todo el script.

// Define una variable en el ámbito global
var nombre = "Juan";

// Define una función en el ámbito global
function saludar() {
  console.log("Hola, " + nombre);
}

// Llama la función "saludar"
saludar(); // Imprime "Hola, Juan"

Lenguaje del código: JavaScript (javascript)

En este ejemplo, se define una variable nombre en el ámbito global, y luego se define una función saludar en el ámbito global que accede a la variable nombre y la utiliza para imprimir un mensaje en la consola.

  1. Ámbito de Función: Es el contexto en el que se definen las variables y funciones dentro de una función. Las variables y funciones definidas en el ámbito de función solo están disponibles dentro de esa función.

// Define una variable en el ámbito global
var nombre = "Juan";

// Define una función en el ámbito global
function saludar() {
  // Define una variable en el ámbito de función
  var apellido = "Pérez";

  console.log("Hola, " + nombre + " " + apellido);
}

// Llama la función "saludar"
saludar(); // Imprime "Hola, Juan Pérez"

// Intenta acceder a la variable "apellido" fuera de la función "saludar"
console.log(apellido); // Imprime "ReferenceError: apellido is not defined"

Lenguaje del código: JavaScript (javascript)

En este ejemplo, se define una variable nombre en el ámbito global, y luego se define una función saludar en el ámbito global que define una variable apellido en el ámbito de función.

La función saludar accede tanto a la variable nombre en el ámbito global como a la variable apellido en el ámbito de función y las utiliza para imprimir un mensaje en la consola.

Si se intenta acceder a la variable apellido fuera de la función saludar, se produce un error “ReferenceError: apellido is not defined”.

Curso de HTML Desde Cero

Inscríbete Ahora