The Global Object

Advanced Functions: Global Object

---

---

Can you explain what the global object is in JavaScript?

View Answer:

Interview Response: The global object in JavaScript is a top-level container for global variables, functions, and objects. It's automatically created and accessible throughout the entire code, with 'window' in browsers and 'global' in Node.js.

Code Example:

console.log('Hello');
// is the same as
window.console.log('Hello');

var foo = 'foobar';
foo === window.foo; // Returns: true

function greeting() {
  console.log('Hi!');
}

window.greeting(); // It is the same as the normal invoking: greeting();

// The global function greeting was stored in the window object, like this:
greeting: function greeting() {
  console.log('Hi!');
}

---

note

(In Node.js, this is not the case.) The global object's interface depends on the execution context in which the script is running.

---

How should you use JavaScript's global (window) object?

View Answer:

Interview Response: You should use JavaScript's global (window) object sparingly by avoiding the creation of global variables and functions, which can cause naming conflicts and make code harder to maintain. Instead, utilize local scope, closures, and JavaScript modules to organize and separate code.

Technical Response: It is typically discouraged to use global variables, which gets kept to a minimum. The code design in which a function receives "input" variables and generates a specific "result" is more straightforward, less prone to mistakes, and simpler to verify than the code design in which external or global variables get used. The global object gets used to test for support of contemporary language features. This approach is typical in Polyfills to guarantee that user interaction results in an equitable response.

Code Example:

if (!window.Promise) {
  console.log("Your browser is really old!");
}

if (!window.Promise) {
  window.Promise = ... // custom implementation of the modern language feature
}

---

How does the Global Object differ between a browser environment and a Node.js environment?

View Answer:

Interview Response: In a browser, the Global Object is window, whereas in Node.js, it's global. The properties and methods differ accordingly; e.g., window.alert() in browsers, global.require() in Node.js

Code Example:

Here are examples to show how the global object is used in both environments:

1. Browser environment:

console.log(window); // Outputs the window object and its properties
window.setTimeout(() => console.log('Browser timer'), 1000); // Sets a timer

2. Node.js environment:

console.log(global); // Outputs the global object and its properties
global.setTimeout(() => console.log('Node.js timer'), 1000); // Sets a timer

---

note

Please note that setTimeout function can be called directly without referencing the global object in both environments.

---

Can you explain the difference between the 'window', 'self', and 'globalThis' properties in a browser context?

View Answer:

Interview Response: In a browser context, 'window' represents the global object for web pages, 'self' refers to the current context (Window or Worker), and 'globalThis' unifies global objects across different environments, ensuring compatibility.

Code Example:

console.log(window === self); // Outputs: true
console.log(self === globalThis); // Outputs: true
console.log(window === globalThis); // Outputs: true

window.myVariable = 'Hello, JavaScript!';
console.log(self.myVariable); // Outputs: 'Hello, JavaScript!'
console.log(globalThis.myVariable); // Outputs: 'Hello, JavaScript!'

In this example, all three properties - window, self, and globalThis - refer to the same global object, so they're equal and have access to the same variables.

---

How does the Global Object store global variables and functions in JavaScript?

View Answer:

Interview Response: The Global Object stores global variables and functions as its properties, making them accessible throughout the entire JavaScript program, regardless of the current scope or context.

Code Example:

Here's an example to illustrate how the Global Object stores global variables and functions:

// Declare a global variable
var globalVar = "Hello, World!";

// Declare a global function
function globalFunc() {
  console.log("This is a global function.");
}

// Accessing global variable and function via the global object (window in a browser context)
console.log(window.globalVar); // Outputs: "Hello, World!"
window.globalFunc(); // Outputs: "This is a global function."

In this code, globalVar and globalFunc are declared at the top-level, outside of any functions, so they become properties of the Global Object. In a browser environment, the Global Object is window, so we can access these variables and functions as properties of window.

---

What is the significance of the 'undefined' property in the Global Object?

View Answer:

Interview Response: The 'undefined' property in the Global Object represents the primitive value 'undefined', used to indicate uninitialized variables, missing parameters, or non-existent properties, helping to distinguish them from actual values.

