The Difference Between Function and Block Scope in JavaScript

Photo by Tony Webster on Unsplash

When I mentioned to someone recently that I’ve been wanting to get back to the basics with JavaScript, they recommended Wes Bos’s “ES6 For Everyone” course. Wes is a great teacher and a clear communicator with a gift for distilling complex topics.

I started working through it today to help me nail down the basics, and begin my journey deeper into the chasms of JavaScript.

The difference between var, let and const variables

There are three ways to declare variables in JS:

var width = 100;
let height = 200;
const key = 'abc123';


What is unique about var? It can be reassigned and updated. For example:

// Define the variable:
var width = 100;
// Call the variable:
// It returns:
// Reassign the variable and call it again:
width = 200;

// Returns:

var variables are ‘function scope.’ What does this mean? It means they are only available inside the function they’re created in, or if not created inside a function, they are ‘globally scoped.’

If var is defined inside a function and I subsequently try to call it outside the function, it won’t work.

For example:

function setWidth(){
var width = 100;
// Returns:
Uncaught ReferenceError: width is not defined

Again, because var is defined within the function, it is not available outside the function.

Understanding scope

Example: var age = 100;
if (age > 12){
var dogYears = age * 7;
console.log(`You are ${dogYears} dog years old!`);

In the example above, the console returns:

You are 700 dog years old!

But if I call dogYears in the console in returns:

// returns:

So what happened? Why is dogYears available at the global scope?

Because var variables are function scoped — and because var dogYears is not defined within a function in the above example — var is instead defined at the ‘window,’ or global scope.

In other words, var is not limited to the curly brackets. It is the function which defines the scope.

Benefits of using let and const

What are the benefits of using let and const? Rather than being scoped to the function they are scoped to the block.

What is the block? A block is a set of opening and closing curly brackets.

So in the example above, if we change var dogYears to let dogYears, then call dogYears in the console, it returns Uncaught ReferenceError: dogYears is not defined.

var age = 100;
if (age > 12){
let dogYears = age * 7;
console.log(`You are ${dogYears} dog years old!`);

We could also substitute const for let in the example above.


var is function scope.
let and const are block scope.
Function scope is within the function.
Block scope is within curly brackets.




Technical Support Engineer at Linode | Linux & Kubernetes

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Event handling in react

Express Router makes your life easier

Top 45 AngularJS Interview Questions, With Some Answers

Angular wordmark with images representing questions and answers

How to manipulate arrays in JS like a pro

Memory Management in Javascript | Memory life cycle

Day 2: Reverse Words in a String

Advanced Palindrome Interview Question JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joe Cardillo

Joe Cardillo

Technical Support Engineer at Linode | Linux & Kubernetes

More from Medium

What are functions in #javascript?

Good coding practices and JavaScript basics

Coding Conditionals

let, const & var in Temporal Dead Zone ☠️ C/o HOISTED 🏴