JavaScript's Standard Built-in Objects and the Global Object

Copy Link LinkedIn Message Facebook Email X

In this lesson, you'll embark on an exploration of JavaScript's built-in objects within the browser environment, focusing particularly on understanding the global object, known as Window. Whether you know it or not, if you've followed this course, you've already interacted with Window.

The Browser JavaScript Runtime

JavaScript as a programming language is distinct from the runtime environment in which it operates, such as a web browser. The core language provides the fundamental building blocks — syntax, control structures, data types, and standard objects like Math.

However, when JavaScript is executed within a browser, it's supplemented by a host of additional functionalities. These include Web APIs like the Document Object Model (DOM), XMLHttpRequest, and the fetch API, which are not part of the JavaScript language itself but are provided by the browser to interact with and manipulate web content. You'll be covering these Web APIs in later lessons.

This means that while JavaScript forms the basis of your code, most of the interactive and dynamic features you implement for the frontend actually involve leveraging these browser-provided capabilities. These additions effectively expand the scope of what you can do with JavaScript in web development, allowing it to interact seamlessly with the web page elements and respond to user events, enhancing the overall user experience.

JavaScript also runs in other environments, such as on servers. For instance, Node.js is a JavaScript runtime that you can install on your computer. It has its own range of APIs that are tailored for tasks associated with server-side computing.

The Global Object: Window

At the heart of the browser's JavaScript environment lies the global object, Window. It represents the browser's window, encompassing functionalities beyond just rendering web content. The Window object includes properties and methods for controlling the browser window, accessing the Document Object Model (DOM), managing timers, and handling user interactions, among other capabilities.

When you refresh a page and have a clear console, you'll notice that a window object is already defined:

console.log(window);

Window{window: Window, self: Window, document: document, name: '', location: Location, …}

If you run this on the browser console, you'll be able to expand this object and explore it. All its properties are the built in objects and methods that you'll rely on as a front end JavaScript developer

The Window object is the root of the scope chain in a browser environment. Previously, every global variable and function you defined was actually a property of the Window object:

var hello = "Hello!"

function hey(){
	console.log("Hey!");
}

console.log(window.hello); // "Hello!"
console.log(this.hello); // "Hello!"
console.log(this["hello"]); // "Hello!"

window.hey(); // "Hey!"
this.hey(); // "Hey!"
window["hey"](); // "Hey!"

As you can see, by declaring a var variable or declaring a function in the global scope, you are effectively adding a property to the window global object. You can also reference the window global object with the this keyword if you're in the global scope.

When you declare variables using let and const in JavaScript, they are stored in a different memory space compared to variables declared with var. This distinction is tied to how let and const provide block-level scoping, unlike var, which provides function-level scoping.

let and const provide a more modern approach to variable declaration in JavaScript, offering better scoping rules and preventing some of the common pitfalls associated with var, especially regarding global namespace pollution.

This concept is a foundational aspect of how JavaScript operates in the browser, affecting everything from variable scoping to event handling.

What are Built-In Objects?

Built-in objects in JavaScript are pre-defined objects that provide a plethora of functionalities right out of the box. These objects, such as Array, Date, Math, and many others, are integral to everyday programming tasks in JavaScript. They come with a variety of properties and methods that enable you to perform common tasks like manipulating arrays, handling dates and times, performing mathematical calculations, and much more.

All these built-ins, which include functions, are available from the global scope without referencing, by referencing this, or by calling the window object directly. For example, the humble console:

console.log("Hello!"); // Hello!
window.console.log("Hello!"); // Hello!
this.console.log("Hello!"); // Hello!

As you can see, you can get to the console.log() function through the window object.

There are many built-in objects that provide utilities for everything from parsing and encoding with the JSON Object, to working with dates, with the Date Object.

Historical Context for the Global Object

Early versions of JavaScript had limited functionality with few built-in objects and a basic implementation of the global object. As different browsers started adopting JavaScript, they introduced their own extensions to the language, leading to discrepancies in how JavaScript code behaved across different browsers. This era was marked by the necessity for developers to write different code paths for different browsers. A nightmare!

The introduction of ECMAScript standards, starting with ES1 in 1997, began the process of standardizing JavaScript. This standardization included defining core built-in objects and the behavior of the global object, paving the way for more consistent behavior across browsers. Today, JavaScript's built-in objects like Array, Date, Math, and the global Window object are standardized, with ongoing efforts to enhance and expand their functionalities.

Today, it's much more consistent when trying to make your JavaScript compatible with all browsers, but there are still discrepancies that you'll have to be aware of when developing JavaScript profesionally. For beginners, though, it's enough to get it working on just one browser!

Best Practices

When working with the global object and built-in objects in JavaScript, there are certain best practices can enhance code quality, maintainability, and performance:

1. Minimize Global Variables: Avoid polluting the global scope. It's a matter of keeping things organized. There's already plenty in the global scope! If you have something in the global scope, there should be a good reason for it.

2. Understand this in Context: Be aware of the context in which this is used, especially in global functions, to avoid unintended references to the global object.

3. Avoid Extending Built-In Prototypes: While JavaScript allows you to extend the prototypes of built-in objects, doing so can lead to unexpected behaviors, especially when integrating with third-party libraries or future updates to the JavaScript language.

Summary: Javascript Objects - Native Objects

You've delved into JavaScript's built-in objects within the browser environment, focusing on the Window global object.

• The JavaScript Runtime in browsers supplements the core language with additional functionalities like Web APIs (e.g., DOM, XMLHttpRequest, and fetch). These are crucial for interactive and dynamic front-end development.
• The Global Object: Window is central in the browser's JavaScript environment, providing numerous functionalities like DOM access and user interaction handling.
• Built-In Objects in JavaScript, such as Array, Date, Math, and others, are accessible globally, providing essential functionalities for common programming tasks.
• JavaScript has evolved and the standardization efforts through ECMAScript have brought consistency across different browsers.