How Global Scope and Functions work in JavaScript

JavaScript is a programming language that is commonly used to create interactive front-end web applications. In JavaScript, there are two main ways to define variables: in the global scope, or within a function.

When a variable is defined in the global scope, it can be accessed and modified from anywhere in the code. For example:

var globalVariable = "I am a global variable";

function myFunction() {
    console.log(globalVariable);
}

myFunction(); // Output: "I am a global variable"

On the other hand, variables defined within a function are only accessible within that function. These are called local variables. For example:

function myFunction() {
    var localVariable = "I am a local variable";
    console.log(localVariable);
}

myFunction(); // Output: "I am a local variable"
console.log(localVariable); // ReferenceError: localVariable is not defined

It’s important to note that if a variable is defined with the same name in both the global scope and within a function, the function will use the local variable and not the global one.

JavaScript also allows the use of function scope, where any variable defined inside the function is not accessible outside the function, but any variable defined outside the function is accessible inside the function.

Functions in JavaScript can also take parameters, which are passed to the function when it is called. These parameters act as local variables within the function. For example:

function myFunction(param1, param2) {
    console.log(param1 + " " + param2);
}

myFunction("Hello,", "world!"); // Output: "Hello, world!"

In JavaScript, functions are first-class citizens, meaning that they can be assigned to variables, passed as arguments to other functions, or returned as values from functions. This allows for powerful functional programming patterns in JavaScript.

Additionally, JavaScript also has a feature called hoisting which refers to the behavior of variable and function declarations being moved to the top of their scope. This means that variable and function declarations are treated as if they were defined at the top of the scope, even if they are defined further down in the code. For example:

console.log(hoistedVariable); // Output: undefined
var hoistedVariable = "I am a hoisted variable";

console.log(hoistedFunction()); // Output: "I am a hoisted function"
function hoistedFunction() {
    return "I am a hoisted function";
}

Here, even though we first use the variable ‘hoistedVariable’ and call function ‘hoistedFunction’ before their actual definition, the JavaScript engine still treats them as if they were defined at the top of the scope.

Another concept in JavaScript is closure, which is when a function “closes over” variables in its surrounding scope, allowing those variables to be accessed even after the surrounding scope has finished executing. Closures are created when a function is defined inside another function.

function outerFunction() {
    var outerVariable = "I am an outer variable";

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

var closure = outerFunction();
closure(); // Output: "I am an outer variable"

Here, the innerFunction has access to the outerVariable even after the outerFunction has finished executing. This is because the innerFunction “closes over” the outerVariable, allowing it to retain access to it.

In summary, JavaScript has a feature called hoisting, which moves variable and function declarations to the top of their scope, and closures, which allow a function to retain access to variables in its surrounding scope even after the surrounding scope has finished executing. These concepts, when used correctly, can make your code more readable, maintainable, and efficient.