JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Variables

Variables are used to store data, like string of text, numbers, etc.

Variables in standard JavaScript have no type attached, and any value can be stored in any variable.

The data or value stored in the variables can be set, updated, and retrieved whenever needed. In general, variables are symbolic names for values.

You can create a variable with the var keyword, whereas the assignment operator (=) is used to assign value to a variable.

In this example x, y, and z are variables:

Run code

JavaScript Identifiers

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

These are the following rules for naming a JavaScript variable:

  • A variable name must start with a letter, underscore (_), or dollar sign ($)
  • A variable name cannot start with a number
  • A variable name can only contain alpha-numeric characters (A-z, 0-9) and underscores
  • A variable name cannot contain spaces
  • A variable name cannot be a JavaScript keyword or a JavaScript reserved word

Note: JavaScript identifiers are case-sensitive.

Declaring JavaScript Variables

Creating a variable in JavaScript is called "declaring" a variable.

You declare a JavaScript variable with the var keyword:

var city;

After the declaration, the variable is undefined (it has no value).

To assign a value to the variable, use the equal sign:

city = "New Delhi";

You can also assign a value to the variable when you declare it:

var city = "New Delhi";

In the example below, we create a variable called city and assign the value "New Delhi" to it.

Then we display the value inside a paragraph with id="para":

Run code

Declaring Multiple Variables at Once

You can also declare multiple variables and set their initial values in a single statement. Each variable are separated by commas.

Run code

A declaration can span multiple lines:

Run code

Reassignment JavaScript Variables

You can reassign values to JavaScript variables.

Run code

Re-Declaring JavaScript Variables

If you re-declare a JavaScript variable, it will not lose its value.

The variable city will still have the value "New Delhi" after the execution of these statements:

Run code

JavaScript Data Types

JavaScript variables can hold numbers like 123 and text values like "Hello World".

JavaScript can handle many types of data, but for now, just think of numbers and strings.

JavaScript does not make a distinction between integer values and floating-point values.

Strings are written inside double or single quotes. Numbers are written without quotes.

If you put a number in quotes, it will be treated as a text string.

Run code

You will learn more about data-types later in this tutorial.

The let and const Keywords

ES6 introduces two new keywords let and const for declaring variables.

The let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.

Block scoping means that a new scope is created between a pair of curly brackets {...}.

Run code

The const keyword declares a read-only named constant.

The value of a constant cannot change through reassignment, and it can't be redeclared.

Constants are block-scoped, much like variables defined using the let keyword.

Run code

JavaScript undefined

The undefined value indicates that a variable has not been assigned a value, or not declared at all.

The variable city will have the value undefined after the execution of this statement:

Run code

JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined. JavaScript variables have only two scopes.

  • Global Variables - A global variable has global scope which means it can be defined anywhere in your JavaScript code.
  • Local Variables - A local variable will be visible only within a function where it is defined.

Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable.

Run code

You will learn more about variable scope later in this tutorial.

JavaScript Reserved Words

A list of all the reserved words in JavaScript are given in the following table.

They cannot be used as JavaScript variables, functions, methods, or any object names.

abstract else instanceof switch
boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char finally null true
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
do import static with
double in super