Fundamentos de Js
Por Steve 15/04/2025
Arrow Functions
Sintaxis Basica
Parentesis en los Parametros
Diferencias
Uso comun en react
Buenas Practicas
Template Literals
Sintaxis Basica
Arrow Functions (Funciones Flecha)
Sintaxis Basica
Las arrow functions son una forma mas corta de escribir funciones en JavaScript.
Funcion tradicional
function suma ( a b ) {
return a + b
}
Arrow function equivalente
const suma = ( a b ) = > {
return a + b
}
Si el cuerpo es una sola lineam, se puede omitir y el return
Sin simbolos
const suma = ( a b ) = > a + b
Parentesis en los Parametros
Un parametro: Los parentesis son opcionales.
Un solo parametro
const cuadrado = x = > x * x
Sin parametros: Se usan parentesis vacios.
Sin parametros
const saludo = ( ) = > "Hola Mundo"
Varios parametros: Requiren parentesis.
Varios parametros
const resta = ( a b ) = > a - b
Diferencias
Sintaxis
Las arrow funcion son mas cortas el usar la sintaxis: () => a diferencia de las funciones tradicionales: function ()
Uso de de this
Las arrow functions Heredan el this del contexto padre (lexical scope). Las funciones tradicionales tienen su propio contexto para this (dinamico).
Arguments
Las arrow funstions no tienen el objeto arguments, las funciones tradicionales tienen el objeto arguments
Contructores
Las arrow functions no pueden usarse como constructor (new), las funciones tradicionales si pueden usarse como constructor (new MiFuncion())
Uso comun en react
En react, las arrow functions se usan mucho para:
Manejo de eventos
< button onClick = { ( ) = > console . log ( "Click" " ) } >
< / button >
Componentes funcionales
const MiComponente = ( ) = > < h 1 > Hola React < / h 1 >
Funciones dentro de hooks
useEffect ( ( ) = > {
fetchData ( )
} [ [ ] ] )
Buenas Practicas
Usar arrow functions para callbacks y metodos cortos. Evitar arrow functions en metodos de objetos si necesitas acceder a this del objeto Preferir arrow functions en React para evitar problemas con this.
Ejemplo mala practica
const objeto = {
valor : 10
incremento : ( ) = > {
this . valor + +
}
Template Literals (Plantillas de Cadena/Template Strings)
Son una mejora a las cadenas de texto tradicionales ("" o ''), que permiten:
Interpolacion de variables (incrustar expresiones directamente).
Cadenas multilinea sin necesidad de \n
Sintaxis mas legible usando acentos invertidos (`)
Sintaxis Basica
Ejemplo
const nombre = "Ana"
const saludo = ` Hola { nombre } `
Comparacion con strings tradicionales
Ejmplo
var saludo = "Hola, " " + nombre
const saludo = `Hola { nombre } `
Caracteristicas Principales
Interpolacion de variables y expresiones: Puedes incluir cualquier expresion JavaScript dentro de $
Ejemplo
const a = 5
const b = 10
console . log ( `La suma es : { a + b } ` ) // "La suma es : 15
function saludar ( nombre ) {
return ` Hola { nombre . toUpperCase ( ) } ! `
}
Cadenas multilinea: permite crear multiples lineas en una cadena sin tener que usar el caracter \n
Ejemplo
const mensaje =
Linea 1
Linea 2
Linea 3
`