Synchronous Programming

Introduction

Synchronous programming in JavaScript processes the code line by line, blocking execution on one task until the previous task is completed. This brings a very predictable, simple control flow into play but can lead to blocking, which pauses the application for a while during longer operations. It is ideal for simple tasks and initialization code that needs to run in specific order. It waits for each operation to complete before moving on to the next. Hence, this approach is predictable, but it has implications for performance and user experience , usually in web-applications.

The Basic of Synchronous Programming Execution

In this, tasks are performed one at a time. It simply means that each line of code will be executed in sequence and the program halts until the current operation gets completed. Here’s a simple example:

console.log("Start");

for (let i = 0; i < 1000000000; i++) {
    // Simulating a time-consuming task
}

console.log("End");

In above code, "Start" will be printed, then the loop runs, which may take some time, and finally "End" will be printed. As we can see, the loop is blocking the main thread , and no other operations can take place while this is going on.

Synchronous JavaScript – How the Function Execution Stack Works

One critical part that must be understood about synchronous programming in JavaScript is the function execution stack. A function execution stack is sometimes simply called a call stack, and it is used to track function calls in a script, making sure they run in order.

Whenever a function is called, it is pushed on top of the stack. The function code is executed by the JavaScript engine, and after completing the function.

function first() {
    console.log("First function");
}

function second() {
    first();
    console.log("Second function");
}

function third() {
    second();
    console.log("Third function");
}

third();

Now let us break down the execution step-by-step to understand the output:

• We call the third() function.
• The second() function is called inside the third() function.
• The first() function is called from the second() function.
• \”First function\” is printed on the console by the first() function.
• After first() completes, control returns to second(), which logs \”Second function\” to the console.
• After second() completes, control returns to third(), which then logs \”Third function\” to the console.

So, the output of the code will be:

First function
Second function
Third function

In above code , third() calls second(), which in turn calls first(). The call stack handles these function calls by pushing and popping them in sequence, ensuring each function completes before the next one starts.

Pros and Cons of Synchronous Programming

When to use Synchronous Programming?

• For simple and straight forward task that execute quickly.

Example :

// A simple script to calculate the sum of two numbers
const num1 = 5;
const num2 = 10;
const sum = num1 + num2;
console.log(`The sum of ${num1} and ${num2} is ${sum}.`);
//Output will be 5 + 10 = 15

• Setting up configurations or loading essential resources at the start of an application which can be done synchronously.

// Initialization code for a simple application
const config = loadConfig(); // Assume this function 
// loads configuration settings synchronously
initializeDatabaseConnection(config); // Assume this function 
// initializes the database connection synchronously
console.log("Initialization complete. Application is ready to start.");

// Function definitions for demonstration purposes
function loadConfig() {
    // Simulate loading configuration settings
    return { dbHost: "localhost", dbPort: 3306 };
}

function initializeDatabaseConnection(config) {
    // Simulate initializing a database connection
    console.log(`Connecting to database at ${config.dbHost}:${config.dbPort}...`);
}
//Output will be Connecting to database at localhost:3306...
//Initialization complete. Application is ready to start.

Example: Reading User Input

In this code waits for the user to input their name before continuing:

const name = prompt("Enter your name:");
console.log(`Hello, ${name}`);
//Output as you will input Simple when it asks for input the output will be Hello Simple

Conclusion

Synchronous programming in JavaScript is a very simple way to perform tasks consecutively so that the flow of control is predictable. This not only allows easier code reading and debugging but also causes performance problems, especially for web applications, because blocking a main thread affects user experience in a bad way. However, knowing how and when to use synchronous programming effectively with other asynchronous techniques enables developers to find a balance between simplicity and performance to create robust, responsive JavaScript applications that cater to a wide range of use cases.

Frequently Asked Questions