this in global scope in Javascript - Step-by-Step Execution

Concept Flow - this in global scope

Start: Global Scope

↓

Evaluate 'this'

↓

In Browser: 'this' is Window Object

↓

In Node.js: 'this' is global object

↓

Use 'this' (browser) or global (Node.js) to access global properties

↓

End

In the global scope, 'this' refers to the global object: 'window' in browsers and the global object in Node.js.

Execution Sample

Javascript

console.log(this);
var a = 10;
console.log(this.a);

Logs the global 'this' and accesses a global variable via 'this' (10 in browser, 10 in Node.js).

Execution Table

Step	Code	'this' Value	Action	Output
1	console.log(this);	Window (browser) or global object (Node.js)	Evaluate 'this' in global scope	[object Window] (browser) or [object global] (Node.js)
2	var a = 10;	Same as before	Declare global variable 'a'	No output
3	console.log(this.a);	Same as before	Access global variable 'a' via 'this'	10 (browser) or 10 (Node.js)
4	End	Same as before	No more code	Execution stops

💡 All code executed; global 'this' remains the global object.

Variable Tracker

Variable	Start	After Step 2	Final
this	Window (browser) or global object (Node.js)	Window (browser) or global object (Node.js)	Window (browser) or global object (Node.js)
a	undefined	10	10

Key Moments - 2 Insights

Why does 'this' refer to different objects in browser and Node.js?

Because in the browser global scope, 'this' points to the 'window' object, but in Node.js global scope, 'this' points to the global object. See execution_table step 1.

How can 'this.a' access the variable 'a' declared with var?

Variables declared with 'var' in global scope become properties of the global object, so 'this.a' accesses the same variable in both browsers and Node.js. See execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution_table step 1, what does 'this' refer to in a browser?

A Undefined

B Empty object {}

C Window object

D Null

💡 Hint

Check the 'this' Value column in step 1 of execution_table.

At which step does the variable 'a' get assigned the value 10?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the Code and Action columns in execution_table.

If 'a' was declared with 'let' instead of 'var', what would 'this.a' output at step 3?

A 10

B undefined

C ReferenceError

D null

💡 Hint

Variables declared with 'let' do not become properties of the global object.

Concept Snapshot

'this' in global scope:
- In browsers, 'this' is the global Window object.
- In Node.js, 'this' is the global object.
- Variables declared with 'var' become properties of the global object (accessible via 'this').
- Access global variables via 'this.variableName' (browsers and Node.js).
- 'let' and 'const' do NOT attach to 'this'.

Full Transcript

In JavaScript global scope, the keyword 'this' refers to the global object. In browsers, this global object is the Window object, so 'this' points to Window. In Node.js, 'this' in the global scope points to the global object. When you declare a variable with 'var' globally, it becomes a property of this global object, so you can access it using 'this.variableName'. However, variables declared with 'let' or 'const' do not attach to the global object and cannot be accessed via 'this'. This behavior is shown in the execution table where 'this' is logged, then a variable 'a' is declared with 'var', and finally 'this.a' outputs 10 in both browser and Node.js. Understanding this helps avoid confusion about what 'this' means in different environments and how global variables relate to it.

Practice

1. In JavaScript, what does this refer to when used in the global scope (outside any function) in a browser environment?

easy

A. The document object

B. The current function

C. The global object, which is window in browsers

D. Undefined

Solution

1. Step 1: Understand global scope context

   In the global scope, this refers to the global object in JavaScript.

2. Step 2: Identify the global object in browsers

   In browsers, the global object is window, so this points to window.

3. Final Answer:

   The global object, which is window in browsers -> Option C

4. Quick Check:

   this in global scope = window [OK]

Hint: Remember: global this is window in browsers [OK]

Common Mistakes:

• Thinking this is undefined in global scope by default
• Confusing this with the current function
• Assuming this points to document

2. Which of the following is the correct way to check if this in the global scope refers to the window object?

easy

A. console.log(this === document);

B. console.log(this === window);

C. console.log(this === global);

D. console.log(this === null);

Solution

1. Step 1: Recall global this in browsers

   In the browser global scope, this points to the window object.

2. Step 2: Compare this with window

   Using this === window returns true if this is the global object.

3. Final Answer:

   console.log(this === window); -> Option B

4. Quick Check:

   this === window is true in global scope [OK]

Hint: Check this === window to confirm global this [OK]

Common Mistakes:

• Using document instead of window
• Using global which is Node.js specific
• Comparing this to null

3. What will be the output of the following code in a browser's global scope?

console.log(this === window);
'use strict';
console.log(this);

medium

A. true and then global object

B. true and then undefined

C. false and then window object

D. true and then window object

Solution

1. Step 1: Evaluate first console.log before strict mode

   Before 'use strict', this in global scope equals window, so this === window is true.

2. Step 2: Evaluate second console.log after strict mode

   Strict mode affects this inside functions, but in global scope this still points to window, so it logs the window object.

3. Final Answer:

   true and then window object -> Option D

4. Quick Check:

   Global this = window even with strict mode [OK]

Hint: Strict mode doesn't change global this in browsers [OK]

Common Mistakes:

• Assuming this becomes undefined in global scope with strict mode
• Confusing strict mode effects inside functions vs global scope
• Thinking this equals global in browsers

4. Consider this code snippet:

'use strict';
function checkThis() {
  console.log(this);
}
checkThis();

What is the problem if you want to log the global object using this inside checkThis?

medium

A. this is undefined because of strict mode inside the function

B. this points to the global object as expected

C. this points to the function itself

D. Syntax error due to strict mode

Solution

1. Step 1: Understand strict mode effect inside functions

   In strict mode, this inside a regular function called without an object is undefined.

2. Step 2: Check the function call context

   The function checkThis is called directly, so this is not bound to the global object.

3. Final Answer:

   this is undefined because of strict mode inside the function -> Option A

4. Quick Check:

   Strict mode makes this undefined in functions called globally [OK]

Hint: Strict mode sets this to undefined inside functions [OK]

Common Mistakes:

• Assuming this always points to global object
• Thinking strict mode causes syntax errors here
• Confusing function this with global this

5. You want to create a global variable myGlobal and access it via this.myGlobal in the global scope under strict mode. Which code snippet correctly achieves this in a browser environment?

hard

A. window.myGlobal = 10; console.log(this.myGlobal);

B. let myGlobal = 10; console.log(this.myGlobal);

C. const myGlobal = 10; console.log(this.myGlobal);

D. var myGlobal = 10; console.log(this.myGlobal);

Solution

1. Step 1: Understand variable declaration and global object

   In strict mode, variables declared with var, let, or const do not become properties of window.

2. Step 2: Check how to explicitly add property to global object

   Assigning window.myGlobal = 10 explicitly adds myGlobal as a property of the global object.

3. Final Answer:

   window.myGlobal = 10; console.log(this.myGlobal); -> Option A

4. Quick Check:

   Only window.myGlobal ensures this.myGlobal exists globally [OK]

Hint: Use window.myGlobal to add global property reliably [OK]

Common Mistakes:

• Using let or const expecting global this property
• Assuming var always adds property to this in all contexts
• Not understanding difference between variable and global object property