JavaScript - Funciones

Una función es un grupo de código reutilizable que se puede llamar en cualquier parte de su programa. Esto elimina la necesidad de escribir el mismo código una y otra vez. Ayuda a los programadores a escribir códigos modulares. Las funciones permiten al programador dividir un programa grande en varias funciones pequeñas y manejables.

Como cualquier otro lenguaje de programación avanzado, JavaScript también admite todas las características necesarias para escribir código modular usando funciones. Debes haber visto funciones comoalert() y write()en los capítulos anteriores. Usábamos estas funciones una y otra vez, pero solo se habían escrito en JavaScript central una vez.

JavaScript también nos permite escribir nuestras propias funciones. Esta sección explica cómo escribir sus propias funciones en JavaScript.

Definición de función

Antes de usar una función, necesitamos definirla. La forma más común de definir una función en JavaScript es utilizando elfunction palabra clave, seguida de un nombre de función único, una lista de parámetros (que pueden estar vacíos) y un bloque de instrucciones rodeado de llaves.

Sintaxis

La sintaxis básica se muestra aquí.

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
   //-->
</script>

Ejemplo

Pruebe el siguiente ejemplo. Define una función llamada sayHello que no toma parámetros -

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

Llamar a una función

Para invocar una función más adelante en el script, simplemente necesitaría escribir el nombre de esa función como se muestra en el siguiente código.

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>      
      <p>Use different text in write method and then try...</p>
   </body>
</html>

Salida

Parámetros de función

Hasta ahora, hemos visto funciones sin parámetros. Pero existe la posibilidad de pasar diferentes parámetros al llamar a una función. Estos parámetros pasados ​​se pueden capturar dentro de la función y cualquier manipulación se puede realizar sobre esos parámetros. Una función puede tomar varios parámetros separados por comas.

Ejemplo

Pruebe el siguiente ejemplo. Hemos modificado nuestrosayHellofunción aquí. Ahora se necesitan dos parámetros.

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

Salida

La declaración de devolución

Una función de JavaScript puede tener una returndeclaración. Esto es necesario si desea devolver un valor de una función. Esta declaración debe ser la última declaración de una función.

Por ejemplo, puede pasar dos números en una función y luego puede esperar que la función devuelva su multiplicación en su programa de llamada.

Ejemplo

Pruebe el siguiente ejemplo. Define una función que toma dos parámetros y los concatena antes de devolver la resultante en el programa de llamada.

<html>
   <head>  
      <script type = "text/javascript">
         function concatenate(first, last) {
            var full;
            full = first + last;
            return full;
         }
         function secondFunction() {
            var result;
            result = concatenate('Zara', 'Ali');
            document.write (result );
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "secondFunction()" value = "Call Function">
      </form>      
      <p>Use different parameters inside the function and then try...</p>  
  </body>
</html>

Salida

Hay mucho que aprender sobre las funciones de JavaScript, sin embargo, hemos cubierto los conceptos más importantes en este tutorial.