DEV Community: Michael Orji

Variable declaration and scoping rules

Michael Orji — Mon, 06 Nov 2017 21:02:27 +0000

Introduction

In programming, the scope of a variable determines where that variable can be used within the program, and also what functions and objects have access to that variable.

Usually, a variable can have either local or global scope. A variable declared within a block of code has local scope, and is only accessible by other code within the same block. Once the block within which it is declared is exited, the variable goes out of scope. A global variable, on the other hand, is accessible from anywhere within the currently executing script (or program), and usually lasts the entire lifetime of the program.

In this write up, we wish to examine the various ways in which variables can be declared in JavaScript, and we shall see that the scope of a variable in JavaScript is affected by where and how it is declared.

Declaring variables

There are three keywords available for declaring variables in JavaScript. They are the var, let, and const keywords. JavaScript, being a dynamic and loosely typed language, also allows you to use variables without pre-declaring them, but this is not considered good practice and is highly discouraged.

To declare a variable, we use any of the above listed keywords, followed by the variable name as follows:

var a;

let b;

const c = 5;

When you declare a variable using const, you must initialize it with a value -as we have done above - which cannot afterwards be changed. When declaring variables with var and let, we can optionally initialize the variables at the point of declaration:

var a = 2;

var b = 3;

Declaring variables with the var keyword

When you declare a variable using the var keyword, the scope is as follows:

If the variable is declared outside of any functions, the variable is available in the global scope.
If the variable is declared within a function, the variable is available from its point of declaration until the end of the function definition.

Unlike what you might be used to from other languages, variables declared with the var keyword have no block scope. In concrete terms, this means that if you declare a variable using var within a for, or any non-function block, the variable's scope extends beyond the block to the end of the block's parent scope. On the other hand, if you declare a variable inside a function with the var keyword, the variable is only available within the function definition, and cannot be accessed outside of the function. We, therefore, say that variables declared with var are function-scoped.

Let's see some examples to help clarify what we are saying.

function varScope() {
   var a = 2;
   console.log(a); // outputs  2
}

console.log(a); // ReferenceError, a is not accessible outside the function.

Let's see another example.

function varScope() {
   var a = 2;
   if(true) {
      var a =  "Jamie"; //change the value of a inside the "if" block
      console.log(a); //prints "Jamie"
   }
   console.log(a); //prints "Jamie": outside the "if" block, a still maintains the updated value 
   //a being function scoped, the (re-) declaration inside the if statement overwrote the previous value of a
   //when we assigned it a new value inside the conditional statement
}
console.log(a); // ReferenceError, again, a is not accessible outside the function.

Finally, let's look at this one.

function forScope() {
   for(var i = 0; i < 5; i++) {
      console.log(i); //prints the values 0 through 4;
   }
   console.log(i); //prints 5;
}

What just happened? Inside the for header, we declare and initialize the i variable. Then inside the loop, we iterate from 0 while the value of i is less than 5, bumping i on each iteration. When the value of i equals 5, the condition i < 5 evaluates to false, terminating our loop. However, since i is declared using var, its scope extends from its point of declaration to the end of the function. Hence, even after the loop, we can access the up-to-date value of i, which, in this case is 5.

Declaring variables with the let keyword

variables declared using the let keyword have three important characteristics.

They are block scoped
They are not accessible before they are assigned
They cannnot be re-declared within the same scope

Let's see what this means using some examples.

function  letScope() {
   let a = 5;

   if  (true) {
      let a = "Jamie";  // using let creates a new a variable inside the "if" block
      console.log(a); //  prints "Jamie"
   }

   console.log(a); // 5,  outside the if block, the outer a shines through
}
console.log(a); // ReferenceError, a is not accessible outside the function.

Here's what happens in this function.

Inside the function, we create an a variable using let, this variable exists throughout the scope of this function.
Inside the if block, we create another let -declared a variable. Being block scoped, we just created a new a variable.
This variable is totally different from, and independent of, the outer a variable.
This variable is only available within the if block, and not accessible outside this block.

In addition, you can't re-declare a let variable:

let a = 2;
let a = 3// SyntaxError, cannot re-declare the a variable

Declaring variables with the const keyword

Variables declared with the const keyword share all the characteristics of variables declared using the let keyword, plus one important distinguishing characteristic:

They can't be reassigned

const a = 2;
a = 3 // Error, reassignment is not allowed

const a = 2;
const a = 3 // Error, re-declaration is not allowed

Variable Mutability

Regardless of how you declare a variable, using any of the keywords we have discussed, the variable is mutable. Mutability must not be confused with reassignment. This difference is highlighted when working with arrays or objects. An example or two will clarify what this means.