Code Example:

Here's an example showing the usage of undefined:

var myVariable;

console.log(myVariable); // Outputs: undefined
console.log(myVariable === window.undefined); // Outputs: true

In this example, myVariable is declared but not assigned a value, so its value is undefined. The comparison myVariable === window.undefined is used to check if a variable has been assigned a value or not.

---

Can you briefly explain the 'eval()' function in the Global Object, and why it is considered unsafe to use in most cases?

View Answer:

Interview Response: The 'eval()' function in the Global Object executes a string of code as JavaScript. It is considered unsafe as it can execute arbitrary code and cause security vulnerabilities, such as cross-site scripting (XSS) attacks.

Code Example:

Here's a simple example of using eval(), along with an example of why it's potentially dangerous:

// Safe use of eval
var x = 1;
var y = 2;
var result = eval('x + y');
console.log(result); // Outputs: 3

// Unsafe use of eval
var userProvidedData = "'; alert('This is a malicious script!'); var ignoredData='";
eval('var dataFromServer = \'' + userProvidedData + '\'');

In the second example, a malicious user could inject a script into userProvidedData. When eval() executes, it interprets the injected script as code and runs it, which could lead to potential security breaches.

---

How can you access the Global Object in different JavaScript environments?

View Answer:

Interview Response: In a browser environment, the Global Object is accessed using 'window' or 'self', while in Node.js it is accessed using 'global'. The 'globalThis' property can be used in both.

Code Example:

Here are examples showing how to access the Global Object in different environments:

1. In a browser environment:

console.log(window); // Outputs the window object and its properties

2. In Node.js environment:

console.log(global); // Outputs the global object and its properties

3. In any environment:

console.log(globalThis); // Outputs the global object and its properties

Each of these examples logs the Global Object and its properties to the console, demonstrating how to access the Global Object in different JavaScript environments.

---

What are some best practices when working with the Global Object to avoid conflicts and issues in your code?

View Answer:

Interview Response: Best practices to avoid issues with the Global Object include avoiding the creation of global variables and functions, using local scope and closures, leveraging JavaScript modules, and accessing built-in methods when necessary. Also, consider using a linter or strict mode.

Code Example:

Here are examples demonstrating good practices.

1. Using Local Scope:

function exampleFunction() {
  var localVariable = "I'm local!";
  console.log(localVariable); // Outputs: "I'm local!"
}

exampleFunction();
console.log(window.localVariable); // Outputs: undefined

2. Using 'strict mode':

"use strict";

accidentalGlobal = "This will throw an error"; // Outputs: Uncaught ReferenceError: accidentalGlobal is not defined

3. Using Modules (In Node.js):

// myModule.js
var moduleVariable = "I'm in a module!";
exports.moduleVariable = moduleVariable;

// app.js
var myModule = require('./myModule');
console.log(myModule.moduleVariable); // Outputs: "I'm in a module!"

The first example keeps variables out of the global scope. The second prevents accidental globals in 'strict mode'. The third uses modules to encapsulate code.

---

What is the role of the Global Object in JavaScript modules and how does it affect the scope of variables and functions?

View Answer:

Interview Response: In JavaScript's module system, each module has its own scope, and variables and functions are not automatically added to the Global Object. This improves code organization and reduces naming conflicts. Modules can expose their functionality using exports.

Code Example:

Module A (moduleA.js)

let moduleVariable = "Module A variable";

function moduleFunction() {
  console.log("Module A function");
}

export { moduleVariable, moduleFunction };

Module B (moduleB.js)

import { moduleVariable, moduleFunction } from './moduleA.js';

console.log(moduleVariable); // Outputs: "Module A variable"
moduleFunction(); // Outputs: "Module A function"

Accessing moduleA's content from Global Object (browser console)

console.log(window.moduleVariable); // Outputs: undefined
console.log(window.moduleFunction); // Outputs: undefined

In this example, moduleVariable and moduleFunction are only accessible within module A unless they are exported. Even after being exported, they aren't added to the Global Object and are only accessible in modules they are explicitly imported into.

---