Understanding the Default Scope of Variables in JavaScript

When a variable is declared with var in JavaScript, it is given a 'Global scope' by default. This means that it becomes accessible anywhere within your code - not just within the block of code where it has been defined.

Take for example the following JavaScript code,

var myVariable = "Hello, world!";
function myFunction() {
    console.log(myVariable);
}
myFunction();  // This will log 'Hello, world!'

In this example, myVariable is defined outside the myFunction(). But since var gives the variable a 'Global scope', it can be freely accessed and used inside myFunction(). Therefore, when myFunction() is called, it successfully logs the value stored in myVariable.

It's also important to note that because variables declared with var have 'Global scope', they can accidentally overwrite other variables with the same names, potentially leading to bugs within your code.

Consider the following code snippet:

var myVariable = "This is global!";
function myFunction() {
    var myVariable = "This is local!";
    console.log(myVariable);
}
myFunction();   // This will log 'This is local!'
console.log(myVariable);  // This will log 'This is global!'

In this instance, myVariable is defined twice. Once on a global level and once inside myFunction(). They are treated as two separate variables. The 'Global scope' variable isn't overwritten by the 'Local scope' variable because they exist in different scopes.

Though JavaScript allows variables to have a 'Global scope', it is generally a good practice to keep the usage of 'Global scope' variables to a minimum and use 'Local scope' variables (like const and let) as much as possible to prevent potential naming conflicts and bugs. Best practices and code readability should always be a top priority when writing code in any language, including JavaScript.