Javasript Catches And Pitfalls – part 2 (scopes)

Let’s continue talking about catches and pitfalls in Javascript. In this article, we will be dealing with Javascript scopes.

Put in very simple terms, In JavaScript, scope is a set of variables, objects, and functions you have access to.  Basically it’s a current context of your code. Scope is main determining factor if a variable/function will be available at any given place inside your program. Failing to understand scopes will certainly cause headaches to any programmer, especially in Javascript.

 

Global and local scopes

There are two types of scopes in Javascript, global and local. Basically variables declared inside the functions have local scope, while those declared outside have a global scope.

In the example above, variable lastName has a global scope, while the familyMembers has a scope local to the listFamilyMembers function.

There’s another way for variable to have a global scope in Javascript. Basically, any value assignment to a variable that has not been previously declared, will make the variable global. So if we’d changed the previous example to look like this

familyMembers variable would get a global scope although it’s first appearance is inside a function. That being said, if you run your code in “strict mode“, this way of instancing global variables will fail.

Lifetime of Javascript variables

All of us should be able to distinguish between variable declaration and variable definition, but let me refresh your memory.

In the code above the very first line represents declaration of the variable named timer, while the line below represents it’s definition. Finally the last line represents both variable declaration and definition at once. Variable lifetime starts at it’s declaration, regardless of it’s scope being local or global. Variable deletion, however, is different. Local variables are being deleted on function completion, while global variables are being deleted when the page they reside in is closed.

 

Function Scopes

We’re already used to the fact that Javascript “likes” to do stuff in it’s own way, scopes are not an exception. Because most other programming languages determine separate scopes for loops (for, while, do-while, etc), as well as code blocks in general, we find that behavior natural and expected. In Javascript, the only factor determining variable scopes are functions.

Let me clarify this with an example. If I write

What do you think will get printed out in the console? Undefined? Null? Some kind of error thrown?

NO!

It will print out 100. No matter which loop we use, how many code blocks we nest in one another, they do not affect variable scopes. The only way to enclose variable scope in Javascript is to put it into a function. However, block level scopes are making their way into our lives with the new EcmaScript 6. If you’d like to research this, start by looking up the let keyword.

Variable hoisting

What kind of error would you expect to be thrown out of the following code snippet?

No kind! This code will actually run. We will get ‘Irhad’ printed out in the console.

We already said that variable lifetime starts with it’s declaration. Javascript processes variable declarations before executing any other code. Essentially this means that declaring the variable anywhere in the code has the same effect as declaring it at the top of it’s scope. This behavior creates an illusion that a variable in Javascript can be used before it’s been declared. This is called variable hoisting.

For that reason, it is recommended to always declare variables at the top of their scope (the top of global code and the top of function code) so it’s clear which variables are function scoped (local) and which are resolved on the scope chain.

It’s also worth noting that functions declarations are always being processed first, and variables declarations are being processed afterwards.

This post is a continuation of what I started writing about a while ago in the Javascript Catches And Pitfalls – part1 (equality and comparisons). If you haven’t checked it out already, please go and do so. Let me know what you think in the comments below, or if I missed something.

Irhad

Leave a Reply

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