Summary: in this tutorial, you will learn about JavaScript variables and how to to declare the variables in JavaScript.
What is Variable?
Variables are fundamental to all programming languages. Variables are used to store data, like string of text, numbers, etc. 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, like this: var varName = value;
|
1 2 3 |
var name = "Peter Parker"; var age = 21; var isMarried = false; |
Try This Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Creating Variables in JavaScript</title> </head> <body> <script> // Creating variables var name = "Peter Parker"; var age = 21; var isMarried = false; // Printing variable values document.write(name + "<br>"); document.write(age + "<br>"); document.write(isMarried); </script> </body> </html> |
Tip: Always give meaningful names to your variables. Additionally, for naming the variables that contain multiple words, camelCase is commonly used. In this convention all words after the first should have uppercase first letters, e.g. myLongVariableName.
In the above example we have created three variables, first one has assigned with a string value, the second one has assigned with a number, whereas the last one assigned with a boolean value. Variables can hold different types of data, we’ll learn about them in later chapter.
In JavaScript, variables can also be declared without having any initial values assigned to them. This is useful for variables which are supposed to hold values like user inputs.
|
1 2 3 4 5 |
// Declaring Variable var userName; // Assigning value userName = "Clark Kent"; |
Try This Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Declaring Variables in JavaScript</title> </head> <body> <script> // Declaring Variable var userName; // Assigning value userName = "Clark Kent"; // Printing variable values document.write(userName); </script> </body> </html> |
Note: In JavaScript, if a variable has been declared, but has not been assigned a value explicitly, is automatically assigned the value undefined.
Declaring Multiple Variables at Once
In addition, you can also declare multiple variables and set their initial values in a single statement. Each variable are separated by commas, as demonstrated in the following example:
|
1 2 3 4 5 6 7 8 |
// Declaring multiple Variables var name = "Peter Parker", age = 21, isMarried = false; /* Longer declarations can be written to span multiple lines to improve the readability */ var name = "Peter Parker", age = 21, isMarried = false; |
Try This Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Declaring Multiple Variables in JavaScript</title> </head> <body> <script> // Declaring multiple Variables var name = "Peter Parker", age = 21, isMarried = false; // Printing variable values document.write(name + "<br>"); document.write(age + "<br>"); document.write(isMarried); </script> </body> </html> |
The let and const Keywords ES6
ES6 introduces two new keywords let and const for declaring variables.
The const keyword works exactly the same as let, except that variables declared using const keyword cannot be reassigned later in the code. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 |
// Declaring variables let name = "Harry Potter"; let age = 11; let isStudent = true; // Declaring constant const PI = 3.14; console.log(PI); // 3.14 // Trying to reassign PI = 10; // error |
Try This Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Declaring Variables with let and const Keywords in JavaScript</title> </head> <body> <script> // Declaring variables let name = "Harry Potter"; let age = 11; let isStudent = true; // Printing variable values document.write(name + "<br>"); document.write(age + "<br>"); document.write(isStudent + "<br>"); // Declaring constant const PI = 3.14; // Printing constant value document.write(PI); // 3.14 // Trying to reassign PI = 10; // error </script> <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p> </body> </html> |
Unlike var, which declare function-scoped variables, both let and const keywords declare variables, scoped at block-level ({}). Block scoping means that a new scope is created between a pair of curly brackets {}. We’ll discuss this in detail later, in JavaScript ES6 features chapter.
Note: The let and const keywords are not supported in older browsers like IE10. IE11 support them partially. See the JS ES6 features chapter to know how to start using ES6 today.
Naming Conventions for JavaScript Variables
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: Variable names in JavaScript are case sensitive, it means $myvar and $myVar are two different variables. So be careful while defining variable names.
