JavaScript provides a set of useful global functions that can be called from anywhere in your code. These functions allow you to perform common tasks like encoding/decoding URLs, converting values, evaluating code, and more without needing to reference any specific object. In this comprehensive guide, we’ll take an in-depth look at what makes a function global in JavaScript and explore some of the most useful global functions provided.

What Makes a Function Global in JavaScript

For a function to be considered global in JavaScript, it must be defined in the global scope rather than inside another function or object. There are two main ways to define global functions:

Defined in the Global Scope

Functions defined in the global scope are not attached to any object and can be called from anywhere in your code. For example:

// Global scope
function myFunction() {
  // Function code
} 

// Call from anywhere
myFunction(); 

Since they are not bound to any object, these functions are essentially utility functions that can be easily reused.

Added to the Window Object

The window object is globally available in browser-based JavaScript environments. By adding functions as properties of window, you can effectively make them global:

// Add function to window object
window.myFunction = function() {
  // Function code 
};

// Function now global 
myFunction();

This approach allows you to organize your global functions under the window namespace rather than pollute the global scope.

Core Global Functions in JavaScript

JavaScript provides a core set of useful global functions for evaluation, URI encoding/decoding, and other common tasks:

Evaluation Functions

• eval() – Evaluates a string as JavaScript code and executes it. This can be useful for dynamically executing code but also represents a security risk.
• isFinite() – Determines if a value is a finite number. Safer than comparing to Infinity.
• isNaN() – Checks if a value equates to NaN (Not-a-Number). Often used to validate numbers.
• parseFloat() – Parses a string and returns a floating point number.
• parseInt() – Parses a string and returns an integer.

// Evaluate code
eval("const a = 2; console.log(a);");

// Validate numbers
isFinite(123); // true
isNaN(123); // false 

// Parse strings  
parseFloat("12.34"); // 12.34
parseInt("12"); // 12

URI Encoding/Decoding Functions

• decodeURI() – Decodes a URI by replacing escape sequences.
• decodeURIComponent() – Decodes a URI component.
• encodeURI() – Encodes a URI by escaping special characters.
• encodeURIComponent() – Encodes a URI component.

// Encoding 
encodeURI("http://example.com/path/to/file.html");
// "http://example.com/path/to/file.html"

encodeURIComponent("path/to/file.html");
// "path%2Fto%2Ffile.html" 

// Decoding
decodeURI("http://example.com/path/to/file.html"); 
// "http://example.com/path/to/file.html"

decodeURIComponent("path%2Fto%2Ffile.html");
// "path/to/file.html"

Other Helper Functions

• escape() – Deprecated – Encodes a string.
• unescape() – Deprecated – Decodes an encoded string.

escape("abc123"); 
// "abc123"

unescape("abc123");
// "abc123"

Uses of Global Functions in Web Development

JavaScript’s global functions have some important uses in web development:

Cross-Browser Support

These functions are built into the language itself and are supported consistently across all major browsers without any dependencies. This makes them a good fallback option when newer methods fail or are unavailable.

Quick Encoding/Decoding

The URI encoding/decoding functions provide a quick and simple way to encode or decode strings for use in URLs and query parameters without needing to load an external library.

Eval Alternative

While safer eval alternatives like setTimeout or new Function() exist, eval() remains a quick way to parse and execute simple JavaScript code strings.

Examples of Global Functions in Action

Here are some practical examples of how JavaScript’s global functions can be used:

Validating Form Input

Use isNan() and isFinite() to validate numeric inputs:

// Validate form input
const num = parseFloat(form.input.value);
if (isNaN(num) || !isFinite(num)) {
  alert("Please enter a valid number");
} 

Encoding/Decoding Query Strings

Use the encoding functions when working with query strings:

// Encode string for query 
const query = encodeURIComponent(document.query); 

// Append to URL
const url = `${location.href}?q=${query}`; 

// Decode query on server
const query = decodeURIComponent(req.query.q);

Parsing User-Provided Code

Use eval() to dynamically execute user-provided code:

// Execute simple expression 
const input = "1 + 2";
const result = eval(input); // 3

Conclusion

JavaScript’s global functions provide a toolbox of useful utilities accessible from anywhere in your code. While newer methods exist for some functionality, these functions remain important for backwards compatibility and simple tasks. By mastering functions like eval(), isNaN(), encodeURI(), and others, you can write code that is cross-browser compatible, securely parse input, quickly manipulate strings, evaluate code, and more. Understanding the global scope and when to leverage its capabilities is an important part of JavaScript mastery.

Related Contents

• Javascript Globals: Javascript Explained
• Global Variables Javascript: Javascript Explained
• Javascript Set Global Variable: Javascript Explained
• Global Javascript: Javascript Explained
• Replace Global Javascript: Javascript Explained