Diferencias entre Funciones y Métodos en JavaScript

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:01

Diferencias entre Funciones y Métodos en JavaScript

Curso de Fundamentos de JavaScript

Clase 21 de 55

Clase 21 / 55

Recursos

¿Cuáles son las diferencias entre funciones y métodos en JavaScript?

JavaScript, un lenguaje de programación esencialmente basado en objetos, ofrece una versatilidad impresionante cuando se trata de trabajar tanto con funciones como con métodos. La diferencia principal entre una función y un método radica en su singularidad y uso dentro del código. En este contenido te explicaremos las diferencias y similitudes entre ambos, mostrando cómo aprovechar estas funcionalidades al máximo en tu programa.

¿Cómo funcionan las funciones en JavaScript?

Las funciones en JavaScript son bloques de código diseñados para realizar una tarea específica. Cuando escribimos una función, la creamos y llamamos, y el intérprete de JavaScript las identifica como elementos del tipo "function". Pero, ¿sabías que las funciones en realidad son objetos? Esto significa que tienen propiedades y métodos.

Pasar funciones como argumentos: Este es un concepto conocido como "callback". Una función se puede pasar como argumento a otra función, permitiendo modularizar y ejecutar código una vez que ocurre un evento particular.
```
function A() {
  console.log("Función A");
}

function B(callback) {
  callback();
}

B(A); // Llamada a la función B, pasando A como callback
```

Retornar funciones: Es posible que una función devuelva otra función, lo que permite crear funciones dinámicas y reutilizables.

function A() {
  function B() {
    console.log("Función B");
  }
  return B;
}

const nuevaFuncion = A();
nuevaFuncion(); // Ejecuta la función B

Asignar funciones a variables: En JavaScript, las funciones pueden asignarse a variables, convirtiéndose en 'funciones anónimas' o 'expresiones de función'.
```
const A = function() {
  console.log("Función anónima");
};

A();
```

¿Qué propiedades y métodos tienen las funciones?

Otra característica esencial de las funciones es que, igual que los objetos, pueden poseer propiedades y métodos. Por ejemplo:

Método call: Permite establecer explícitamente el contexto de this dentro de la función.

const obj = {
  nombre: "Objeto",
};

function saludar() {
  console.log(`Hola, soy un ${this.nombre}`);
}

saludar.call(obj); // Salida: Hola, soy un Objeto

¿Cómo se pueden anidar funciones?

Anidar funciones significa definir funciones dentro de otras funciones. Esta técnica permite agrupar lógicamente funciones relacionadas y gestionar las variables de manera estructurada.

Nested functions: En JavaScript, es posible acceder a variables externas a una función desde otra función más interna, manteniendo el acceso a sus variables, lo cual es uno de los conceptos claves detrás de los closures.
```
function A() {
  const mensaje = "Soy función A";

  function B() {
    console.log(mensaje);
  }

  B();
}

A(); // Llamará a la función B, imprimiendo "Soy función A"
```

¿Es posible almacenar funciones en objetos?

Sí, es totalmente posible almacenar funciones en objetos. Cuando una función se almacena como una propiedad de un objeto, esta se conoce como método del objeto.

Métodos en objetos: Este es un ejemplo de cómo se puede definir una función como un método de un objeto.

const rocket = {
  nombre: "Falcon 9",
  launchMessage: function() {
    console.log("¡Despegue exitoso! 🚀");
  }
};

rocket.launchMessage(); // Ejecutará el método y mostrará "¡Despegue exitoso! 🚀"

En resumen, tanto funciones como métodos son herramientas esencialmente poderosas en JavaScript. Con estas, puedes estructurar tu código de manera más eficiente, crear funciones reutilizables, modularizar el flujo de tu programa, y gestionar efectivamente los contextos de ejecución. Sigue explorando cómo las funciones y métodos pueden mejorar la calidad y funcionalidad de tus proyectos.

Gerardo Lara

Hace 2 años

Tambien en esta clase se habla de los Bindings (minuto 5:15) de esto habla del contexto de ejecucion, de como la palabra this esta vinculada a una funcion **este tema es importante de repasar ** Binding en JavaScript se refiere a cómo la palabra clave this está vinculada o asociada en una función. Así que, entender los diferentes tipos de “binding” es esencial para comprender cómo se comporta this en diferentes situaciones. Veamos los cinco tipos principales de “binding”:

