Funciones (bloques de codigo reutilizables)

Un concepto fundamental son las funciones, estas permiten almacenar bloques de codigo ( con bucles, variables, condicionales) , para retulizarlas despues... vamos que es lo que buscaba cuando queria poner condicionales y bucles en una variable, ahora con esto podria hacerlo.

Funciones integradas del navegador

Son funciones ya creadas e incorporadas en el navegador, estas dan utilidad a los distintos objetos de JS (strings, arrays, , algunas de estas funciones no figuran en el estandar de ECMAScript, sino que estan añadidas mediante APIs, todos los navegadores buscan tener las mismas palabras para activar funciones a modo de estandar, sino esto seria un desastre, porque habrian palabras claves para funciones que no se ejecutarian en algunos navegadores ... un lio! xD (por suerte todo en orden).

Muchas de las funciones que ya vienen incorporadas en el navegador no se pueden escribir en JS (no se como cual), estas estan escritas en un lenguaje de bajo nivel tipo C++, y JS por medio de las funciones accede a estos datos.

Funciones VS Metodos

Los metodos se podria decir que son funciones dentro de los prototipos de objetos, que luego se podran invocar en los objetos hijos, la sintaxis para acceder a estos seria objeto.metodo(), osea que todas las funciones predefinidas que usamos con los diferentes tipos de datos son posibles porque en si estos datos son objetos...[ en si son datos primitivos pero lo que hace JS es pasar estos datos primitivos a objetos para poder aplicar los metodos proporcionados por el objeto principal (objeto plantilla, clase o conocido en JS como prototipo)].

La forma de llamar a un metodo es anteponiendolo al objeto, la forma de llamar a una funcion simple es simplemente nombrandola. ⇒

object.method() //seria como cuando llamamos a un elemento del array, el objeto tiene
//muchos elementos y entre ellos estan las funciones con sus respectivos nombres
myFunction() //y asi nomas llamamos a una funcion creada

//los argumentos de ambas pueden o no estar presentes.

Invocar funciones

Para poder utilizar una funcion despues de definida, esta debe ser llamada (ejecutada o invocada), para esto se debe colocar el nombre de la funcion seguida de parentesis.

function myFunction() {
  alert('hello');
}

myFunction();
// calls the function once

Funciones anonimas

Es posible crear funciones que no tengan nombre:

funcion anonima ⇒

function() {
  alert('hello');
}

Este tipo de funciones no ejecutaran nada por si solas, porque no tenemos forma de invocarlas, por lo general se usan junto a controladores de eventos, para activarse cuando el usario active cierto evento en la pagina (ej: clics en elementos, pasar el puntero sobre un elemento, cargue la pagina, etc).

const myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}

Tambien es posible asignar una funcion anonima a una variable ⇒

const myGreeting = function() {
  alert('hello');
}

Esta ultima funcion podria invocarse usando el nombre de la variable myGreeting(), esto efectivamente le da un nombre a la funcion, ademas se puede asignar esta funcion a otra variable⇒

let anotherGreeting = myGreeting;

haciendo que esta funcion ahora se pueda invocar usando ambos nombres ⇒ anotherGreeting() y myGreeting().

Esto puede resultar confuso por esta razon es conveniente no usar este tipo de notacion de funciones (en funciones personalizadas, no habria problema en las funciones incorporadas del navegador para facilitar su uso) , y en cambio usar la declaracion de funcion antes nombrada ⇒

function myGreeting() {
  alert('hello');
}

Parametros de funcion

Algunas funciones requieren de parametros para su invocacion (estos se pueden ver como variables dentro de la funcion, porque cuando declaramos una funcion con parametros, estos cumplen tareas o varian su informacion dentro de la funcion) ⇒

function myfunction (x , y) {
		return x + y;
}

Los parametros pueden ser obligatorios, opcionales o directamente no existir, en caso de que sean opcionales y no se agrega alguno, el codigo de la funcion tendra un resultado predeterminado para este caso.

Alcance de la funcion y conflictos

Las variables y otras declaraciones dentro de la funcion estan dentro su propio alcance, no pueden ser alcanzadas por codigo fuera de la funcion, [si yo quisiera ver el valor de una variable dentro de la funcion de manera directa no podria, tendria que crear una variable fuera, y dentro de la funcion darle un valor a la variable que quiero su valor igual a la variable externa, inicializar la funcion y ya xD].

Por otro lado si quiesiera transmitir informacion desde una variable a otra tendria que hacerlo a partir de una declaracion en el ambito superior a estas, que pueda alcanzar a ambas.

Mantener parte del codigo dentro de funciones sirve por un motivo de seguridad por errores de script de terceros que tengan el mismo nombre de variables y esto cause algun tipo de conflicto, ya sea accidental o intencional.

Si utilizaramos de analogia un zoologico, el cuidador seria el alcance global capaz de entrar a cualquier recinto, notese que un elemento de un recinto no podria pasar a otro o influir en otro, pero el alcance global puede entrar en cualquier recinto.

Funciones dentro de funciones

Se puede llamar a una funcion en cualquier lugar del codigo (mientras se encuentren en el mismo ambito o superior) incluso dentro de otra funcion. Esto se usa para tener un orden en el codigo ⇒

Bibliografia

Para seguir leyendo

Ejemplo de prototipos JS