Categories
development

Understanding JavaScript Function Scope

I’d Like You to Know


These MicroTuts are meant to inspire further learning around the topics they cover.

My hope is that they can be used as reference to more easily gain additional knowledge. 

If you would like some MicroTut’s created for a subject you are interested in then please use the form at the bottom of this page.


Did you know?

Did you know you can assign a value to a variable without declaring it?

but_dont_do_it

Saving that extra bit of typing and and just assigning some value to a variable without properly declaring it can cause you a hard time by creating side effects like unexpected values.

checkout_quick_example_below
// myUndeclaredVariable will be available here, this may not be what you want

function doSomething(){
  // This will get moved to the top of the file outside the function but will not give any error.
  myUndeclaredVariable = "Some value"
}

This style of coding is allowed in JavaScript but isn’t really the way you want to do things, if you used a variable with the same name in another function then you may begin to get unexpected results.

JavaScript Function Scope

JavaScript like most languages offers function scope, meaning you can declare a variable in one function and the declare another with the same name in another function. To correctly declare your variables in JavaScript, see the example below.

// A global scope variable.
var globalVariable = "Global Data"

function doSomething(){
  // A locally scoped variable.
  var localVariable = "Local Data"
}

The JavaScript Engine

Which ever way you declare and assign your variables the JavaScript engine will break it apart and move the declaration part to the top of the scope, so if you declare a variable with a definition on one line in a function the JavaScript engine will move the declaration to the top of the function the assignment will be left in place.

checkout_quick_example_below
function doSomething(){
  // myPropery declaration will be hoisted to hear.

  console.log(myProperty) // output will be undefined.

  var myProperty = "Some thing"
}

Functions Are Hoisted Too

The way you declare your functions can matter too, you can use function declaration or function expressions when creating a function.

function doSomething() {} //Function declaration.

var myFunction = function() {} // Function expression.

The function declaration begins with the “function” keyword, the whole of this function will be hoisted, meaning we can call the function before we have declared it, so if we do something like below…

doSomething();

function doSomething() {
  console.log("Here is the output.");
} //Function declaration.

var myFunction = function() {}; // Function expression.

The code above will work fine because the JavaScript engine will interpret it like this.

function doSomething() {
  console.log("Here is the output.");
} //Function declaration.

var myFunction

doSomething()

myFunction = function() {}; // Function expression.

Notice the function declaration was moved to the top and the variable declaration for the function expression was also moved.

If you like this post, show your appreciation with a few claps. 🙂

I hope you find these micro tutorials useful, if you have a suggestion that you would like me to cover then please send it using the form below.