Learn JavaScript Fundamentals-Global Scope

JavaScript fundamentals series Scopes, Hoisting, Closures

Photo by Joshua Sortino on Unsplash

If you are seeing JavaScript as a game and planning to become a professional player like I do, you need to understand the rules perfectly. In order to help you with that, I am planning to write a series about JavaScript’s maybe the most important concepts; Scopes, Hoisting and Closures and this article will be about the Global Scope.

For a simple entry to the subject, let’s define what scope is and why scope is that important? Scopes are the way to define where the variables are accessible. If you understand scopes, you can make your variables and functions accessible when you want them to be or where you want them to be which gives you a control that you are supposed to have in JavaScript. Definition may not be super clear, hopefully these articles will make more clear as we go through. In JavaScript, there are two types of scope; Global Scope and Local Scope.

I think MDN Web Docs gives great explanation for the global scope;

In a programming environment, the global scope is the scope that contains, and is visible in, all other scopes. In client-sideJavaScript, the global scope is generally the web page inside which all the code is being executed.

What that means is that if you define a variable in global scope, you make that variable available globally, you can access it in all scopes. All variables or functions created inside global object are members of Global Object. This global object is different depending on the environment JavaScript runs. In Node.js, global object is equal to global whereas in browsers it is window.

To check window object in the browser, simply write window and enter to the console. You can see that it has a lot already. Those are the built in ones that are available. Some of them may be even familiar. Window object does not only store your globally defined variables it also has lots of built in properties, methods and so on. Even document object that we use a lot, is property of Window Object.

To explain the difference between Window Object and Document Object, as it can be confusing, Document Object is the small one in this comparison. It represents the DOM which is the root of the HTML. Window Object is entirely different, it holds information like window.history, window.location and window.document. Similarly, the difference can be caught in the difference between BOM(Browser Object Model) and DOM(Document Object Model).

BOM is the way for JavaScript to talk to the browser. It involves objects like screen, history, navigator, location and document. DOM is the representation of all HTML document and it is part of BOM.

Window Object is simply the top level object. You can not create higher scope than Window Object hierarchically. It is the representation of the browser window that the page is displayed. It is created by the browser, and it is a browser object not JavaScript object. It holds all those built in ones and also the ones that we create globally. If you would like to test it, open up your console and write a global function;

function forTesting(){
  console.log(‘I am a global function’);
}

Now, write window and enter to the console. Scroll down to F, you can see that Window Object now has your global function. Another way to test that, you can call your function like this;

forTesting()
// I am a global function
window.forTesting()
// I am a global function

As you can see, the result is the same.

To understand how Window Object works, you can try to open and close one. Open up console and write;

window.open()

Then inside the opened window, in the console;

window.close()

There are also methods that you can use to do some of the cool things with Window Object;

screen.width // returns the width of the screen
screen.height // returns the height of the screen
location.href // returns the URL
location.hostname // returns the domain name
history.back() // goes back in the browser
history.forward() // goes forward in the browser
alert() // display alert box
prompt() // display dialog box

If you would like to read more about JavaScript Fundamentals, please take a look at the Learn JavaScript Fundamentals Series.

1. Global Scope
2. Local Scope
3. Scope, Context, Execution Context

Happy Coding!!!