JavaScript Variables and Data Types

By /

When you write a JavaScript program, you often need to store information. For example, a program may need to remember a person’s name, age, marks, price, or whether something is true or false. JavaScript uses variables to store this information.

In this JavaScript Variables and Data Types chapter, you will learn how to create variables and work with the most common data types in JavaScript.

What is a Variable?

A variable is a named container used to store a value. For example, if you want to store a student’s name, you can create a variable called studentName. A variable can store different types of values, such as text, numbers, or true and false values.

Let’s start with a simple example.

Example: Creating a Variable

Copy the complete code below, save it as index.html, and open it in your browser.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Variables</title>
</head>
<body>

    <h1>JavaScript Variables</h1>

    <script>
        let studentName = "Aman";

        console.log(studentName);
    </script>

</body>
</html>

Open the browser console by pressing F12 and selecting the Console tab.

You will see:

Aman

Here, studentName is the variable and "Aman" is the value stored in it.

Creating Variables in JavaScript

Modern JavaScript provides three keywords for creating variables:

  • let
  • const
  • var

You will mostly use let and const in modern JavaScript. var is an older way of creating variables that you may still see in existing code.

Let’s understand them one by one.

The let Keyword

Use let when the value of a variable may change later.

For example, a student’s age can change over time.

Example: Using let

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript let</title>
</head>
<body>

    <h1>Using let in JavaScript</h1>

    <script>
        let age = 14;

        console.log("Before:", age);

        age = 15;

        console.log("After:", age);
    </script>

</body>
</html>

Output:

Before: 14
After: 15

The value of age changed from 14 to 15. Notice that we used let only when creating the variable. When changing its value, we simply wrote:

age = 15;

The const Keyword

Use const when you do not want to assign a new value to a variable later.

For example, suppose you create a variable to store the name of a country.

Example: Using const

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript const</title>
</head>
<body>

    <h1>Using const in JavaScript</h1>

    <script>
        const country = "India";

        console.log(country);
    </script>

</body>
</html>

Output:

India

You should not try to assign a new value to country.

For example, this would cause an error:

const country = "India";
country = "Japan";

For modern JavaScript, a simple rule is: Use const by default. Use let when the value needs to change.

The var Keyword

var is an older way to create variables. You may see it in older JavaScript programs and tutorials.

Example: Using var

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript var</title>
</head>
<body>

    <h1>Using var in JavaScript</h1>

    <script>
        var name = "Rahul";

        console.log(name);
    </script>

</body>
</html>

Output:

Rahul

For new JavaScript code, prefer let and const.

let vs const vs var

KeywordCan the value change?Commonly used in modern JavaScript?
letYesYes
constNo reassignmentYes
varYesMostly older code

