Las funciones de flecha de JavaScript pueden convertirlo en un mejor desarrollador

Anuncio

JavaScript ES6 trajo cambios emocionantes al mundo del desarrollo web. Las nuevas incorporaciones al lenguaje JavaScript trajeron nuevas posibilidades.

Uno de los cambios más populares fue la adición de funciones de flecha en JavaScript. Las funciones de flecha son una nueva forma de escribir expresiones de funciones de JavaScript, que le ofrecen dos formas diferentes de crear funciones en su aplicación.

Las funciones de flecha requieren un poco de ajuste si eres un experto en funciones tradicionales de JavaScript. Echemos un vistazo a cuáles son, cómo funcionan y cómo te benefician.

¿Qué son las funciones de flecha de JavaScript?

Las funciones de flecha son una nueva forma de escribir expresiones de funciones que fueron incluido en el lanzamiento de JavaScript ES6 ¿Qué es ES6 y qué necesitan saber los programadores de Javascript?ES6 se refiere a la versión 6 del lenguaje de programación ECMA Script (Javascript). Veamos ahora algunos cambios importantes que ES6 trae a JavaScript. Lee mas

. Son similares a las expresiones de función de JavaScript que ha estado utilizando, con algunas reglas ligeramente diferentes.

Las funciones de flecha son siempre funciones anónimas, tienen reglas diferentes para esta, y tienen una sintaxis más simple que las funciones tradicionales.

Estas funciones usan un nuevo token de flecha:

=>

Si alguna vez trabajó en Python, estas funciones son muy similares a Expresiones de Python Lambda Una guía para principiantes para comprender las funciones de Python LambdaLas Lambdas en Python son una de las características más útiles, importantes e interesantes para conocer. Aquí se explica cómo usarlos y por qué son útiles. Lee mas .

La sintaxis para estas funciones es un poco más limpia que las funciones normales. Hay algunas reglas nuevas a tener en cuenta:

• La palabra clave de función se elimina
• La palabra clave return es opcional.
• Las llaves son opcionales

Hay muchos pequeños cambios que revisar, así que comencemos con una comparación básica de las expresiones de función.

Cómo usar las funciones de flecha

Las funciones de flecha son fáciles de usar. Comprender las funciones de flecha es más fácil cuando se compara lado a lado con las expresiones de funciones tradicionales.

Aquí hay una expresión de función que agrega dos números; primero usando el método de función tradicional:

 let addnum = function (num1, num2) {return num1 + num2; }; addnum (1,2); >>3

Es una función bastante simple que toma dos argumentos y devuelve la suma.

Aquí está la expresión cambiada a una función de flecha:

let addnum = (num1, num2) => {return num1 + num2;}; addnum (1,2); >>3

La sintaxis de la función es bastante diferente usando una función de flecha. La palabra clave de función se elimina; el token de flecha le permite a JavaScript saber que está escribiendo una función.

Las llaves y la palabra clave return siguen ahí. Estos son opcionales con funciones de flecha. Aquí hay un ejemplo aún más simple de la misma función:

let addnum = (num1, num2) => num1 + num2;

La palabra clave return y las llaves se han ido. Lo que queda es una función de una línea muy limpia que es casi la mitad del código que la función original. Obtiene el mismo resultado con mucho menos código escrito.

Hay más para las funciones de flecha. profundicemos más para que tenga una mejor idea de lo que pueden hacer.

Características de la función de flecha

Las funciones de flecha tienen muchos usos y características diferentes incluidos.

Funciones regulares

Las funciones de flecha pueden usar uno o más argumentos. Si está utilizando dos o más argumentos, debe encerrarlos entre paréntesis. Si solo tiene un argumento, no necesita usar paréntesis.

dejar cuadrado = x => x * x cuadrado (2); >>4

Las funciones de flecha se pueden usar sin argumentos. Si no está utilizando ningún argumento en su función, debe utilizar paréntesis vacíos.

let helloFunction = () => Console.log ("¡Hola lector!"); helloFunction (); >> Hola lector!

Funciones simples como estas usan mucho menos código. Imagina cuánto más fácil es un complejo proyectar como una presentación de diapositivas de JavaScript Cómo construir una presentación de diapositivas de JavaScript en 3 sencillos pasosHoy te mostraré cómo crear una presentación de diapositivas Javacript desde cero, ¡vamos a empezar! Lee mas se convierte en cuando tienes una forma más simple de escribir funciones.

