In JavaScript, scope is related to the visibility of variables. In other words, where these variables can be accessed from within your code. There are two types of scope in JavaScript: local scope and global scope.

Global Scope

A variable that is defined outside a function has a Global scope, which means it can be accessed from any part of your code, not just from the part where it's defined.

Local Scope

On the other hand, if you declare a variable inside a function, it has a local scope, which means it can only be accessed from within that function where it was declared and not from outside.

Example of Global and Local Scope

Consider this code example where the variable 'a' is in the global scope and the variable 'b' is in the local scope of the function 'myFunc'. Variable 'a' can be accessed anywhere in the code, while 'b' can only be accessed within 'myFunc'. Trying to access 'b' from outside 'myFunc' would result in an error.

var a = 'I am Global!'; 

function myFunc() {
  var b = 'I am Local!'; 
  console.log(a); // 'I am Global!'
  console.log(b); // 'I am Local!'
}

myFunc();
console.log(a); // 'I am Global!'
console.log(b); // Uncaught ReferenceError: b is not defined

Block Scope

JavaScript also has block scope, which was introduced with ES6's let and const. Variables declared with let or const are block scoped, meaning they can only be accessed within the block they were defined in. A block is code contained within {} brackets.

if(true) {
  let blockScopeVariable = 'I am block scoped!';
  console.log(blockScopeVariable); // 'I am block scoped!'
}

console.log(blockScopeVariable); // Uncaught ReferenceError: blockScopeVariable is not defined

Imagine you are playing a game of hide and seek. Your house is big, with many rooms. 'Scope' in JavaScript is similar. It's like your house, where different pieces of your toy sets are stored. Some toys you can play with in the entire house - this is global scope. But some toys you can only play with in particular rooms - this is local scope.

How does Scope work?

In JavaScript (the coding language we're learning about), every time we create a box (called a variable), we have to decide where it can be opened and its toys (or values) played with. If we say 'let's use this toy anywhere in the house', that's creating a globally scoped box. But, if we say 'this toy can only be used in the kitchen', that's creating a locally scoped box.

Examples of Scope

Here's example. Let's say we're making a tea party. If we announce to everyone at home, 'Let's have tea', everyone in the house (global scope) knows about it. But if we whisper to only our teddy bear in the living room, 'Let's eat cookies', only we and the teddy bear (local scope) knows about the cookies. In our tea party game, 'tea' and 'cookies' are like variables (boxes) and house rooms are like different scopes.

var tea = 'Let's have tea'; // globally scoped

function playTeaParty() {
  var cookies = 'Let's eat cookies'; // locally scoped
} 

When to use each Scope

Just like playing a game, you have to choose carefully when to use global scope or local scope. If something like 'tea' is important for everyone to know, you make it global. But if something like 'cookies' is just for you and your teddy, you make it local.