You will use let and `const throughout this JavaScript tutorial.

Variable Naming Rules

JavaScript has some rules for naming variables.

A variable name:

  • Can contain letters, numbers, _, and $.
  • Cannot start with a number.
  • Cannot contain spaces.
  • Cannot use JavaScript reserved words.
  • Is case-sensitive.

These are valid variable names:

studentName
studentAge
totalMarks
price2
_userName

This is not valid:

2student

A variable name cannot start with a number.

This is also not valid:

student name

A variable name cannot contain spaces.

Use Clear Variable Names

Try to use names that tell you what the variable contains.

Good:

studentName
studentAge
totalMarks

Not very clear:

x
a
value1

Clear variable names make your code easier to read.

JavaScript Data Types

A variable can contain different types of values.

The type of value stored in a variable is called its data type.

For example:

  • "Aman" is a string.
  • 14 is a number.
  • true is a Boolean.

JavaScript has several data types, but beginners should first become comfortable with these common ones:

  1. String
  2. Number
  3. Boolean
  4. Undefined
  5. Null
  6. Object

Let’s look at them one by one.

String

A string is text. You can write strings using single quotes, double quotes, or backticks.

Example: JavaScript String

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript String</title>
</head>
<body>

    <h1>JavaScript Strings</h1>

    <script>
        let name = "Aman";
        let city = "Delhi";
        let message = `Welcome to JavaScript`;

        console.log(name);
        console.log(city);
        console.log(message);
    </script>

</body>
</html>

Output:

Aman
Delhi
Welcome to JavaScript

Strings are used whenever your program needs to work with text.

Number

The number data type is used for numbers. It can store whole numbers and decimal numbers.

Example: JavaScript Numbers

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Numbers</title>
</head>
<body>

    <h1>JavaScript Numbers</h1>

    <script>
        let age = 14;
        let price = 499;
        let temperature = 36.5;

        console.log("Age:", age);
        console.log("Price:", price);
        console.log("Temperature:", temperature);
    </script>

</body>
</html>

Output:

Age: 14
Price: 499
Temperature: 36.5

You can also perform calculations using numbers.

Example: Calculation with Numbers

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Calculation</title>
</head>
<body>

    <h1>Shopping Total</h1>

    <script>
        let price = 500;
        let quantity = 2;

        let total = price * quantity;

        console.log("Price:", price);
        console.log("Quantity:", quantity);
        console.log("Total:", total);
    </script>

</body>
</html>

Output:

Price: 500
Quantity: 2
Total: 1000

We will learn more about calculations and operators in the next chapter.

Boolean

A Boolean can have only two values:

  • true
  • false

Booleans are useful when a program needs a yes/no or true/false value.

Example: Boolean Values

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Boolean</title>
</head>
<body>

    <h1>JavaScript Boolean</h1>

    <script>
        let isStudent = true;
        let hasPassed = false;

        console.log("Is Student:", isStudent);
        console.log("Has Passed:", hasPassed);
    </script>

</body>
</html>

Output:

Is Student: true
Has Passed: false

Booleans become especially useful when working with if statements and other conditions.

Undefined

A variable has the value undefined when it has been declared but no value has been assigned to it.

Example: Undefined

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Undefined</title>
</head>
<body>

    <h1>Undefined Example</h1>

    <script>
        let result;

        console.log(result);
    </script>

</body>
</html>

Output:

undefined

Here, the variable result exists, but we have not given it a value.

Null

null represents an intentionally empty value.

Example: Null

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Null</title>
</head>
<body>

    <h1>Null Example</h1>

    <script>
        let selectedUser = null;

        console.log(selectedUser);
    </script>

</body>
</html>

Output:

null

A simple way to remember the difference is:

  • undefined usually means a value has not been assigned.
  • null means you intentionally set the value to nothing.

Checking Data Types with typeof

JavaScript provides the typeof operator to check the type of a value.

Example: Using typeof

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript typeof</title>
</head>
<body>

    <h1>Checking Data Types</h1>

    <script>
        let name = "Aman";
        let age = 14;
        let isStudent = true;

        console.log(typeof name);
        console.log(typeof age);
        console.log(typeof isStudent);
    </script>

</body>
</html>

Output:

string
number
boolean

This can be useful when you are working with different types of data.

A Practical Example

Let’s put variables and different data types together. Imagine you want to store information about a student.

Example: Student Information

<!DOCTYPE html>
<html>
<head>
    <title>Student Information</title>
</head>
<body>

    <h1>Student Information</h1>

    <script>
        const studentName = "Aman";
        let age = 15;
        const course = "JavaScript";
        let marks = 85;
        const isStudent = true;

        console.log("Name:", studentName);
        console.log("Age:", age);
        console.log("Course:", course);
        console.log("Marks:", marks);
        console.log("Is Student:", isStudent);
    </script>

</body>
</html>

Output:

Name: Aman
Age: 15
Course: JavaScript
Marks: 85
Is Student: true

Here, the program uses different types of values:

  • studentName contains a string.
  • age contains a number.
  • course contains a string.
  • marks contains a number.
  • isStudent contains a Boolean.

This is how variables are used in real programs: they hold information that the program needs.

Try It Yourself

Now create your own information program.

Copy the complete code below and change the values to your own information.

<!DOCTYPE html>
<html>
<head>
    <title>My Information</title>
</head>
<body>

    <h1>My Information</h1>

    <script>
        const name = "Your Name";
        let age = 14;
        const city = "Delhi";
        let marks = 90;
        const isStudent = true;

        console.log("Name:", name);
        console.log("Age:", age);
        console.log("City:", city);
        console.log("Marks:", marks);
        console.log("Student:", isStudent);
    </script>

</body>
</html>

Replace "Your Name" with your name and change the age, city, and marks. Run the program and check the browser console.

Key Points

  • Variables are used to store information.
  • let is used when a variable’s value can change.
  • const is used when a variable should not be reassigned.
  • var is an older way to create variables.
  • A string stores text.
  • A number stores numeric values.
  • A Boolean stores true or false.
  • undefined means a value has not been assigned.
  • null represents an intentionally empty value.
  • typeof can be used to check a data type.
  • Clear variable names make programs easier to read.

Now you know how JavaScript stores different types of information. In the next chapter, we will use these values with JavaScript Operators to perform calculations, comparisons, and logical operations.

Frequently Asked Questions (FAQs)

Q1. What are JavaScript variables used for?

JavaScript variables are used to store information that a program needs, such as names, ages, prices, marks, and other values. The stored value can be used or changed during program execution.

Q2. What are the main JavaScript data types for beginners?

Common JavaScript data types include String, Number, Boolean, Undefined, Null, and Object. Strings store text, numbers store numeric values, and Booleans represent true or false.

Q3. What is the difference between let, const, and var in JavaScript?

JavaScript let const var are three keywords used to declare variables. let allows reassignment, const prevents reassignment, while var is an older declaration method that is mainly found in existing JavaScript code.

Q4. How do you declare a variable in JavaScript?

A JavaScript variable declaration can be created using let, const, or var. For example, let age = 15; creates a variable named age and assigns it the value 15.

Q5. How can you check the data type of a JavaScript variable?

You can use the typeof operator. For example, typeof age returns "number" when age contains a numeric value. JavaScript typeof is useful for checking the type of a value during development.

Q6. What is the difference between undefined and null in JavaScript?

undefined usually means a variable has been declared but has not been assigned a value. null is an explicitly assigned value that represents an intentional absence of a value.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top