Object example:

const person = {
  name: 'Michael'
};
person.name = 'Jamie' // OK! person variable mutated, not completely re-assigned
console.log(person.name); // "Jamie"
person = "Newton" // Error, re-assignment is not allowed with const declared variables

Array example:

const person = [];
person[0] = 'Michael'; // OK! person variable only mutated, not completely re-assigned
console.log(person[0]) // "Michael"
person = "Newton" // Error, re-assignment is not allowed with const declared variables

Accessing a variable before its declaration

In the section on declaring variables with let, we noted that one of the characteristics of let declared variables is that they are not accessible before they are declared. What does this mean? Let's see.

Consider this piece of code:

console.log(a); // undefined, but no error raised
var a = 2;

In the above snippet, we attempt to read the value of the a variable before its declaration. Instead of getting an error, we get undefined. Why is that? The answer is that var declared variables are moved to the top of the scope at execution.

At runtime, this code is interpreted as:

var a;
console.log(a); // undefined: a is declared, but hasn't been assigned a value, hence no errors raised
a = 2;

This phenomenon is what is referred to as hoisting.

If we try to do a similar thing with a variable declared using let or const, we will get a reference error thrown.

console.log(a); // ReferenceError
let a = 2;

Concluding thoughts

Mastering scope in JavaScript can seem tricky, and may take some time to getting used to. But with practice the various ways of declaring variables in JavaScript and how these affect scope become second nature.

Introduction to JavaScript Functions

Michael Orji — Thu, 26 Oct 2017 11:38:01 +0000

Introduction

From its use as a front-end scripting language for web development, Javascript has evolved, and is now being deployed across several stacks and application environments, notable among which is its use in backend development in Node.JS. As a consequence, more and more developers and teams are leveraging on it to build applications of all types from the simplest to the most complex.

Mastery of JavaScript is therefore considered among the most important in the skillset of a (web) developer. As reported by Computer Weekly, a recent survey by software analysis firm - Cast - found that a greater percentage of developers (56%) believe that JavaScript (alongside Java) is among "the most important languages to master in the next five years". This is in comparison with C++ (38%), Python (35%) and SQL (30%).

Among the most powerful, yet sometimes underplayed, features of JavaScript is its use for functions. JavaScript is primarily a functional language, and functions occupy a fundamental place in JavaScript.

What is a Function

A function, in simple terms, is a (named) group of code that can be invoked. In other words, a function is a way to group together some code, give this group a name, and later invoke the code using the given name.

Why functions

The use of functions provide several benefits to developers. Some of these are highlighted below.

Encapsulation and code reuse - Functions promote code reuse by encapsulating repetitive tasks or routines, potentially saving you more typing time. This also helps to avoid potential (typing) errors that could arise from having to type the group of code the function encapsulates whenever you need to execute the action(s) they perform.
Better code organization - Functions help with organizing and managing code. Once you write the function and test that it works, you can save it and call it whenever you need it. Also, if you ever need to make a change to the code you only need to do it in one place, rather than looking for every instance where you typed the code.
Concise and self-documenting code - They make our code shorter, and allows for cleaner syntax. Appropriately named functions make code more self-documenting.

How to define and use functions

Supposing you have a sequence of code statements that compute the sum of two numbers, and print the result to the browser, you could do this :

    var a = 5;
    var b = 7;
    var sum = a + b;
    document.write(sum);

Then, several lines of code later, you change either or both of the values stored in the a and b variables, and again set sum to equal the addition of a and b, and finally print the sum with document.write(sum);. Depending on how many times you have to execute the group of statements, it can become a nightmare, especially if the code in question is doing something non-trivial. This presents a good case of where functions can come in handy. Let's see how.

Defining a function

To convert our above code to a function: we follow these steps:

-collect our code sequence together:

var a = 5;
var b = 7;
var sum = a + b;
document.write(sum);

-Wrap the set of code between curly braces, creating a block of code:

{
   var a = 5;
   var b = 7;
   var sum = a + b;
   document.write(sum);
}

By enclosing our code within the opening and closing braces {}, we have effectively turned them into a single unit of execution (known as a code block), that can either be executed as one.
-Lastly, give the unit a name, preceded by the function keyword, and followed by a set of parentheses ():

function sumAndPrint()
{
   var a = 5;
   var b = 7;
   var sum = a + b;
   document.write(sum);
}

With that final step, we have successfully defined our function, ready to be summoned whenever we need to sum, and print the result of, the numbers 5 and 7.
The block of code in between the opening and closing curly brace is called the function body.