Usando esto

El concepto de esta tiende a ser la parte más complicada del uso de JavaScript. Las funciones de flecha hacen esta más fácil de usar.

Cuando usas funciones de flecha esta será definido por la función de cierre. Esto puede crear problemas que surgen cuando crea funciones anidadas y necesita esta para aplicar a su función principal

Aquí hay un ejemplo popular que muestra la solución que debe usar con las funciones normales.

función Person () {var that = this; // Tienes que asignar 'esto' a una nueva variable that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

Asignación del valor de esta a una variable lo hace legible cuando llama a una función dentro de su función principal. Esto es desordenado, aquí hay una mejor manera de hacerlo usando las funciones de flecha.

función Persona () {this.age = 0; setInterval (() => {this.age ++; // Ahora puedes usar 'this' sin una nueva variable declarada}, 1000); }

Si bien son excelentes para las funciones, no deben usarse para crear métodos dentro de un objeto. Las funciones de flecha no utilizan el alcance correcto para esta.

Aquí hay un objeto simple que crea un método dentro usando una función de flecha. El método debería reducir el coberturas variable por uno cuando se llama. En cambio, no funciona en absoluto.

dejar pizza = { ingredientes: 5, removeToppings: () => {this.toppings--; } } // Un objeto de pizza con 5 ingredientes. > pizza. >> {toppings: 5, removeToppings: f} pizza.removeToppings (); // El método no hará nada al objeto> pizza. >> {toppings: 5, removeToppings: f} // Todavía tiene 5 toppings.

Trabajando con matrices

Con las funciones de flecha puede simplificar el código utilizado para trabajar con métodos de matriz. Matrices y los métodos de matriz son partes muy importantes de JavaScript 5 métodos de matriz de JavaScript que debe dominar hoy¿Desea comprender las matrices de JavaScript pero no puede familiarizarse con ellas? Consulte nuestros ejemplos de matriz de JavaScript para obtener orientación. Lee mas así que los usarás mucho.

Hay algunos métodos útiles como el mapa Método que ejecuta una función en todos los elementos de una matriz y devuelve la nueva matriz.

deje myArray = [1,2,3,4]; myArray.map (function (element) { elemento de retorno + 1; }); >> [2,3,4,5]

Esta es una función bastante simple que agrega uno a cada valor en la matriz. Puede escribir la misma función con menos código utilizando una función de flecha.

deje myArray = [1,2,3,4]; myArray.map (element => { elemento de retorno + 1; }); >> [2,3,4,5]

Es mucho más fácil de leer ahora.

Crear objetos literales

Las funciones de flecha se pueden usar para crear literales de objetos en JavaScript. Las funciones regulares pueden crearlos, pero son un poco más largos.

let createObject = function createName (first, last) {return {first: first, last: last}; };

Puede hacer el mismo objeto con una función de flecha usando menos código. Usando la notación de flecha, necesitará ajustar el cuerpo de la función entre paréntesis. Aquí está la sintaxis mejorada con funciones de flecha.

let createArrowObject = (first, last) => ({first: first, last: last});

Funciones de flecha JavaScript y más allá

Ahora conoce algunas formas diferentes en que las funciones de flecha de JavaScript le hacen la vida más fácil como desarrollador. Acortan la sintaxis, te dan más control usando esta, facilita la creación de objetos y le ofrece una nueva forma de trabajar con métodos de matriz.

La introducción de funciones de flecha, junto con muchas otras características, en JavaScript ES6 muestra cuán importante se ha vuelto JavaScript en el desarrollo web. Sin embargo, hay mucho más que puedes hacer.

¿Quieres aprender más sobre JavaScript? Nuestra Hoja de trucos de JavaScript La última hoja de trucos de JavaScriptObtenga una actualización rápida de los elementos de JavaScript con esta hoja de trucos. Lee mas proporciona información valiosa y aprende más sobre cómo funciona JavaScript ¿Qué es JavaScript y cómo funciona?Si está aprendiendo desarrollo web, esto es lo que necesita saber sobre JavaScript y cómo funciona con HTML y CSS. Lee mas puede hacerte un mejor desarrollador.