JavaScript Variable Example

JavaScript Variable; In this tutorial, you will learn javaScript variable with the help of examples.

JavaScript Variable

• What is Variable in js?
• Rules while declaring a JavaScript variable
  • Declare JavaScript variables using var keyword
  • Declare variable using let and const keywords
• Types of a variable in Js
  • Local Variable
  • Global Variable
• Undefined vs. undeclared variables in JS

What is Variable in js?

Variables are loosely typed in JS. It means variables can hold values with any type of data. Variables are just named placeholders for values.

Rules while declaring a JavaScript variable

Following rules to de variables in JavaScript:

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.

Declare JavaScript variables using var keyword

To declare a variable and initialize it at the same time, you use the following syntax:

var variableName = value;

To declare a variable, you use the var keyword followed by the variable name as follows:

var greeting;

A variable name should be valid identifier. The greeting variable is declared and hold a special value undefined.

After declaring a variable, you can assign the variable a string as follows:

greeting= "Hello";

You can declare two or more variables using one statement, each variable declaration is separated by a comma (,) as follows:

var greeting= "Hello",
    counter = 500;

As mentioned earlier, you can store a number in the greeting variable as the following example though it is not recommended.

greeting= 100;

Declare variable using let and const keywords

From ES6, you can use the let keyword to declare one or more variables. The let keyword is similar to the var keyword. However, a variable is declared using the let keyword is block-scoped, not function or global-scoped like the var keyword. More information on var vs. let

A block in JavaScript is denoted by curly braces ( {}). For instance, the if...else, do...while, or for loop statement creates a block.

The following example declares the tmp variable within a block surrounding by curly braces {}.

The  tmp variable only exists inside the block. Therefore, if you reference it outside the block, you will get a ReferenceError.

var a = 20, b = 10;
{
    let tmp = a;
    a = b;
    b = tmp;
}
console.log(tmp); // ReferenceError

The const keyword works like the let keyword, but the variable that you declare must be initialized immediately with a value, and that value can’t be changed afterward.

const pi= 3.14;
pi = 3.141; // TypeError: `code` is read-only

Types of a variable in Js

There are two types of variables in JavaScript:

• local variable
• global variable

Local variable

A JavaScript local variable is declared inside block or function. It is accessible within the function or block only.

The following example defines a function named greet that has a local variable named greeting.

function greet() {
  var greeting= "Hi";
  return greeting;
}

The greeting variable is a local variable. In other words, it only exists inside the function.

If you try to access the greetingoutside the function as shown in the following example, you will get a ReferenceError because the greeting variable was not defined:

function greet() {
    var greeting= 'Hi';
}
document.write(greeting+ "<br>") // ReferenceError

Global variable

A JavaScript local variable is declared outside block or function. It is accessible inside and outside the function or block.

// global variable
var greeting = "Hello";
function greet() {
    document.write(greeting + "<br>")
}
greet();// Hello
document.write(greeting + "<br>"); // Hello

In this example, we have one variable name: greeting. It is a global variable.

Undefined vs. undeclared variables in JS

It’s important to differentiate between undefined and undeclared variables.

An undefined variable is a variable that has been declared. Because we have not assigned it a value, the variable used the undefined as its initial value.

In contrast, an undeclared variable is a variable that has not been declared in js script.

See the following example:

var greeting;

console.log(greeting); // undefined
console.log(counter); // ReferenceError: counter is not defined

In this example, the greetingvariable is declared but not initialized therefore its value is undefined whereas the counter variable has not been declared hence accessing it causes a ReferenceError.

Conclusion

In this javascript variable tutorial, you have learned what is javascript variable, how many types of variables in js and how to declare & use javascript variables.