Global scope functions in Javascript

greetings goes to all.
could anyone give a simplified explanation about global scope in javascript>

1 Like

Hi there @salih. Here is a short explanation.

In Javascript, there are two types of scope:

  1. Local scope (sometimes called function scope)
  • Local variables are declared inside functions.
  1. Global scope
  • Global variables are declared outside of functions.

This being said, JavaScript has function scope. Where each new function created introduces a new scope. The scope tells us as developers what variables are currently visible or accessible to us.

Variables that are declared inside functions (local variables), are not accessible outside of the function, they only have ‘Function scope’. If a variable is declared within a JavaScript function, it becomes Local to that function and can only be accessed from inside the function.

// local variable not visible outside out function scope
const sayHello = function() {
    var message = "Hello World!"; 
    var myMsg = message + " " + "Let's code!"; // local variable is visible to us inside function
    return myMsg;
}
console.log(sayHello()); // Returns Hello World! Let's Code!
// console.log(message); local variable not accessible

In the above example, a local variable ‘message’ is not accessible anywhere but inside the sayHello function. The variable message is local and only has Function scope (not accessible outside the function).

Note: Local variables are created when a function starts, and deleted when the function is completed.

Now for Global scope: Variables that are declared outside of functions become global.

  • A global variable has global scope, meaning all scripts and functions on a web page can access it. (Example below)
var msg = "Greetings camper"; // global variable msg
const myGreeting = function() {
    return msg; // visible inside function since variable is global
}
myGreeting(); // returns "Greetings camper"

I will not get into the scoping rules associated with using var or let to declare variables. But I hope this rant helped you to understand how the global scope differs from the local scope in JavaScript. :]

More info from W3 Schools & StackOverflow.

1 Like

To be very simple, a variable or function with global scope can be accessed from anywhere inside a JavaScript file.
The alternative to this is local scope. A variable or function with local scope is created inside a block of code, (like inside a function), and can only be accessed inside that block of code.
Examples:

// index.js
let myGlobalVar = 20;

function myFunction() {
    let myLocalVar = 100;
    return myGlobalVar + myLocalVar;
}

This function has access to myGlobalVar because it’s declared outside of all the other code blocks. This is what makes it global, being outside of all the other code blocks.
Now, if I did this…

let myGlobalVar = 20;

function myFunction() {
    let myLocalVar = 100;
    return myGlobalVar + myLocalVar;
}

console.log(myLocalVar);

I would get an error, because myLocalVar is declared inside a function, and I’m trying to get access to it outside of that function.
Under the computer’s hood, when a function gets called, all the things inside it get put into your computer’s memory, and once the function is finished running, all of that stuff in memory gets deleted. If you try to access myLocalVar anywhere except inside the function, it doesn’t exist because it either hasn’t been created yet, (before the function), or has been deleted, (after the function).

tldr;
Global is outside all the other code, and you have access to it everywhere.
Local is inside functions, and can only be used in the function that created it.

There are layers to scope as well, which complicates things a little. If you have nested functions, you can always access something that’s a layer higher than the layer you’re on.

let myGlobalVar = 50;
function layerOne() {
    let layerOneVar = 100;
    function layerTwo() {
        let layerTwoVar = 200;
        return myGlobalVar + layerOneVar;
    }
}

This is all valid, because a function has access to all the layers above it.

let myGlobalVar = 50;
function layerOne() {
    let layerOneVar = 100;
    function layerTwo() {
        let layerTwoVar = 200;
        return myGlobalVar + layerOneVar;
    }
    console.log(layerTwoVar);
}

This will throw an error, layerOne is trying to access a variable from a layer below it.

Hope this makes sense!

2 Likes

This is not very simple actually because everything is quite relative, but in general think of it using this analogy:

  • Variable is a box where you can put something
  • Local scope is your house
  • Global scope is a street
  • You can go out to the street and grab any box from there including your own boxes
  • People from the street cannot enter your house, so all the boxes in your house are local

Further you can add any number of abstraction layers on top, for example you can create rules when people from other streets cannot enter your street but you can enter their streets, basically mirroring the same concept. It really just depends from what point of view you’re looking at this

3 Likes

One somewhat important addition:
By default you’re lazy, which means if you have a box labeled i in the house and the box with the same label on the street - you will always pick one in your scope.

1 Like

Thanks for all for explaining and simplifying that.
I got it well.

1 Like