Funciones - SuperHispano

Funciones en JavaScript

                                   

Tabla de contenidos

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

2. 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)

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

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

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

Objetos en JavaScript

                                   

Los objetos en JavaScript son estructuras de datos fundamentales que te permiten organizar y agrupar información relacionada. Son como cajas que contienen diferentes propiedades (como nombre, color, tamaño) y métodos (como acciones que se pueden realizar). Dominar los objetos es clave para escribir código JavaScript más eficiente, flexible y escalable.

Tabla de contenidos

¿Qué es un objeto en JavaScript?

Un objeto es una colección de pares clave-valor. Las claves son como etiquetas que identifican a cada valor. Los valores pueden ser cualquier tipo de dato en JavaScript, como números, cadenas, booleanos, arreglos e incluso otros objetos.

						const persona = {
						  nombre: "Ana",
						  edad: 25,
						  ciudad: "Lima",
						  hablar: function() {
						    console.log("Hola, mi nombre es Ana!");
						  }
						};
						
						Lenguaje del código: JavaScript (javascript)

En este ejemplo, «persona» es un objeto con cuatro propiedades: «nombre», «edad», «ciudad» y «hablar». «hablar» es un método que define una acción que el objeto puede realizar.

¿Cómo crear objetos?

Existen dos formas principales de crear objetos:

1. Notación literal:

						const persona = {
						  nombre: "Ana",
						  edad: 25,
						  ciudad: "Lima",
						  hablar: function() {
						    console.log("Hola, mi nombre es Ana!");
						  }
						};
						
						Lenguaje del código: JavaScript (javascript)

2. Constructor Object:

						const persona = new Object();
						persona.nombre = "Ana";
						persona.edad = 25;
						persona.ciudad = "Lima";
						persona.hablar = function() {
						  console.log("Hola, mi nombre es Ana!");
						};
						
						Lenguaje del código: JavaScript (javascript)

¿Cómo acceder a las propiedades y métodos de un objeto?

1. Notación de punto:

						const nombre = persona.nombre; // "Ana"
						persona.hablar(); // "Hola, mi nombre es Ana!"
						
						Lenguaje del código: JavaScript (javascript)

2. Notación de corchetes:

						const nombre = persona["nombre"]; // "Ana"
						persona["hablar"](); // "Hola, mi nombre es Ana!"
						
						Lenguaje del código: JavaScript (javascript)

Métodos útiles para trabajar con objetos:

• Object.keys(objeto): Obtiene un array con las claves del objeto.
• Object.values(objeto): Obtiene un array con los valores del objeto.
• Object.entries(objeto): Obtiene un array con pares clave-valor del objeto.
• Object.assign(objetoDestino, objetoOrigen): Copia las propiedades del objetoOrigen al objetoDestino.

						const libro = {
						  titulo: "Cien años de soledad",
						  autor: "Gabriel García Márquez",
						  año: 1967,
						  resumen: "Una novela que narra la historia de la familia Buendía a través de siete generaciones en el Macondo ficticio.",
						  leer: function() {
						    console.log("Estoy leyendo Cien años de soledad");
						  }
						};
						
						Lenguaje del código: JavaScript (javascript)

						const carrito = {
						  productos: [],
						  total: 0,
						  agregarProducto(producto) {
						    this.productos.push(producto);
						    this.total += producto.precio;
						  },
						  quitarProducto(producto) {
						    const indice = this.productos.indexOf(producto);
						    if (indice !== -1) {
						      this.productos.splice(indice, 1);
						      this.total -= producto.precio;
						    }
						  },
						  vaciarCarrito() {
						    this.productos = [];
						    this.total = 0;
						  }
						};
						
						Lenguaje del código: JavaScript (javascript)

Conclusión:

Los objetos son una herramienta fundamental en JavaScript. Dominar su uso te permite escribir código más organizado, eficiente y reutilizable. Dedica tiempo a practicar con los ejemplos y explorar las posibilidades que ofrecen los objetos para llevar tu desarrollo web al siguiente nivel.