Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de funciones de JavaScript

 tutorial de funciones javascript

Las funciones de JavaScript son posiblemente la parte más importante del lenguaje. A medida que comienza a estudiarlos más profundamente, se da cuenta de que hay mucho más en ellos de lo que parece. Esta serie JavaScript es realmente acerca de cubrir los Fundamentos de JavaScript, con el fin de construir una sólida comprensión de JavaScript antes de que nos movemos en los marcos impresionantes de JavaScript como jQuery y Node.js . Si eres un estudiante de Douglas Crockford, sabrás que, en su opinión, JavaScript será el lenguaje para gobernarlos a todos, desde el navegador al servidor, y viceversa. Si bien eso está por verse, JavaScript está aquí, se usa ampliamente y brinda muchos beneficios, ¡así que tendremos que ensuciarnos las manos con él!


¿Qué es una función de JavaScript?

A medida que escribimos más y más declaraciones en nuestro código, debemos tomar medidas para mantener las cosas organizadas. Para evitar que las cosas se vuelvan desordenadas y desorganizadas, podemos dividir grandes partes de JavaScript en bloques de código más pequeños y reutilizables. Como sabe, todos los lenguajes de programación tienen esta capacidad y JavaScript no es diferente.

Funciones nombradas

La primera forma de crear una función es utilizar el enfoque con nombre .

  • Comience con la función de palabra clave .
  • Proporcione un nombre que sea una palabra, con letras , números , $ y _ , pero que no pueda comenzar con un número y no pueda tener espacios. El nombre debe ser descriptivo de lo que realmente hace la función.
  • Luego vienen los paréntesis de apertura y cierre. Si espera pasar datos a esta función, los parámetros irán entre paréntesis, separados por una coma.
  • A continuación, se abren y cierran los tirantes rizados. Entre estos, puede colocar todo el código JavaScript que desea ejecutar.
    Este código se puede llamar simplemente escribiendo el nombre de la función seguido de () .

En este ejemplo, simplemente declaramos una función llamada learn, establecemos una variable con la cadena Web Development Best Practicesy luego simplemente registramos esa variable en la consola. ¡Adelante, pruébalo en Firebug ahora!

¿Dónde debería declarar las funciones?

Cuando le damos un nombre a un bloque de código como hicimos en el ejemplo anterior, esto no hace que el código se ejecute cuando el motor JavaScript lo ve. No es hasta que realmente llama a la función por su nombre, que realmente se ejecuta . Ahora, podríamos haber configurado fácilmente nuestra declaración de función y llamar en un orden diferente así:

Sin embargo, esta no es una buena práctica. A JavaScript le gusta intentar facilitarle las cosas de diferentes maneras. Uno de ellos es escanear su JavaScript primero, antes de llamar a cualquier función. Entonces, sí, puede llamar a una función antes de que se declare oficialmente, pero esto solo aumentará la confusión cuando usted o los miembros de su equipo necesiten leer el código en un momento posterior. Así que sé el buen tipo que eres y define tus funciones primero, luego llámalas más tarde

  • Declare todas las variables en la parte superior de la función.
  • Declare todas las funciones antes de llamarlas.

Funciones con parámetros

Muchas veces necesitamos poder pasar datos a nuestras funciones para que sean más utilizables. Esto no es tan diferente de cualquier lenguaje de programación que pueda estar usando. Configuremos una función que duplique un número.

En este ejemplo, simplemente nombramos una función llamada doubleItque toma solo un parámetro, multiplica ese número por 2 y registra el resultado. Cuando llamamos a la función pasando varios valores numéricos, se duplican correctamente.

Devolver un valor

La mayoría de las veces, las funciones devuelven un valor. Casi todas las funciones integradas en el lenguaje devuelven algún tipo de valor, y cuando escribimos nuestras propias funciones, probablemente también querremos devolver un valor. Podemos regresar en cualquier punto de la función basándonos en alguna lógica, o simplemente queremos hacer algunos cálculos, y cuando hayamos terminado, devolver ese resultado. Nuestro ejemplo reescrito usando una declaración de retorno se vería así:

Es probable que la devolución de valores sea un enfoque más útil.

Recuentos y discrepancias de parámetros

