The Global Object & Built In Functions

Open the project folder

Function example

Lesson 1 starter file has an example here which we have already used earlier:

let bread = ['flour', 'yeast', 'salt', 'water'];
let brownies = ['butter', 'chocolate', 'flour', 'eggs', 'sugar'];

function checkAllergies(recipe, ingredient) {
  const hasIngredient = recipe.includes(ingredient);
  return hasIngredient;
}

This has 2 arrays, and we created a function which takes in both the recipe, and an ingredient. It then checks if the ingredient is included in the recipe. As mentioned earlier, this is called a function declaration.

Create a console log to call this function below this code:

console.log(checkAllergies(bread, 'flour'));

We know we can call this function by it's name because it is present inside this file. But what about if we called this function from another location, such as a different JavaScript file, would it work?

Calling functions from multiple files

Let’s find out:

And in this new file, we can check the brownies:

// script.js
console.log(checkAllergies(brownies, 'sugar'));

As we discovered earlier, we also need to link this script to the index page:

// index.html
<script>
  ...
  console.log(checkAllergies(bread, 'flour'));
</script>
<script src="script.js"></script> // link the script.js

We now have a function call from 2 locations. In the console you should see 2 results, one from the index.html and one from the script.js. So how come we have access to something in another file?

The global object

Well, when we create a function like this, it becomes part of the global object. We have talked a lot about objects and object types, but the global object is the big one. It is the main object where globally available properties and functions are accessible from. This may sound complex, but you can think of it as the main object, and then we can use parts of it from anywhere.

JavaScript works in the browser, and we can access this global object using window. You may have also heard of Node.js, which is a way to run JavaScript on the server. For Node.js, this window does not apply since it does not have a browser window. Instead, it is accessible using the global keyword, but you don’t need to worry about this for now.

To see this window, over to the browser console and type window then enter.

Since window is a global object, it contains lots of properties which you will see if you open it up. Some are functions we can use, there is also properties and objects inside:

alert: ƒ alert()
atob: ƒ atob()
blur: ƒ blur()
btoa: ƒ btoa()
caches: CacheStorage {}
cancelAnimationFrame: ƒ cancelAnimationFrame()
cancelIdleCallback: ƒ cancelIdleCallback()
captureEvents: ƒ captureEvents()
checkAllergies: ƒ checkAllergies(recipe, ingredient)
chrome: {loadTimes: ƒ, csi: ƒ}
clearInterval: ƒ clearInterval()
clearTimeout: ƒ clearTimeout()
...

This is like a list of things we have global access too, some we have already used such as alert, and our custom function checkAllergies. Inside the console we can do a search. Mac users can use command + f, or control + f for Windows users.

Search for “console”, this is the console object we have already used:

console: console
  assert:ƒ assert()
  clear:ƒ clear()
  context:ƒ context()
  count: ƒ count()
  countReset: ƒ countReset()
  createTask: ƒ createTask()
  debug: ƒ debug()
  dir: ƒ dir()
  dirxml: ƒ dirxml()
  error: ƒ error()
  group: ƒ group()
  groupCollapsed: ƒ groupCollapsed()
  groupEnd: ƒ groupEnd()
  info: ƒ info()
  log: ƒ log()
  ...

Open this up and we see a log and table function which we have used. We have also used the alert earlier too. They are available globally which is how we have access to them in our script.

If we wanted to, we can also refer to the window when calling these properties, for example, we could write window.console.log() and it works just the same:

window.console.log(checkAllergies(bread, 'flour'));

Back to the window object in the console, we can also see our own custom function checkAllergies since when we created it, it has been added to the global object.

Variables we create with the var keyword are also placed on here too, but not const or let. But more on this one later.

Built-in functions

JavaScript also has some functions which we don’t need to create first, that are built into the language.

These can be referred to as built in functions or global functions, since they are available to call anywhere in our program from this global object.

An example of these is the parseInt function which you will also find on this window object, along with parseFloat.

Over to the editor we can see how they look, but first remove the script.js and the link to it in the index.html.

First, let’s look at parseInt. parseInt will take a string, and return an integer, which is a whole number. And since these are on this global object, we can just call them from anywhere.

Remember, this function already exists, we do not need to create a function ourselves. Meaning we call it just like any custom function we create, using the parenthesis, and it can also take in a value too. This function takes in a value which we want to convert to an Integer:

console.log(parseInt('10'));

To check we are converting correctly, we can move it to a variable and log the typeof:

const int = parseInt('10');
console.log(typeof int);

Which reveals the type of number. Since it converts to an Integer which is a whole number, it won’t include the numbers after the decimal places:

const int = parseInt(10.001);
console.log(int); // 10

We can also flip this and do the opposite with the String function:

const number = String(5);
console.log(typeof number);

So, we can either create our own functions, or access some built in ones that are provided with JavaScript, and available on the global object.

There are others available too, and we will use more of these globally available functions, properties and objects, which are available on the window object as we progress.