JavaScript Basics

JavaScript Variables

JavaScript variables are used to store data values.

A variable works like a container where you can store information such as text, numbers, user input, or calculation results.

For example, you can store a student name, age, price, total amount, or message inside a variable.

What is a Variable?

A variable is a named storage location for data.

Example:

Example

javascript

let name = "Amit";

In this example:

Part	Meaning
`let`	Used to create a variable
`name`	Variable name
`"Amit"`	Value stored in the variable
`=`	Assignment operator

Here, the variable name stores the value "Amit".

Why Use Variables?

Variables make JavaScript code easier to write, read, and update.

Without variables:

Example

javascript

document.write("Amit");
document.write("Amit");
document.write("Amit");

With variables:

Example

javascript

let name = "Amit";
document.write(name);
document.write(name);
document.write(name);

Now, if you want to change the name, you only need to change it in one place.

Declaring JavaScript Variables

In JavaScript, variables can be declared using:

Keyword	Description
`let`	Used to declare a variable that can be changed
`const`	Used to declare a variable that cannot be changed
`var`	Old way to declare variables

Modern JavaScript mostly uses let and const.

JavaScript let

The let keyword is used to declare a variable whose value can be changed later.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript let</title>
</head>
<body>
  <h1>JavaScript let Example</h1>
  <p id="demo"></p>
  <script>
    let message = "Hello JavaScript!";
    document.getElementById("demo").innerHTML = message;
  </script>
</body>
</html>

In this example, message is a variable created using let.

Changing Variable Value

The value of a variable declared with let can be changed.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Change Variable Value</title>
</head>
<body>
  <h1>Changing Variable Value</h1>
  <p id="demo"></p>
  <script>
    let course = "HTML";
    course = "JavaScript";
    document.getElementById("demo").innerHTML = course;
  </script>
</body>
</html>

In this example, the value of course is changed from "HTML" to "JavaScript".

JavaScript const

The const keyword is used to declare a variable whose value should not be changed.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript const</title>
</head>
<body>
  <h1>JavaScript const Example</h1>
  <p id="demo"></p>
  <script>
    const siteName = "HTML5 and CSS3";
    document.getElementById("demo").innerHTML = siteName;
  </script>
</body>
</html>

Use const when the value should remain the same.

const Value Cannot Be Reassigned

A variable declared with const cannot be reassigned.

Wrong example:

Example

javascript

const language = "JavaScript";
language = "Python";

This will give an error because const values cannot be changed after assignment.

Correct example:

Example

javascript

const language = "JavaScript";

JavaScript var

The var keyword is the old way to declare variables in JavaScript.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript var</title>
</head>
<body>
  <h1>JavaScript var Example</h1>
  <p id="demo"></p>
  <script>
    var city = "Delhi";
    document.getElementById("demo").innerHTML = city;
  </script>
</body>
</html>

The var keyword still works, but let and const are recommended in modern JavaScript.

Variable Names

Variable names are also called identifiers.

A variable name should clearly describe the value it stores.

Good examples:

Example

javascript

let studentName = "Rahul";
let userAge = 22;
let totalPrice = 500;

Bad examples:

Example

javascript

let x = "Rahul";
let y = 22;
let z = 500;

Short names like x, y, and z are not always easy to understand.

Rules for Variable Names

JavaScript variable names must follow some rules.

Rule	Example
Can contain letters	`name`
Can contain digits, but not at the beginning	`name1`
Can contain underscore `_`	`user_name`
Can contain dollar sign `$`	`$price`
Cannot contain spaces	`userName`
Cannot start with a number	`name1`, not `1name`
Cannot be a JavaScript keyword	`userName`, not `let`

Wrong examples:

Example

javascript

let 1name = "Amit";
let user name = "Rahul";
let let = "JavaScript";

Correct examples:

Example

javascript

let name1 = "Amit";
let userName = "Rahul";
let language = "JavaScript";

JavaScript Variable Names are Case-Sensitive

JavaScript variable names are case-sensitive.

This means name, Name, and NAME are different variables.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Case Sensitive Variables</title>
</head>
<body>
  <h1>Case Sensitive Variables</h1>
  <p id="demo"></p>
  <script>
    let name = "Amit";
    let Name = "Rahul";
    document.getElementById("demo").innerHTML = name + " and " + Name;
  </script>
</body>
</html>

Assigning Values to Variables

The = sign is used to assign a value to a variable.

Example:

Example

javascript

let age = 25;

Here, the value 25 is assigned to the variable age.

The = sign does not mean equal in JavaScript. It means assignment.

Variables with Numbers

Variables can store numbers.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Number Variable</title>
</head>
<body>
  <h1>Number Variable</h1>
  <p id="demo"></p>
  <script>
    let price = 100;
    let quantity = 3;
    let total = price * quantity;
    document.getElementById("demo").innerHTML = "Total Price: " + total;
  </script>
</body>
</html>

In this example, variables are used to calculate the total price.

Variables with Strings

Variables can also store text values.

Text values are called strings.

Strings should be written inside quotes.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>String Variable</title>
</head>
<body>
  <h1>String Variable</h1>
  <p id="demo"></p>
  <script>
    let firstName = "Amit";
    let lastName = "Kumar";
    document.getElementById("demo").innerHTML = firstName + " " + lastName;
  </script>
</body>
</html>

Declaring Multiple Variables

You can declare multiple variables separately.

Example

javascript

let firstName = "Amit";
let lastName = "Kumar";
let age = 25;

You can also declare multiple variables in one statement.

Example

javascript

let firstName = "Amit", lastName = "Kumar", age = 25;

For beginners, declaring variables on separate lines is easier to read.

Variable Without Value

A variable can be declared without assigning a value.

Example:

Example

javascript

let message;

Here, message is declared but it has no value yet.

Later, you can assign a value:

Example

javascript

message = "Hello JavaScript";

Complete Example

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Variables Example</title>
</head>
<body>
  <h1>JavaScript Variables</h1>
  <p id="result"></p>
  <script>
    let productName = "Laptop";
    let price = 45000;
    let quantity = 2;
    let totalPrice = price * quantity;
    document.getElementById("result").innerHTML =
      productName + " Total Price: " + totalPrice;
  </script>
</body>
</html>

Try It Yourself

Run the examples in the Try It Editor.

Try changing the variable values, variable names, numbers, and text to understand how variables work.

Important Notes

Variables are used to store data in JavaScript.

Use let when the value may change.

Use const when the value should not change.

Use var only when working with older JavaScript code.

Variable names are case-sensitive.

String values should be written inside quotes.

Common Mistakes

Beginners often forget quotes around string values.

Wrong example:

Example

javascript

let name = Amit;

Correct example:

Example

javascript

let name = "Amit";

Another common mistake is using spaces in variable names.

Wrong example:

Example

javascript

let user name = "Rahul";

Correct example:

Example

javascript

let userName = "Rahul";

Also, do not use const if you need to change the value later.

Wrong example:

Example

javascript

const total = 100;
total = 200;

Use let instead:

Example

javascript

let total = 100;
total = 200;

Conclusion

JavaScript variables are used to store data values.

You can create variables using let, const, and var.

In modern JavaScript, let and const are preferred. Use let for values that can change and const for values that should remain fixed.

Variables are one of the most important concepts in JavaScript because they help store, reuse, and manage data in programs.

PreviousJavaScript Comments