JavaScript Gets Weird When You Go Deeper.

Values are not always as simple as they look.

Consider a primitive value.

let a = 10;
let b = a;

b = 20;

console.log(a);
console.log(b);

The result is straightforward because primitive values such as numbers are copied as values.

Objects introduce a different mental model.

Two variables can point to the same object.

const user = {
  name: "Prince"
};

const anotherUser = user;

anotherUser.name = "Alex";

console.log(user.name);

The surprising part is that changing `anotherUser` also changes what `user` sees.

The reason is not that JavaScript randomly copied the object. Both variables refer to the same object.

Understanding this becomes extremely important when working with React state, arrays, objects and immutable updates.

Then functions start remembering things.

A closure is one of those concepts that sounds complicated until you see it.

function createCounter() {

  let count = 0;

  return function () {
    count++;
    return count;
  };

}

const counter = createCounter();

console.log(counter());
console.log(counter());
console.log(counter());

The `createCounter` function has finished executing, but the returned function can still access `count`.

That remembered access is the important part.

Closures appear everywhere in modern JavaScript: callbacks, event handlers, timers, modules and React hooks.

Once closures make sense, many JavaScript patterns stop looking like magic.

JavaScript does not simply execute everything from top to bottom.

Consider this:

console.log("A");

setTimeout(() => {
  console.log("B");
}, 0);

console.log("C");

The output is:

A
C
B

The zero-millisecond timeout does not mean “execute immediately.” It means the callback can be scheduled after the current synchronous work is completed.

The event loop is where the weirdness starts making sense.

JavaScript executes synchronous code using its call stack. Asynchronous operations can be handled by the surrounding runtime, and callbacks are scheduled to run when the relevant execution conditions are met.

The browser and JavaScript runtime provide mechanisms around the language that allow timers, network requests and other asynchronous operations to work without blocking the entire application.

This is one of the reasons JavaScript can handle large numbers of I/O-oriented operations while maintaining a responsive interface.

Promises make asynchronous results easier to compose.

A promise represents an eventual result of an asynchronous operation.

fetch("/api/products")
  .then(response => response.json())
  .then(products => {
    console.log(products);
  })
  .catch(error => {
    console.error(error);
  });

Modern JavaScript often uses `async` and `await` because it can make asynchronous control flow easier to read.

async function loadProducts() {

  try {

    const response = await fetch(
      "/api/products"
    );

    const products = await response.json();

    console.log(products);

  } catch (error) {

    console.error(error);

  }

}

The important thing is not choosing one syntax because it looks modern. The important thing is understanding that the operation is asynchronous and that the result is not available immediately.

The mistakes that made JavaScript finally click.

JavaScript becomes easier when you build a mental model.

I used to approach difficult JavaScript behavior by trying to remember the answer.

That works until the next slightly different example appears.

A better approach is to ask:

What value is this?

Is this a reference?

Which scope owns this variable?

Is this code synchronous?

When is this callback scheduled?

What is currently on the call stack?

Those questions turn confusing behavior into something you can reason about.

You don't need to memorize JavaScript. You need to understand it.

The language has many details, but the deeper concepts connect.

References explain mutation. Scope explains closures. Closures explain many callback patterns. The runtime explains asynchronous behavior. Promises provide a structured way to work with asynchronous results.

Once those pieces start connecting, JavaScript stops feeling random.