Implicit Binding:

Ocurre cuando se invoca un método de un objeto, y this se vincula al objeto que contiene el método.

Ejemplo:

const person = { name: 'Adam', greet: function() { console.log(Hello, I'm ${this.name}); } }; person.greet(); // Output: Hello, I'm Adam

Explicit Binding:

Ocurre cuando se usan métodos como call(), apply(), o bind() para establecer explícitamente el valor de this.

Ejemplo:

function greet() { console.log(Hello, I'm ${this.name}); }

const adam = { name: 'Adam' }; greet.call(adam); // Output: Hello, I'm Adam

El término "enlace explícito" en JavaScript se refiere al proceso de establecer el valor de this de manera deliberada y explícita en una función, en lugar de depender del comportamiento de enlace implícito. En JavaScript, el valor de this dentro de una función puede cambiar dependiendo de cómo se llama esa función. El enlace implícito ocurre cuando el valor de this se establece automáticamente por el contexto de ejecución en el que se llama la función. Por otro lado, el enlace explícito te permite especificar manualmente el valor de this utilizando métodos como call(), apply(), o bind(). Otros tipos de binding

Ejemplo con call()

// call() function newDogGreeting(owner,address){ console.log(Hi, im ${this.dogName} and u live with ${owner} in ${address}); }

const newHouse = { dogName: 'Coconut' }

const owner = 'lucy' const address = 'Avenue 123' newDogGreeting.call(newHouse,owner,address)

Ejemplo con apply()

function newDogGreeting(owner,address){ console.log(Hi, im ${this.dogName} and u live with ${owner} in ${address}); } const newHouse = { dogName: 'Coconut' } const owner = 'lucy' const address = 'Avenue 123'

const necessaryValues = [owner,address] newDogGreeting.apply(newHouse,necessaryValues)

Ejemplo con bind()

const bindingWithBind = newDogGreeting.bind(newHouse,owner,address) console.log(typeof bindingWithBind); bindingWithBind()

New Binding:

Ocurre cuando una función se invoca con la palabra clave new, creando así un nuevo objeto y vinculando thisa ese objeto.

Ejemplo:

function Person(name) { this.name = name; }

const adam = new Person('Adam'); console.log(adam.name); // Output: Adam

Lexical Binding:

Ocurre cuando se utiliza thisen una función dentro de otra función. En este caso, this se vincula al contexto léxico de la función exterior.

Ejemplo:

const person = { name: 'Adam', greet: function() { const innerFunction = () => { console.log(Hello, I'm ${this.name}); }; innerFunction(); } };

person.greet(); // Output: Hello, I'm Adam

Window Binding:

Ocurre cuando ninguna de las reglas anteriores se aplica y this se vincula al objeto global (por ejemplo, window en el navegador).

Ejemplo (ejecutar en el navegador):

function showName() { console.log(this.name); }

window.name = 'Adam'; showName(); // Output: Adam

Comentarios (67)67 comentarios

Alcira Reyes

Ecsar García Sandoval

Artear CD CD

Alan Garcia

Gabriel Muñoz Castro

Eduardo Giovanni Hernandez Valtierra

Hace un año

Isaac Bonilla lopez

Johnn Alexander Montañez Sarmiento

Julio Cardenas

Xiomara Sánchez

Eldrich Daniel Raygoza Díaz

Miguel Jonathan Madrigal González

Juliana Rios

Aloy Foxy

LUIS FELIPE RESTREPO ARGÜELLO

Óscar Andrés Ugarte De La Fuente

Eugenia Maldonado

Yorgen Omar Marciales Parada

Calvin Rafael Bobadilla Fernandez

HERNANDO RAMIREZ

Hace 6 meses•editado

Juan Duch Flores

Hace 5 meses

ALEJANDRO OLGUIN

Juan Miguel Jimenez

Hace 10 meses

Humberto Sanchez

Rodrigo Miguel Perez Balderrama

Daniel Vicente Vergara Suarez

Jean Carlos Jesus Sanchez Velayarce

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Diferencias entre Funciones y Métodos en JavaScript