Dependiendo de lo que haga una función, puede tomar uno o posiblemente muchos parámetros. En otros lenguajes, el número de parámetros dados a la función cuando se llama debe coincidir exactamente con el número de parámetros definidos en la declaración de la función (menos los parámetros predeterminados establecidos en la declaración). Es posible que se haya encontrado con esto en el que accidentalmente pasa muy pocos o demasiados parámetros a una función y todo el programa se detiene en seco. No existe tal comportamiento en JavaScript. ¿Esto es bueno o malo? Bueno, como muchas cosas en JavaScript, solo significa que realmente debes prestar atención a lo que estás haciendo. En JavaScript, a menudo se encontrará con errores silenciosos, o errores que se habrían encontrado antes si JavaScript no fuera tan indulgente. Por ejemplo:

En este ejemplo, tenemos una pequeña función ingeniosa que acepta 4 parámetros y calcula una hipoteca para nosotros. Cuando se llama en las tres líneas siguientes, mostramos un ejemplo del número correcto de parámetros, demasiados parámetros y muy pocos parámetros. Cada instancia tiene un comportamiento diferente.

En JavaScript:

  • Los parámetros adicionales simplemente se ignoran
  • Los parámetros no proporcionados se establecen enundefined

Una vez más, esto es útil en la medida en que su código no dejará de ejecutarse, pero debe prestar atención, ya que la mayoría de las veces querrá pasar la cantidad correcta de parámetros a cualquier función determinada.

Alcance de la función

En JavaScript no hay alcance de bloque, pero sí alcance de función . Lo que esto significa es que las variables definidas dentro de una función, solo están disponibles para su uso dentro de esa función.

variable local

variable global

La alternativa a una variable local en una función es una variable global. Solo tenga cuidado, se cree que Douglas Crockford llueve fuego sobre los gatitos cada vez que se usa una variable global en JavaScript. Sin embargo, todavía necesita saber cómo usar uno, y así es como lo hace:

Al declarar el resultado de la variable fuera de la función, es visible en todo el programa. Es decir, es una variable global .

Funciones anónimas en JavaScript

En JavaScript, los nombres de las funciones son realmente opcionales. También podemos tener funciones que no tienen nombre y se denominan funciones anónimas . Están en todas partes en las aplicaciones de JavaScript, y manejarlas nos ayuda a hacer un uso real de parte del poder del lenguaje, y mucho menos a poder depurar aplicaciones existentes que hacen un uso intensivo de ellas.

Aquí, asignamos una función anónima a la variable hi¡Entonces podemos usar hicomo una función! Donde veremos funciones anónimas en una situación del mundo más real es en los marcos de JavaScript modernos. Aquí a menudo veremos que las funciones se pasan como argumentos a otras funciones, y aquí es donde comienza la verdadera diversión

Aquí hay un ejemplo súper simple para mostrar el paso de una función como argumento a la setTimeout()función incorporada de JavaScript .

Cuando ejecutamos este script, hace exactamente lo que dice que hará. Esperará 2 segundos y luego registrará un mensaje en la consola. Use su imaginación, piense en todas las cosas increíbles que puede hacer con este tipo de construcción. Resulta muy útil con bastante frecuencia.

Ahora bien, la sintaxis es un poco complicada si es la primera vez que la ve. Veámoslo de otra manera.

