Listado completo de tutoriales

Funciones: anidadas

JavaScript permite definir funciones dentro de otras funciones:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>
    <div id="div1"></div>

    <script>
        function generarListaOrdenada(vec) {
            function comienzo() {
                s = '<ol>';
            }

            function fin() {
                s = s + '</ol>';
            }

            let s = '';
            comienzo();
            for (let f = 0; f < vec.length; f++) {
                s = s + '<li>' + vec[f] + '</li>';
            }
            fin();
            return s;
        }

        let opciones = ['Opción a', 'Opción b', 'Opción c', 'Opción d'];
        document.getElementById('div1').innerHTML = generarListaOrdenada(opciones);
    </script>

</body>

</html>

Como vemos en el ejemplo la función generarListaOrdenada contiene el algoritmo propiamente dicho y además declara dos funciones llamadas comienzo y fin.

Las funciones anidadas solo pueden ser llamadas desde el interior de la función que las contiene. En este ejemplo la función generarListaOrdenada tiene por objetivo generar un string con una serie de marcas HTML que genere una lista ordenada.

Lo primero en la función generarListaOrdenada es declarar las dos funciones anidadas:

            function comienzo() {
                s = '<ol>';
            }

            function fin() {
                s = s + '</ol>';
            }

Pero lo primero que se ejecuta al llamar a la función generarListaOrdenada es:

            let s = '';
            comienzo();
            for (let f = 0; f < vec.length; f++) {
                s = s + '<li>' + vec[f] + '</li>';
            }
            fin();
            return s;

Es decir primero se define la variable local s y se inicializa con un string vacío. Seguidamente se llama a la función comienzo que tiene por objetivo cargar en la variable s el valor '<ol>'.

Cuando finaliza de ejecutarse la función interna continua con el for definido en la función generarListaOrdenada:

            for (let f = 0; f < vec.length; f++) {
                s = s + '<li>' + vec[f] + '</li>';
            }

Finalmente cuando sale del for se llama a la segunda función anidada llamada fin:

            fin();

Las funciones anidadas pueden acceder a las variables locales de la función que las contiene (en este caso pueden acceder a la variable s)

Luego la función generarListaOrdenada completa queda con la sintaxis:

        function generarListaOrdenada(vec) {
            function comienzo() {
                s = '<ol>';
            }

            function fin() {
                s = s + '</ol>';
            }

            let s = '';
            comienzo();
            for (let f = 0; f < vec.length; f++) {
                s = s + '<li>' + vec[f] + '</li>';
            }
            fin();
            return s;
        }

A la función generarListaOrdenada la llamamos luego de definir el arreglo. Cargamos en el elemento div definido dentro de la página el código HTML que genera una lista ordenada:

        let opciones = ['Opción a', 'Opción b', 'Opción c', 'Opción d'];
        document.getElementById('div1').innerHTML = generarListaOrdenada(opciones);

Las funciones anidadas no se las puede llamar desde fuera de la función que las contiene, por ejemplo produce un error si intentamos llamar a la función "comienzo" desde fuera de la función generarListaOrdenada:

        let opciones = ['Opción a', 'Opción b', 'Opción c', 'Opción d'];
        comienzo();  //Error
        document.getElementById('div1').innerHTML = generarListaOrdenada(opciones);

Retornar