Calling (invoking) our function

So, we have finished defining our function, by encapsulating it within a block of code, and giving it a fancy name. But how do we use this function?
To use our newly defined function, we simply call it by its name, followed by the pair of parentheses (excluding the function keyword, and the function body):

sumAndPrint(); //prints 12

That is how simple it is to define and use a function in JavaScript.
Another term for calling a function is to "invoke" the function.

Improving upon our function

The function we have defined above is an improvement over always having to manually type the block of code it encloses everytime we need to perform the action of adding two numbers and output the result. Nonetheless, it suffers from a few drawbacks.

Firstly, the function , in its current form, can only sum the numbers 5 and 7, not any other pair of numbers. This means that if we need to sum any other set of numbers, we will have to write a different function for every new pair of numbers. This is not particularly desirable since it will be breaking the DRY (Don't Repeat Yourself) principle, and taking us back to the reason for writing functions in the first place: avoiding unnecessary or avoidable repetition.
Another problem our function - as it currently stands - suffers from is that it is doing too many (actually just two) things at a time:
It caluclates the sum of the given numbers.
It prints the calculated sum.
A good rule of thumb when creating functions is that a function should only do one thing; after all, functions are supposed to help us build modularity into our code. But our function, in its present state, breaks that rule.
A third problem with our function is that there's no way currently for us to get hold of the resulting sum of the numbers after the function has finished executing. This is because upon exiting the function, the a, b, and sum variables go out of scope, and can no longer be accessed outside of the function. So, if we needed to do something with the computed value after the function completes execution, we couldn't.

Let's see how we can improve upon our function to take care of each of the issues we have raised.

Function parameters and return values

The first issue - being able to sum only the numbers 5 and 7, thus breaking the DRY principle - can be fixed by what are known as function parameters.
Function parameters are what we give a function to enable it carry out its task.

As an analogy, imagine sending a child on an errand, the errand could be to go help deliver a message to Mr. A. In this instance, you are not expecting the child to give anything tangible to Mr. A, just merely to convey a (verbal) message. That's the case with our function as it currently stands. You don't give it anything external to perform its task. Instead, the function contains within itself everything it needs to accomplish its job.

Now imagine sending the child on an errand to go help purchase some items from the local store. In this case, you would need to give the child some means of exchange, for example money, in order for the child to be able to get you the requested items. Otherwise, there'd be no way for them to get you the items you desire. In programming speak, we call such enablers (in the case of the child on errand, money) of actions "parameters". Parameters are passed to functions by including them between the opening and closing parentheses in the function definition. Multiple parameters are separated using commas.

function exampleFunction(param1, param2, param3, ...) 
{
   //function code goes here
}

Back to our sumAndPrint function from earlier on, what it requires to carry out its task of summation are two numbers - currently 5 and 7, respectively stored in the a and b variables. However, what we'd like to do is for the function to be able to sum any arbitrary pair of numbers, not just 5 and 7.
To achieve this functionality, we need to:

Move the declaration of the a and b variables out of the function body. Pass them to the function as parameters, between the opening and closing parentheses.
When invoking the function, pass actual arguments to it, which will get assigned to the parameters in the order in which they were passed. Here's what our code looks like after applying these changes:

function sumAndPrint(a, b)
{
   var sum = a + b;
   document.write(sum);
}

The a and b in the function's parameter list now act as placeholders for the actual values that we will pass in when we invoke the function. With this brief change in the function definition, our function can accept and sum any two numbers we pass to it.
To use our updated function, we call it as usual, but this time, we pass in the numbers we wish to sum as arguments:

sumAndPrint(3, 6); //9.

Internally, the number 3 will be assigned to the a variable, and the number 6 to the b variable.
This solves the first issue, now let's move on to fixing the second issue we raised earlier.

In this update, we want to make our function do only one thing. This can be achieved by moving the code that does the printing of the calculated sum outside of the function. When we do that, however, we'd no longer be be able to print out the result of the computation carried out by our function, since as noted earlier, there's no way to access the sum variable outside of the function.
This brings us to the third issue noted above: how to make the result from the function accessible from outside of the function, so that we can work with it, for example to use it in another calculation or output it to the browser, as we are doing here.
It is also a good idea to rename our function - after moving the printing code out - so that it is clear it is no longer doing two things - summation and printing - but one (summation). A good name for the updated function will be "sum".

To get access to the result of the function, and hence fix the third issue identified above, we need to get our function to give us its resultant value.
Again, using the analogy of the child on errand, after getting the items from the local store, the child has to "return" the items bought to the sender. In the same way, after performing its calculation (or whatever task it is written to perform), a function can be instructed to return the results of its calculation to the caller. This is done by means of a "return" statement. The "return" statement is made up of the keyword return followed by the value we want the function to return to the calling code.

The return keyword basically says to our function, "when you are done executing, send this value back to your caller".
Applying these changes - moving out the code that prints to the browser, renaming our function, and adding the return statement - to our function, it should now look like this:

function sum(a, b)
{
   var sum = a + b;
   return sum;
}

In fact, we can eliminate the intermediate sum variable altogether, and just directly return the result of the expression a + b:

function sum(a, b)
{
   return a + b;
}

We can store the result of calling this function in another variable and use it however we wish:

var result = sum(5, 6);
document.write(result);

You can see how the use of functions has made our code more succinct, cleaner, and more self-documenting, traits that are highly desirable as programmers. The function name "sum" speaks for itself wherever it is used in our code or by client code.

More on JavaScript Parameters

Default Parameters

The most recent version of the JavaScript specification (ES6), supports the concept of optional parameters when defining functions. In simple terms, optional parameters mean that our function parameters are assigned default values when the function is created, such that if the user does not pass any corresponding arguments when they call the function, the default values are used.
For example, we could define our sum function as follows:

function sum(a = 5, b = 7)
{
   return return a + b;
}

This would allow the function to be invoked while passing: two, one, or no arguments at all.
sum(3, 6);Here, 3 is assigned to the a variable, and 6 to b.
sum(3); In this instance, 3 will be assigned to the a variable, and since we didn't supply a second argument, the default value of 7 will be assigned to the b variable, giving a result of 10.
sum(); In this call, we pass no arguments at all, so the default values of 5 and 7 are used, resulting in a value of 12.

Dealing with earlier versions of JavaScript

Versions of JavaScript prior to ES6 do not directly support the concept of default parameters; but we can achieve the same functionality by modifying our code slightly, while making use of a feature of JavaScript functions:
JavaScript allows us to call functions without passing any arguments, even if the function definition includes parameters.

function sum(a, b)
{
   if(typeof a !== "number") {
      a = 5;
   }

   if(typeof b !== "number") {
      b = 7;
   }

   return a + b;
}

What's happening here? We are using the typeof operator to determine the data type of the arguments (or none) passed to the function when it is invoked.
For each parameter, if no corresponding argument is passed, the typeof will return the string "undefined" for that parameter. For example, if we call the function without supplying an argument or passing null for the a parameter, typeof a will return "undefined", so the test typeof a !== "number" will evaluate to true, and a will be set to the default value of 5. Else, the test will fail and we use the supplied number.
We could have tested for if typeof a === "undefined", but by testing against "number", we ensure that even if the user passed our function a string such as "hello", the default numeric values will be used for the variables. This way, our function is made more robust by being able to detect, and work around, unreasonable input.

Summary and concluding remarks

To recap, here are some of the highlights of what we did in this write-up.

We started out by stating that functions are one of the most important concepts to master in JavaScript programming.
We then looked at some of the benefits that the use of JavaScript functions offer us in terms of code organization and reuse.
We proceeded to see how to define and use functions. Specifically, we saw that a function is made up of 4 parts:
- The function keyword
- A function name
- A comma-separated list of (optional) parameters
- The function body - between curly braces { }
We saw that a function can return a value to its caller using the return statement.
We learnt that a function is invoked by using its name followed by the parentheses ( ). Arguments to the function, if any, are passed inside the parentheses.
We learnt that it is considered good practice to create functions that perform a single, specialized task.
Finally, we learnt that it is possible to define functions with default parameter values in ES6 compliant browsers. We provided an alternate implementation for older JavaScript versions by a clever use of the typeof operator with conditional statements.

In conclusion, mastering JavaScript functions is an important part of becoming a seasoned JavaScript developer. This write up is but an introduction to functions in JavaScript. I encourage you to explore JavaScript functions in greater detail. Your ability to stand out as a JavaScript developer depends on it. Your future self will thank you for the effort.

DEV Community: Michael Orji

Variable declaration and scoping rules

Introduction

Declaring variables

Declaring variables with the var keyword

Declaring variables with the let keyword

Declaring variables with the const keyword

Variable Mutability

Object example:

Array example:

Accessing a variable before its declaration

Concluding thoughts

Further reading

Introduction to JavaScript Functions

Introduction

What is a Function

Why functions

How to define and use functions

Defining a function

Calling (invoking) our function

Improving upon our function

Function parameters and return values

More on JavaScript Parameters

Default Parameters

Dealing with earlier versions of JavaScript

Summary and concluding remarks