JavaScript Fundamentals for Backend Developers

JavaScript Is Not PHP

As a Laravel developer, you think in request/response cycles. JavaScript thinks in events and callbacks. Understanding this difference is the key to writing frontend code that works.

The Event Loop

JavaScript is single-threaded — it runs one piece of code at a time. But it handles asynchronous operations through the event loop:

1. JavaScript executes synchronous code from the call stack.
2. Asynchronous operations (fetch, setTimeout, event listeners) are handed off to browser APIs.
3. When an async operation completes, its callback is placed in the task queue.
4. When the call stack is empty, the event loop picks the next callback from the queue and executes it.

This is why a setTimeout(fn, 0) doesn't execute immediately — it waits for the current stack to clear. And it's why a long-running synchronous operation freezes the entire UI.

Promises and Async/Await

Promises represent a value that will be available in the future:

fetch('/api/users')
    .then(response => response.json())
    .then(users => console.log(users))
    .catch(error => console.error(error));

Async/await is syntactic sugar that makes promises look synchronous:

async function getUsers() {
    try {
        const response = await fetch('/api/users');
        const users = await response.json();
        console.log(users);
    } catch (error) {
        console.error(error);
    }
}

Both do the same thing. Async/await is almost always more readable.

ES6+ Features You Need

• Arrow functions — const add = (a, b) => a + b; Lexically binds this.
• Destructuring — const { name, email } = user;
• Template literals — `Hello ${name}` (backticks, not quotes).
• Spread/rest — const merged = {...obj1, ...obj2};
• Optional chaining — user?.address?.city (same as PHP's ?->).
• Nullish coalescing — value ?? 'default' (same as PHP's ??).

Vite: Laravel's Build Tool

Vite replaces Laravel Mix (Webpack) as the frontend build tool. It:

• Compiles your JS and CSS from resources/ to public/build/.
• Provides Hot Module Replacement (HMR) during development — changes appear instantly without a full page reload.
• Handles tree-shaking in production — removes unused code from your bundle.

In your Blade template, @vite(['resources/css/app.css', 'resources/js/app.js']) includes the compiled assets. In development, it connects to the Vite dev server. In production, it references the built files.

Key Takeaways

• JavaScript's event loop handles async operations via a single thread + task queue.
• Use async/await over raw promise chains for readability.
• Learn ES6+ syntax — arrow functions, destructuring, template literals, optional chaining.
• Vite is Laravel's build tool. Understand the resources/ → public/build/ pipeline.