1. JavaScript

Lexical Scoping in javascript

Now let’s take a look at what happens to the scope of variables when you have nested functions.

Remember earlier we said local variables are visible throughout the function in which they are declared. Let’s see where the variables in this program are visible.

window.onload = function() { 

var theId = "list";

 findElement(theId);

 } function findElement(id) {

 var color = "red"; 

var el = document.getElementById(id); 

if (el) { changeAllBlueChildren(el); }

 function changeAllBlueChildren(el) {

 for (var i = 0; i < el.childElementCount; i++) {

 var child = el.children[i]; 

if (child.tagName.toLowerCase() == "li") { 

var theClass = child.getAttribute("class");

 if (theClass == "blue") {

 child.setAttribute("class", color);

 }
 }
 }

 }

 }

We’ll start with t heId. This variable is defined in the window.onload function, and so is not visible globally or in f indElement (). However, we pass it to f indElement (), which gets a copy of its value, in the parameter variable id.

id is local to f indElement (), so we can access it anywhere in that function, but again, not
globally. Similarly, color and el are local variables, visible anywhere in f indElement ().

Next, look at changeAllBlueChildren(). We have a parameter, el, and several local variables, including i, child, and t heClass, all of which are local to changeAllBlueChildren().

There’s some interesting stuff happening here. We’re using the variable color inside
changeAllBlueChildren(), even though color is not defined in changeAllBlueChildren(), and it’s not a global variable.

This is possible because changeAllBlueChildren() is nested within f indElement (),
color is visible inside the nested function, so we can access it just as if it were a local (or global) variable inside changeAllBlueChildren().

This is known as lexical scoping. That means, when you are using a variable, like color, you figure out the value of the variable by first looking in the local scope.

(that is, in changeAllBlueChildren()), and then in the next outer scope. Typically, the next outer scope is the global scope, but in this case, because changeAllBlueChildren() is nested within another function, the next outer scope is f indElement ().

That’s where color is defined, so that’s the value we use in changeAllBlueChildren().
Take a look at el.

We have the parameter, el, which is local to changeAllBlueChildren(), and we have the
variable el in f indElement () which is visible throughout f indElement (), including within
changeAllBlueChildren()! So which value do we use? Well, remember that the el defined within changeAllBlueChildren() will shadow the el in f indElement ().

How? Because of lexical scoping. When we use el in changeAllBlueChildren(), we first look for it in the local scope, and we find its value there, so that’s the one we use.

Well, we’ve talked about how functions are good for organizing bits of code. That’s what we’re doing here.

We put all the code related to changing the blue children of an element to red in this function, which makes the code easier to read and understand, and also creates a chunk of code that’s easy to reuse.

In this case, we only call the changeAllBlueChildren() once, but you can imagine that we might end up calling it multiple times. By nesting the function inside f indElement (), we keep it hidden from other code that doesn’t need to know about it, and organize our code so that the related bits are together.

If we wanted to use changeAllBlueChildren() somewhere else in our code, we’d have to move it out of f indElement () so it would be accessible to other code to call.

There is a downside to nested functions: a nested function like changeAllBlueChildren() has to be recreated every time you call the function in which it’s nested, while functions defined at the global level are created only once and stick around for the duration of your program. In our case, that’s okay; we call findElement () just once, so we’re creating changeAllBlueChildren() just once.

In small to medium-sized programs, you might find that the organizational benefit of nested functions outweighs the performance hit.

However, if you’re building an application that needs to be as fast as possible, you’ll want to avoid nested functions.

This article is written by our awesome writer
Comments to: Lexical Scoping in javascript

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password