2

Estoy aprendiendo JavaScript, y leyendo un artículo de la FreeCodeCamp (este) me encontré con estas dos "funciones":

let id = (id) => document.getElementById(id);

let classes = (classes) => document.getElementsByClassName(classes);

las cuales pueden ser usadas así:

let username = id("username")
let errorMsg = classes("error")

Jamás había visto una sintaxis como esta, y aunque puedo imaginar un poco su funcionamiento, no le veo lógica.

No entiendo por qué se declara id como una variable constante (usando let), pues creo que esto es una función y no una variable.

Además, supongo que (id) => document.getElementById(id); es una función de tipo flecha, y que ese id entre paréntesis es un argumento. Pero creí que las funciones flecha se ponían entre llaves, adjunto el código de cómo lo haría yo:

let id = (id) => {
    document.getElementById(id);
}

Ojalá puedan ayudarme a entender esta sintaxis, me parece realmente útil pero no consigo entender cómo va. ¡Gracias!

2
  • Las funciones se pueden declarar como variables, usando let, const etc. Las llaves se pueden omitir en las funciones flecha, en dicho caso queda implicito el return. => document.getElementById(id); sería equivalente a => { return document.getElementById(id); }
    – Emeeus
    el 29 sep. 2021 a las 13:48
  • ¡Gracias por explicarlo!
    – Tupi
    el 29 sep. 2021 a las 13:53

2 respuestas 2

5

En Javascript, una función es un objeto de la clase Function:

function f () {
  console.log("hola mundo");
}

console.log(f.constructor.name);


//no es aconsejable, pero podrías declarar una función usando el constructor
const sum = new Function('a', 'b', 'return a + b');

console.log(sum(21,21));

Por tanto, puedes asignarlas a una variable o parámetro, lo que es imprescidible cuando quieres crear una función que recibe otra:

function metafunction(functionToCall, parameter) {
  functionToCall(parameter);
}

metafunction(console.log, "hola");

Por otro lado, es bueno saber que las funciones pueden tener 2 nombres: el que declaras tras la palabra function y el nombre de la variable a la que la asignas:

function fallar () {
 throw new Error("ERROR!");
}

try {
  fallar();
} catch (e) {
  console.log(e.stack);
}

const fallar2 = fallar; 

//aunque tengamos otro nombre, el inicialmente declarado es el fijado para el intérprete
try {
  fallar2(); 
} catch (e) {
  console.log(e.stack);
}


//función sin nombre! Se toma el de la variable
const fallar3 = function () {
 throw new Error("ERROR!");
}

try {
  fallar3(); 
} catch (e) {
  console.log(e.stack);
}

Hasta ahora sólo hemos hablado de funciones "tradicionales", las funciones "flecha" tienen sus propios detalles:

Si la función sólo tiene una expresión, se pueden omitir las llaves:

const flecha = a => console.log("escribo", a);

flecha("hola");

Además, en este caso el resultado de la expresión es devuelto por la función, sin necesidad de añadir return delante:

const suma1 = (a, b) => {
  return a + b;
}

const suma2 = (a, b) => a + b;

//dos maneras de declarar lo mismo

console.log(suma1(21,21));

console.log(suma2(22,20));

1
  • 1
    Muchísimas gracias por tan detallada explicación, lo entendí perfectamente y resolviste todas mis dudas. ¡Un saludo!
    – Tupi
    el 29 sep. 2021 a las 13:54
1
  1. A las variables se les puede asignar una función como valor, a esto se le llama funciones anonimas.

  2. Las funciones tipo flecha tienen varias particularidades, entre ellas, cuando es una función que solamente retorna un elemento, no es necesario colocar ni llaves, ni la palabra return. En este caso, está función:

    let id = (id) => { return document.getElementById(id); }

Sería lo mismo que hacer:

  let id = (id) => document.getElementById(id);
  1. Una variable definida con let es completamente distinta a una constante. Una variable definida con let, su valor puede ser modificado. Una variable constante (definida con la pabra 'const') su valor será siempre el mismo a lo largo del programa.

Ahora, te explico, la función id() lo único que hace es devolver un elemento del DOM (del HTML por así decirlo) que tenga como id el valor que se pase como parámetro al ejecutar la función, mientras que en la función classes se hace lo mismo, pero con una clase (propiedad class en HTML).

1
  • ¡Muchas gracias por compartir tus conocimientos! Y gracias por puntualizar la diferencia entre let y const, lo tendré en cuenta a partir de ahora.
    – Tupi
    el 29 sep. 2021 a las 14:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.