setTimeout (function () {var mes = ' Iniciaré sesión en la consola después de 2 segundos'; console.log (mes); , 2000) ;

Esto es simplemente setTimeout( arg1, arg2 );con arg1en cursiva y arg2 negrita . Con suerte, eso lleva la idea a casa.

Funciones anónimas como controladores de eventos

Recientemente cubrimos los eventos de JavaScript y cómo podemos responder a esos eventos. Bueno, lo has adivinado, ¡la función anónima es la principal forma en que podemos responder a los eventos que suceden en JavaScript! Aquí tienes uno divertido. Respondamos a los movimientos del mouse del usuario y actuemos en cada movimiento del mouse solo por diversión:

Esto es realmente sencillo. document.onmousemove es simplemente un evento. function () {console.log ('en ejecución');}; es simplemente una función sin nombre (¡una función anónima!) que simplemente asignamos a ese evento usando el operador de asignación bastante simple =La expresión es tan simple como algo así var a = 'b';Tan fácil como se puede declarar una variable llamada una y asignar un carácter B a ella, también se puede especificar un evento y asignar una función a la misma. Probemos esto. Primero ejecutaré este código en firebug, luego solo dibujaré algunos círculos en la página con el mouse. Veamos qué pasa.
función anónima javascript

¡Decir ah! Puedes ver, después de hacer algunos círculos en la pantalla durante unos segundos, ¡¡nuestro pequeño manejador de eventos registró mil doscientos ochenta y un mensajes en la consola !! Claro, es un ejemplo divertido, pero muestra la idea de cómo las funciones anónimas pueden responder a eventos en JavaScript.

Cierres en JavaScript

Por último, tenemos una mención rápida de los cierres en JavaScriptEn el futuro, dedicaremos un tutorial completo solo a los cierres en JavaScript, ya que es un concepto importante en el lenguaje. Sin embargo, para este ejemplo, solo queremos tener una idea general de lo que significa un cierre.

Podemos tener funciones dentro de otras funciones. Recuerde que dijimos que en JavaScript, tenemos el alcance de la función. Esto significa que una variable dentro de una función solo es visible en esa función. Entonces, ¿qué sucede cuando tienes una función dentro de una función? Aquí es donde entra en juego el cierre .

  • Una función interna tiene acceso a las variables de la función externa.
  • La función interna tiene acceso a esas variables incluso si la función externa ya ha regresado o terminado de ejecutarse.
  • Una función cierra las variables de otra función.

En el ejemplo anterior, observe que tenemos una función nombrada one, luego dentro de esa función hay otra función llamadatwoObserve que la función uno acepta dos parámetros y la función dos no acepta parámetros. También observe que la función dos es una función anónima autoejecutable. Una vez declarado todo esto, llamamos a la función uno y pasamos los números 5 y 10. Técnicamente, la función uno ni siquiera hace nada con estas variables. Cuando se ejecuta la función uno, dentro del cuerpo de esa función, se ejecutará la función dos. la función dos luego escribe las variables pasadas a la función uno a la consola. ¡¿Qué?! La función dos ni siquiera toma ningún parámetro, ¿cómo diablos es capaz de escribir los valores correctos? Puede hacer esto a través del cierre, la función interna tiene acceso al contexto de la función externa.

En este segundo ejemplo, hacemos algo un poco más complejo. El ejemplo está inspirado en las enseñanzas de Douglas Crockford, y es un poco complicado, pero una vez que lo entiendes, ayuda a cimentar el concepto de cierre en tu cerebro. Entonces, ¿qué está pasando en este código? Observemos solo la función externa por el momento.

  • Declaramos una variable day.
  • Asignamos una función anónima autoejecutable a dayEl ()al final de las llaves de la función nos dice que se ejecuta inmediatamente.
  • Esta función tiene dos expresiones.
    1. Declara una daysmatriz y la llena con una representación de cadena de los días de la semana.
    2. Se vuelve una functionLa segunda parte de esto es complicada. Verá, una función puede devolverse como cualquier otro valor. Estamos acostumbrados a devolver el resultado de un cálculo, o devolver una matriz o un objeto, pero lamentablemente, también podemos simplemente devolver una función de una función en JavaScript.

Ahora, pasemos a esta línea theday = day(4);Hay una función en dayPensarías que es el exterior function asignado a day, ya que como vemos en la primera línea var day = (function () {, hay un operador de asignación =con una variable a la izquierda y una función a la derecha. Bueno, debe ser esa función, ¿verdad? Incorrecto  Dado que la función externa se ejecuta inmediatamente , simplemente configura la daysmatriz y devuelve lo functiondefinido dentro de ella. Esta función externa ahora está hecha y completa. En este punto, la función anónima interna que toma un número como parámetro es lo que se almacena endayAhora, esa función interna se ejecuta y pasamos un número, en este caso 4 como un índice. Recuerde, la función externa ya ha regresado, por lo que sus variables también deberían desaparecer y dejar de existir, al menos esto es lo que esperaría. Sin embargo, en realidad, esta variable externa days todavía está disponible para esa función interna en este momento posterior debido al cierre .

Publicar un comentario

0 Comentarios