Skip to main content

Lexical Scope in JavaScript – Explained with Examples

The term "lexical scope" may seem tricky to grasp at first glance. But it's helpful to understand the word "lexical". So, let's get it started there.

What Is Lexical?​

Lexical refers to the definition of things.

Anything related to creating words, expressions, or variables is termed lexical.

For instance, a scrabble game is a lexical activity because it relates to the creation of words.

Also, someone whose job relates to linguistics (the study of languages) has a lexical career.

note

Another name for a dictionary is a lexicon. In other words, a lexicon is a dictionary where words are listed and defined.

So, now that we know what lexical means, we can talk about lexical scope.

What Is a Lexical Scope in JavaScript?​

Lexical scope is the definition area of an expression.

In other words, an item's lexical scope is the place in which the item got created.

note
  • Another name for lexical scope is static scope.
  • The place an item got invoked (or called) is not necessarily the item's lexical scope. Instead, an item's definition space is its lexical scope.

Example of lexical scope​

Consider the code below:

// Define a variable in the global scope:
const myName = "Oluwatobi";

// Call myName variable from a function:
function getName() {
  return myName;
}

In the snippet above, notice that we defined myName variable in the global scope and called it in the getName() function.

Question: Which of the two spaces is myName's lexical scope? Is it the global scope or the getName() function's local scope?

Answer: Remember that lexical scope means definition space—not invocation space. Therefore, myName's lexical scope is the global scope because we defined myName in the global environment.

Another example of lexical scope​

function getName() {
  const myName = "Oluwatobi";
  return myName;
}

Question: Where is myName's lexical scope?

Answer: Notice that we created and called myName within getName(). Therefore, myName's lexical scope is getName()'s local environment because getName() is myName's definition space.

How Does Lexical Scope Work?​

A JavaScript expression's definition environment determines the code permitted to access it.

In other words, only code within an item's lexical scope can access it.

For instance, consider the code below:

// Define a function:
function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Define another function:
function displayFullName() {
  const fullName = "Oluwatobi " + lastName;
  return fullName;
}

// Invoke displayFullName():
console.log(displayFullName());

// The invocation above will return:
// "Uncaught ReferenceError: lastName is not defined"

Notice that the invocation of displayFullName() in the snippet above returned an Uncaught ReferenceError. The error returned because only code within an item's lexical scope can access the item.

Therefore, neither displayFullName() function nor its internal code can access the lastName variable because lastName got defined in a different scope.

In other words, lastName's lexical scope is different from that of displayFullName().

lastName's definition space is showLastName() while displayFullName()'s lexical scope is the global environment.

Now, consider this other code below:

function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Define another function:
function displayFullName() {
  const fullName = "Oluwatobi " + showLastName();
  return fullName;
}

// Invoke displayFullName():
console.log(displayFullName());

// The invocation above will return: "Oluwatobi Sofela"

In the snippet above, displayFullName() successfully returned "Oluwatobi Sofela" because displayFullName() and showLastName() are in the same lexical scope.

In other words, displayFullName() could invoke showLastName() because the two functions are both defined in the global scope.

note
  • In the second example above, displayFullName() did not gain access to showLastName()'s lastName variable. Instead, displayFullName() invoked showLastName()—which then returned the content of its lastName variable.
  • An alternative to the lexical scope is the dynamic scope—but it rarely gets used in programming. Only a few languages, like bash, use dynamic scope.

Wrapping It Up​

Any time you hear lexical, think definition.

So, the lexical scope of a car, variable, phone, function, or swimsuit refers to its definition region.

Overview​

This article discussed what lexical scope means in JavaScript. We also looked at why it is an important programming concept.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter