Javascript lado cliente. Cómo hacer que se ejecute de forma secuencial el código

Como sabemos, JavaScript es un lenguaje del lado del cliente, aunque también puede usarse en el lado del servidor con tecnologías como Node.js, Jaxer, RingoJS, entre otros. En este caso, nos enfocaremos en su uso del lado del cliente, específicamente en cómo ejecutar de manera secuencial una serie de funciones. A diferencia de la mayoría de los lenguajes, JavaScript no espera a que una función o instrucción anterior termine de ejecutarse antes de proceder con la siguiente.

Es común que necesitemos obtener primero el resultado de ciertos procesos antes de continuar, para poder tomar decisiones basadas en esos resultados. Existen varios métodos para lograr esto:

1. Funciones Sincrónicas

Si las funciones son sincrónicas (es decir, se ejecutan por completo antes de pasar a la siguiente función), simplemente puedes llamarlas una tras otra:

function functionOne() {
    console.log('Function One executed');
}

function functionTwo() {
    console.log('Function Two executed');
}

function functionThree() {
    console.log('Function Three executed');
}

// Execute sequentially
functionOne();
functionTwo();
functionThree();

2. Funciones Asincrónicas con Promises

Si las funciones son asincrónicas (por ejemplo, si implican solicitudes de red, temporizadores, u otras operaciones no bloqueantes), necesitarás asegurarte de que se ejecuten una tras otra utilizando promises.

function functionOne() {
    console.log('Function One executed');
}

function functionTwo() {
    console.log('Function Two executed');
}

function functionThree() {
    console.log('Function Three executed');
}

// Execute sequentially
functionOne();
functionTwo();
functionThree();

3. Funciones Asincrónicas con async/await:

Usando la sintaxis async/await, que es más legible y moderna, puedes asegurarte de que las funciones asincrónicas se ejecuten de manera secuencia:

async function functionOne() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Function One executed');
            resolve();
        }, 1000);
    });
}

async function functionTwo() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Function Two executed');
            resolve();
        }, 1000);
    });
}

async function functionThree() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Function Three executed');
            resolve();
        }, 1000);
    });
}

// Execute sequentially
async function executeSequentially() {
    try {
        await functionOne();
        await functionTwo();
        await functionThree();
    } catch (error) {
        console.error(error);
    }
}

executeSequentially();

Resumiendo:

Enfoque Sincrónico: Las funciones se llaman una tras otra porque se ejecutan por completo antes de pasar a la siguiente.
Promises: Cada función devuelve una promise, y se utiliza .then() para encadenar estas promises, asegurando que se ejecuten en orden.
async/await: Esto es azúcar sintáctico sobre las promises, lo que te permite escribir código asincrónico que parece sincrónico. Cada await pausa la ejecución hasta que la promise se resuelve.