Learn JavaScript in Construct, part 7: Objects

27

Index

Tagged

Stats

8,791 visits, 22,525 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 29 Oct, 2021. Last updated 16 Dec, 2021

The global object

In part 5 we noted how variables at the "top level" (not inside any braces) are scoped to the file, and so can't be referenced by other script files. (This is how scope works in modern JavaScript Modules; older "classic" mode scripts work differently.)

What if you do want to have a value stored globally that can even be used in other script files? JavaScript provides a global object, which you can refer to with globalThis, that is always available everywhere. Then if you add a property on the global object, it will be accessible by all scripts. The code below demonstrates adding a global property.

// Add a property on the global object.
globalThis.myGlobal = "Hello world!";

// Logs "Hello world!".
// This will also work in other script files,
// as the global object is available everywhere.
console.log(globalThis.myGlobal);

The use of globalThis is a relatively recent addition to JavaScript. You may see older code using window or self to refer to the global object. These are just other names for the same thing.

In JavaScript, the global object also has a special feature: if you refer to a variable name that doesn't exist anywhere in scope, it will also check the global object for that name. If it is found, it uses that property.

// Add a global property named myGlobal
globalThis.myGlobal = "Initial string";

// Assign myGlobal as if it's a variable
myGlobal = "Hello world!";

// Log myGlobal as if it's a variable
console.log(myGlobal);	// Hello world!

However if the name doesn't exist anywhere in scope and also does not exist on the global object, it causes an error. (This helps you catch typos, as a mis-typed name should result in an error.)

// ReferenceError: doesNotExist is not defined
console.log(doesNotExist);

Note you cannot create a global property without globalThis. You must create global properties by assigning to a property of globalThis, and only then can you access it like a global variable. The following will cause an error if myGlobal was not already created as a property of globalThis.

// ReferenceError: myGlobal is not defined
myGlobal = "Hello world!";

Built-in globals

JavaScript provides quite a few built-in features that can be reached via the global object. In fact we've been using one of these all along: the console object is a property of the global object. It could also be accessed via globalThis, such as:

globalThis.console.log("Hello world!");

However as the console object is guaranteed to always exist on the global object, the globalThis part can be omitted, which is what we've been doing in our code samples.

Back in part 3 we used String(...) and Number(...) to convert between strings and numbers - these are also globals and could also be accessed by globalThis.String(...). But once again there's no need as these are built-in to JavaScript.

There are a wide range of globals built-in to the JavaScript language that you can depend on anywhere you write JavaScript code. There are many more added by browsers, providing a wide range of sophisticated features ranging from networking to accessing peripheral devices like cameras. Other environments such as node.js also add different sets of features. Tools like Construct also provide their own set of features. These sets of features are collectively referred to as Application Programming Interfaces, or APIs. We've covered a very small number so far. Later on this guide will cover several more features that are built-in to JavaScript and so will work everywhere you can JavaScript, as well as a few browser APIs, and some of the APIs specific to Construct.

Conclusion

In this part we've covered:

  • Creating an object
  • Adding and removing object properties
  • Using strings to refer to object properties
  • Using in to check if a property exists
  • Nesting objects
  • The null value
  • Optional chaining with ?.
  • How objects are passed by reference, whereas numbers and strings are passed by value
  • Using the global object via globalThis

There's more to cover about objects, since they're such a fundamental aspect of JavaScript programming. In particular using function properties on objects has some additional unique features. The next part will cover that and some more details about objects in JavaScript.

Learn more

If you want to dig deeper, you can learn more about the features mentioned in this guide at the following MDN Web Docs links:

Part 8

When you're ready to continue, head on to the next part at Learn JavaScript in Construct part 8: Object methods!

Next Tutorial In Course

Learn JavaScript in Construct, part 8: object methods 15:36

Learn how objects and functions can be used together, including how the 'this' keyword works.

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!