JavaScript This Keyword — What does this output?

Why This Question Matters

If you've spent any time in JavaScript, you've probably seen the this keyword. It’s one of those things that seems simple until you actually have to debug it. This specific challenge hits on a classic "gotcha": the difference between calling a function normally and calling it as a constructor.

Many developers assume that if a function starts with a capital letter (like Person), it automatically behaves like a class. It doesn't. JavaScript is flexible—sometimes too flexible—and if you forget a single keyword, the entire behavior of your code shifts. Understanding this is the difference between writing stable code and spending three hours chasing a TypeError because this is pointing to the global window object.

Understanding the Code

Let's look at the snippet again:

function Person(name) {
  this.name = name
}
const alice = Person("Alice")
console.log(alice)
console.log(window.name)

At first glance, it looks like we're creating a new user object. But look closely at how Person("Alice") is invoked. There is no new keyword.

In JavaScript, when you call a function without new, it's just a regular function call. It executes its logic and returns a value. Since the Person function doesn't have an explicit return statement, it returns undefined by default.

But what about this.name = name?

Since the function was called normally (not as a constructor), this doesn't point to a new empty object. Instead, it points to the global execution context. In a browser environment, that's the window object.

So, instead of creating a new person named Alice, the code is actually doing this: window.name = "Alice". You've accidentally modified the global state of your application.

Finding the Correct Answer

The correct answer is Option B (which typically shows alice as undefined and window.name as "Alice").

Here is why the other possibilities are wrong:

1. It's not an object: You might think alice becomes { name: "Alice" }. That only happens if you use const alice = new Person("Alice"). The new keyword tells JS to create a blank object, bind this to it, and return that object automatically.
2. It's not a ReferenceError: Calling a function that uses this isn't illegal; it's just often a mistake. The code runs perfectly fine; it just doesn't do what the author intended.

The actual flow:
- Person("Alice") is called.
- this defaults to window.
- window.name is set to "Alice".
- The function returns undefined.
- alice is assigned undefined.

Common Mistakes Developers Make

The biggest mistake here is assuming naming conventions dictate behavior. In languages like Java or C#, a class is a distinct entity. In JavaScript (especially before ES6 classes), a constructor is just a function. Capitalizing it is a signal to other developers ("Hey, use new with this!"), but the JavaScript engine ignores your naming conventions.

Another common trip-up is Strict Mode. If this code were running in 'use strict';, the result would be completely different. In strict mode, this is not allowed to default to the global object. If you call Person("Alice") in strict mode, this would be undefined, and the line this.name = name would throw a TypeError.

Real-World Usage

You won't see many people writing constructors like this in 2024—most of us use class syntax now. However, this "missing new" problem is exactly why the class keyword was introduced. If you try to call a JavaScript class without new, the engine throws a clear error immediately: *"Class constructor Person cannot be invoked without 'new'"*.

But you'll still see this pattern in older codebases or when working with certain libraries that use "factory functions." A factory function is a function that returns an object explicitly:

function createPerson(name) {
  return {
    name: name
  };
}
const alice = createPerson("Alice"); // No 'new' needed, no global pollution.

This is generally preferred over constructors because it avoids the this headache entirely.

Key Takeaways

- The new keyword is magic: It creates the object, binds this, and handles the return value. Without it, you're just running a function.
- Global Pollution: Calling a constructor without new in non-strict mode attaches properties to the window object, which can lead to nightmare bugs in larger apps.
- Strict Mode saves you: Always use 'use strict'; (or use ES modules, which are strict by default) to catch these mistakes early.
- Prefer Factories or Classes: Use the class syntax for clear intent or factory functions to avoid this binding issues altogether.