JavaScript Variables | Var Types | declaration, scope, string

JavaScript Variables (Var) is storage name of datatype. A kind of containter the holding a particuler type of value like String and numbers (integer) etc.

Var” keyword is used to declare Variables in JavaScript. A variable value can change anytime. You can assign the value to variable using equal to (=) operator.

JavaScript Variables

JavasSript Variable Types

There is 2 type of variable by Scope.

  • Local variable
  • Global variable

Other types are based on value assign to that variables – Number, String, Boolean, null value, undefined value, object.

javascript variable types

Syntax of JavaScript Variables

Without value JS Variable declaration syntax.

var <variable-name>;

With value

var <variable-name> = <value>;

How to do | Javascript Variable Declaration & Initialization

When you just caret a value, it’s called a declaration of the variable. You can assign the value to it later or at the declaration. Let’s see the first how to create the var in javascript.

var number;
        
var name;

Let’s create a 2 variable with initial value, first is for numeric value and 2nd one is for string values.

var number = 1; // variable stores numeric value
        
var name = 'John';  // variable stores string value

A Javascript variable scope and Types

A globally-scoped Variable

A Variable can be access by any function and members. It’s declared outside any function.

// global scope
var a = 7;

function one() {
  alert(a); // alerts '7'
}

Local scope Variables

Access only within a function, outside function or member can’t access it.

// global scope
var a = 7;

function two(a) { // passing (a) makes it local scope
  alert(a); // alerts the given argument, not the global value of '7'
}

// local scope again
function three() {
  var a = 9;
  alert(a); // alerts '9'
}

There are more type varible like – Intermediate (let and object), Advanced (Closure and Prototype-based scope resolution), Global+Local,Catch clause-scoped variable.

Follow this link for more info- JS Variable scope

How to Javascript variable in string | Interpolate Variable

Starting from Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge you can use an ES2015 / ES6 feature called Template Literals and use this syntax:

`String text ${expression}`

A complete example

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);

Return sentence of string

return `
    <div class="${foo}">
         ...
    </div>
`;

JavaScript Variable Name Rules | Guideline

Here is some important point to when you creating a variable.

  • Var Name can have letters (a to z or A to Z), digits (0 to 9), underscores ( _ ), and dollar signs ( $ ).
  • The name must start with a letter, underscore( _ ), or dollar( $ ) sign.
  • Names are case sensitive (a and A are different variables in JS)
  • Reserved words can’t be used as names. Like the “JavaScript” keyword.

Bonus: One Statement, Many Variables

In JavaScript, you can declare a variable as many want in one statement. Using a comma “,” separate between variable names. See below code.

var name = "John", number = 980900345, Gender="male";

OR, like this

var name = "John",
    number = 980900345, 
    Gender="male";

Q: How to display javascript variable value in html page?

Answer: Use document.write() and <script> tag in HTML <body>. Let’s see how to use JavaScript variable in html.

<html>
    <head>
        <script type="text/javascript">
            var number = 9009;
            </script>
    </head>
    
    <body>
        <h3>
            the value for number is:
            <script type="text/javascript">
                document.write(number)
                </script>
        </h3>
    </body>
</html>

Or, Another example using a function.

<html>
    <head>
        <script>
            function myFunction() {
                var number = "5";
                document.getElementById("myText").innerHTML = number;
            }
        </script>
    </head>
    <body onload="myFunction()">
        
        <p>the value for number is: <span id="myText"></span></p>
        
    </body>
</html>

There are many ways to display javascript variable value in HTML page, you can do with own experiment.

Q: How to do Javascript print variable?

Answer: You can print the messages on Console or in Alert dialog.

Must read first this tutorial – JavaScript Print to Console | Object.

Q: Can javascript variable declaration without var keyword.

Answer: Yes, you can do the Declaration of the variable in javascript without using the “Var” keyword. But it must assign a value. Like below code.

number = 1;

name = 'KOME';

Note: it not recommended to declare var without using the “Var” keyword, because it can overwrite the existing same name variables. So you can lose the value of variable.

Do comment if you have any doubt or suggestion or questions on this topic.

Note: The JavaScript Variables Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Version: HECMAScript 2018


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.