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.

scope-in-javascript.jpg

Scope in JavaScript. How does it work?

The Good Diver is a JavaScript game that consists of collecting ocean trash without being attacked by sharks. The diver moves by pressing the arrow keys. The user earns points each time he collects garbage and loses a percentage of his life when he collides with a shark.

the-good-diver.png

JavaScript Game

The Good Diver

Budget-Manager helps users to track their finances. This MERN application has a Dashboard whit different sections such as Balance, Statements list, and Chart, offering a better overview of incomes and expenses.
It has CRUD functionality for the Statements Model and uses REST API for the communication between client and server.

budget-manager.png

MERN Application

Budget Manager

This web application allows users to find pets close to them or share their pets with other locals. It uses ExpressJS for the Back-end and Handlebars for the Front-End. Also implements authentication using session storage and password encryption using bcrypt package. It has CRUD functionality for all database models.

petsharing.png

ExpressJS Application

Pet Sharing

WeTalk is a video call web application based on WebRTC, this technology allows peer-to-peer communications in real-time using web browsers.

wetalk.png

Video Call Web Application

WeTalk

Investapp is a client-side web application that allows users to simulate trading stocks with a starting balance.

Oscar González

Web Developer

Latest Works

Investapp

WeTalk

Pet Sharing

Budget Manager

Latest Posts

Scope in JavaScript. How does it work?

Get in touch