<h3 id="heading-how-javascript-code-executes">How JavaScript Code Executes</h3>
JavaScript uses a single-threaded model with an event loop. It executes code in two phases:
<ol>
<li>Creation Phase: Memory allocation for variables and functions.
</li>
<li>Execution Phase: Runs the code line by line.
</li>
</ol>
<h3 id="heading-example">Example:</h3>
<pre><code class="lang-javascript">jsCopyEditconsole.log("Start");

function greet() {
 console.log("Hello!");
}

greet();

console.log("End");
</code></pre>
✅ Execution Order:
<ol>
<li><code>"Start"</code> prints.
</li>
<li><code>greet()</code> is called, and <code>"Hello!"</code> prints.
</li>
<li><code>"End"</code> prints.
</li>
</ol>
🛠 Call Stack Visualization:
<ul>
<li><code>console.log("Start")</code> → Pushed &amp; executed.
</li>
<li><code>greet()</code> → Pushed, executes <code>console.log("Hello!")</code>, then popped.
</li>
<li><code>console.log("End")</code> → Pushed &amp; executed.
</li>
</ul>

### **How JavaScript Code Executes**

JavaScript uses a **single-threaded** model with an **event loop**. It executes code in two phases:

1. **Creation Phase**: Memory allocation for variables and functions.
    
2. **Execution Phase**: Runs the code line by line.
    

### **Example:**

```javascript
jsCopyEditconsole.log("Start");

function greet() {
    console.log("Hello!");
}

greet();

console.log("End");
```

✅ **Execution Order:**

1. `"Start"` prints.
    
2. `greet()` is called, and `"Hello!"` prints.
    
3. `"End"` prints.
    

🛠 **Call Stack Visualization:**

* `console.log("Start")` → Pushed & executed.
    
* `greet()` → Pushed, executes `console.log("Hello!")`, then popped.
    
* `console.log("End")` → Pushed & executed.

Execution Context & Call Stack

How JavaScript Code Executes

Example: