Lecture 3 – JavaScript Variables

JavaScript supports a set of data types, most important of which are:

  • Strings: They are strings of text such as “this is a text”.
  • Numbers: They are simple numbers such as 23, 405, and 600.6.
  • Booleans: They declare the statement as either true or false.

Then there are two minor data types that are unidentified and null. Both these data types specify only a single value. Similarly, JavaScript also supports Objects which are more composite type of data.

JavaScript Variables

Variables in JavaScript can be considered as named containers. They actually contain or store data which you can retrieve simply by naming the variable whenever you want.

You have to declare a variable using var keyword before you can use it.

<!DOCTYPE html>
<html lang="en">
<head>
    
        var countries;
        var cities;
    
    <title>JavaScript Variables</title>
</head>
<body>
    
</body>
</html>

JavaScript also allows you to use same var keyword to declare multiple variables as shown in the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    
        var countries, cities;
    
    <title>JavaScript Variables</title>
</head>
<body>
    
</body>
</html>

Variable Initialization is the process of storing a value in the variable. You have the option to initiate variables at the time of their creation or at a later point when you want to use them.

For example, you may create a variable country and assign it a value of USA and UK at the time of initialization. For the variable cities, you may assign it a value latter on. The following piece of code further explains the concept.

<!DOCTYPE html>
<html lang="en">
<head>
    
        var countries = "USA";
        var city;
        var city = "Atlanta";
    
    <title>JavaScript Variables</title>
</head>
<body>
    
</body>
</html>

Keep in mind that you can use one var keyword to declare the variable only once. You cannot use it to declare same variable twice.

JavaScript Variables can also store every type of data as it is an untyped language. JavaScript can itself understand which type of data you are trying to contain in the variable.

Scope of JavaScript Variables

There are two types of JavaScript variable scopes based on the variable’s position in the program.

  • Global Variables: These are the variables which can be defined anywhere in your JavaScript code.
  • Local Variables: These are the variables which will are only visible in their parent functions.

If the two variables within the function have same names, the local variable will take precedence over the global variable. Have a look at the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
  <body onload = varscope();>   
   
    var varScope = "global";    
    function varscope( ) {
     var Varscope = "local";
     document.write(Varscope);
    }
        
</body>
</html>

You will get the following output.

Variable Naming Conventions

There are certain variable naming conventions which you have to adhere to.

  • You cannot use JavaScript reserved keywords to declare a variable.
  • Similarly, you cannot use numerals (0-9) at the start of variable name. They should always start with an underscore character such as _123 or letters such as abc.
  • Variable names are case sensitive. Therefore, water and Water are not the same variables.

In the next lecture, we talk about JavaScript Conditional Statements