0
0
Javascriptprogramming~10 mins

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

Choose your learning style9 modes available
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
StepCode'this' ValueActionOutput
1console.log(this);Window (browser) or global object (Node.js)Evaluate 'this' in global scope[object Window] (browser) or [object global] (Node.js)
2var a = 10;Same as beforeDeclare global variable 'a'No output
3console.log(this.a);Same as beforeAccess global variable 'a' via 'this'10 (browser) or 10 (Node.js)
4EndSame as beforeNo more codeExecution stops
💡 All code executed; global 'this' remains the global object.
Variable Tracker
VariableStartAfter Step 2Final
thisWindow (browser) or global object (Node.js)Window (browser) or global object (Node.js)Window (browser) or global object (Node.js)
aundefined1010
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
Test your understanding
Look at the execution_table step 1, what does 'this' refer to in a browser?
AUndefined
BEmpty object {}
CWindow object
DNull
💡 Hint
Check the 'this' Value column in step 1 of execution_table.
At which step does the variable 'a' get assigned the value 10?
AStep 2
BStep 1
CStep 3
DStep 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?
A10
Bundefined
CReferenceError
Dnull
💡 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.