Home JavaScript - Sync and Async
Post
Cancel

JavaScript - Sync and Async

Ah, the classic sync vs. async debate in Node.js—let’s break it down in a way that makes it easy to grasp. The difference between synchronous (sync) and asynchronous (async) comes down to how and when things happen in your program.

Code Breakdown

1
2
3
4
5
6
7
8
const fs = require('fs');

// Synchronous file read
console.log(fs.readFileSync('./text_1.txt').toString());

// Asynchronous file read
fs.readFile('./text_1.txt', (err, data) => console.log(data.toString()));


1. Synchronous (Sync)

What Happens?

  • fs.readFileSync:
    • The program stops and waits until the file is completely read.
    • Once the file is read, the program proceeds to the next line.
  • Blocking Behavior:
    • No other code executes during the file read operation. The program is effectively “blocked” until the operation completes.

      Example Walkthrough:

      ```javascript console.log(fs.readFileSync(‘./text_1.txt’).toString());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1. The program reaches the `fs.readFileSync` line.
2. It reads the file (`./text_1.txt`) and converts its content to a string.
3. Only after the file has been read and processed does the program move to the next line.
### **Pros**:
- Simpler to understand and work with.
- Suitable for small, quick operations where blocking is acceptable.
### **Cons**:
- If the file reading takes a long time, your program freezes during this operation.
- Poor choice for server applications where responsiveness is crucial.

---

### **2. Asynchronous (Async)**
### **What Happens?**
- **`fs.readFile`**:
	- The program starts the file read operation but **does not wait** for it to complete.
	- Instead, it registers a **callback** to be executed once the operation is finished.
	- Meanwhile, the program continues executing other code.
### **Example Walkthrough**:
```javascript
fs.readFile('./text_1.txt', (err, data) => console.log(data.toString()));

  1. The program calls fs.readFile to start reading the file.
  2. Immediately moves on to the next line of code without waiting.
  3. Once the file is read, the callback function is triggered, and data.toString() is logged.

    Pros:

    • Non-blocking, so other tasks can execute while waiting for the file operation to finish.
    • Ideal for high-performance, responsive applications like servers.

      Cons:

    • Requires handling callbacks (or Promises), which can make the code harder to read.
    • Debugging async code can sometimes be trickier.

Comparison

AspectSynchronousAsynchronous
Execution BehaviorBlocks the program until the operation finishes.Does not block; moves on while waiting.
ComplexitySimpler to write and debug.Requires callbacks, Promises, or async/await.
ResponsivenessFreezes during long operations.Remains responsive, handles multiple tasks.
Use CaseCLI tools, simple scripts.Web servers, real-time apps, or I/O-heavy tasks.

Output Order

Let’s say ./text_1.txt contains "Hello, World!". Here’s what happens when you run the code:

1
2
3
4
5
6
7
8
9
10
const fs = require('fs');

// Synchronous file read
console.log('Sync:', fs.readFileSync('./text_1.txt').toString());

// Asynchronous file read
fs.readFile('./text_1.txt', (err, data) => console.log('Async:', data.toString()));

console.log('Done!');

Output:

```plain text Sync: Hello, World! Done! Async: Hello, World!

```

  • Why?
    • The sync operation blocks, so it completes first.
    • The async operation starts but doesn’t finish before the console.log('Done!') executes.

When to Use Sync vs. Async

  • Synchronous:
    • Quick scripts, command-line tools, or when the task won’t cause significant delay.
    • Example: Reading a config file during program startup.
  • Asynchronous:
    • Always prefer async in production environments, especially for servers handling multiple requests.
    • Example: Reading or writing files on a web server, database queries, network requests.

If you’re ready to dive deeper, we can explore how to modernize async code using Promises or async/await. Let me know if you want to level up further! 😉

This post is licensed under CC BY 4.0 by the author.