Sobre las funciones

Hablemos de otro tipo de dato: Las funciones, nos ayudan a realizar acciones o comportamientos.

De manera técnica, son una serie de instrucciones agrupadas bajo un nombre.

Esto nos ayuda a utilizarlas en múltiples lugares sin tener que repetir el mismo código.

// Declaración
function miFuncion() {
  // Instrucciones aqui
}

A este paso le llamamos declaración de la función, es decir, sólo estamos creando un instructivo de qué debe de hacer.

Analogía

Una forma de ver a las funciones es como máquinas que realizan un procedimiento.

Primero tenemos que diseñar la máquina y decirle lo que va a realizar.

Para que haga efecto todo el código que contiene la función debemos usar:

// Declaración
function miFuncion() {
  // Instrucciones aqui
}

// Ejecución
miFuncion();

A lo cual le llamamos ejecución de la función.

Analogía

La ejecución es como tomar el diseño de la máquina, crearla y echarla a andar.

Una función que ya conocemos

Hasta este punto conocemos console.log. Donde log es una función que proviene del objeto console.

Para usarla debemos usar la notación de los paréntesis, y dentro debemos poner nuestro mensaje.

console.log("Mi mensaje");

A lo que va dentro de los paréntesis lo llamamos argumento.

Hay funciones que no nos piden argumentos, mientras que otras los necesitan para funcionar correctamente.

Tal es el caso de console.log().

Una nueva función predefinida

Hay funciones que no sólo nos piden que les demos un valor, también nos regresan un producto a partir de lo que les demos.

Un ejemplo de ello se encuentra dentro del objeto global document, que contiene información y acciones que puede realizar el documento HTML.

Dentro de document existe una función llamada querySelector() que nos ayuda a conseguir los diferentes elementos HTML dentro de él.

Para usarla podemos hacer lo siguiente:

<p>Mi texto</p>
<script>
  const elemento = document.querySelector("p");
  console.log(elemento);
</script>

<p>Mi texto</p>

Dentro de los paréntesis podemos poner cualquier selector CSS para conseguir el primer elemento de dicha naturaleza.

Como es una función que nos regresa un producto o resultado, lo podemos guardar en una variable para usarlo en otras líneas de código.

Analogía

En este caso nos está devolviendo el elemento <p> que se encuentra en el documento.

En otros artículos veremos qué cambios podemos realizar en los diferentes elementos HTML.

Comentarios

Rutas relacionadas

Web Dev (Frontend)