One of the main concepts you need to understand, when you start learning JavaScript, is the Scope. In this article, we'll learn the differences between the Scopes and the best practices to work with them.

Before going into details, a little reminder:

In JavaScript, there are three ways to declare variables and assign values. Before ES6 (2015), JavaScript had only "var" which provides global scope and function scope.
ES6 introduced two new important keywords: "let" and "const". This allows us to define a constant and a variable and access them in a block scope. 

Okay. Let's move on. 

What is the difference between them?

Let's clarify this with some examples.


## Global Scope

A variable with a global level scope is accessible from anywhere within the script where it was created. It is declared at the topmost level and is accessible from within child scopes, such as functions or statements.

Example:

```
const userName = "Oscar";
// we can access userName outside the function
// we can access userName outside the function
console.log(userName)
function myFunction() {
// we can also read userName inside the function
console.log(userName)
}
myFunction()
// output:
// Oscar
// Oscar
```

As a good practice, avoid using global variables because their value can change in different areas and that can introduce unknown results in the program.


## Function Scope

Function level scope is limited to within the function from which it was declared and any child scopes such as nested functions or statements. Variables with the function-level scope are not accessible outside the function they were declared.

Example:
```
function myFunction() {
const userName = "Oscar";
console.log("Inside a function: ",  userName)
// we can access userName inside the function
}
myFunction()
console.log("Outside a function: ", userName)
// we can't read userName outside the function
// output:
// Oscar
// Uncaught ReferenceError:  userName is not defined
```


## Block Scope

Block level scope is limited further to the statement or expression of which the variable was declared. Or in simple terms, anywhere between an opening and closing curly brace {}.

Example:
```
function myFunction() {
const userName = "Oscar";
  if (userName) {
    const greeting = `Hello ${userName}`
    console.log(greeting)
    // greeting is only accessible inside the if statement (block scope)
  }
  console.log(greeting)
}
myFunction()
// Output:
// "Hello Oscar"
// Uncaught ReferenceError: greeting is not defined
```

I hope this article has helped you understand the different types of scoping in JavaScript and how to declare and access the value of variables or constants.

For comments or feedback just get in touch through Twitter, GitHub or LinkedIn. See you!

In this article, we'll learn the differences between the Scopes and the best practices to work with them.

Blog

Scope in JavaScript. How does it work?