DEV Community

Cover image for JavaScript Variables and Data Types (Beginner Guide)
Harman Panwar
Harman Panwar

Posted on

JavaScript Variables and Data Types (Beginner Guide)

1. What Are Variables?

Think of a variable like a box that stores information.

Imagine you have labeled boxes:

One box stores your name

Another stores your age

Another stores whether you are a student

In programming, we store information inside variables so the computer can use it later.

Example:

let name = "Rahul";
let age = 18;
Enter fullscreen mode Exit fullscreen mode

Here:

name stores "Rahul"

age stores 18

So a variable is simply a container for storing data.

2. How to Declare Variables in JavaScript

In JavaScript, we can create variables using three keywords:

  • var
  • let
  • const

Using var

var city = "Delhi";
Enter fullscreen mode Exit fullscreen mode

varwas used in older JavaScript versions. It still works but is less recommended today.

Using let

let age = 20;
Enter fullscreen mode Exit fullscreen mode

letis commonly used when the value may change later.

Example:

let score = 10;
score = 15;

Enter fullscreen mode Exit fullscreen mode

Now scorebecomes 15.

Using const

const country = "India";
Enter fullscreen mode Exit fullscreen mode

constmeans constant, which means the value cannot be changed later.

Example:

const pi = 3.14;

Enter fullscreen mode Exit fullscreen mode

Trying to change it will cause an error.

3. Primitive Data Types in JavaScript

A data type describes what kind of value a variable stores.

JavaScript has several primitive data types.

1. String

A string stores text.

Example:

let name = "Aman";

Enter fullscreen mode Exit fullscreen mode

Other examples:

let city = "Mumbai";
let message = "Hello World";
Enter fullscreen mode Exit fullscreen mode

Strings are written inside quotes ("" or '').

2. Number

A **number **stores numeric values.

Example:

let age = 18;
let price = 99.99;
Enter fullscreen mode Exit fullscreen mode

Numbers can be:

Whole numbers → 20

Decimal numbers → 10.5

3. Boolean

A boolean stores only two values:

  • true
  • false

Example:

let isStudent = true;
let isLoggedIn = false;
Enter fullscreen mode Exit fullscreen mode

This type is commonly used for conditions and decisions.

4. Null

nullrepresents an empty value.

Example:

let result = null;

Enter fullscreen mode Exit fullscreen mode

It means the variable exists but currently has no value.

5. Undefined

A variable is undefined when it is declared but not given a value.

Example:

let score;

Enter fullscreen mode Exit fullscreen mode

Since we didn't assign anything, the value is undefined.

4. Difference Between var, let, and const

Keyword Can Change Value? Modern Usage
var Yes Mostly avoided
let Yes Recommended
const No Recommended for fixed values

Example:

let age = 18;
age = 19; // allowed

const country = "India";
country = "USA"; // error
Enter fullscreen mode Exit fullscreen mode

5. What is Scope? (Beginner Explanation)

Scope means where a variable can be used in your code.

Think of scope like rooms in a house.

If you keep a box in your bedroom, it can only be accessed in that room.

Similarly, some variables can only be used inside certain parts of the code.

Example:

{
  let message = "Hello";
  console.log(message);
}
Enter fullscreen mode Exit fullscreen mode

Here message works inside the block, but outside it cannot be used.

This helps keep code organized and safe.

6. Practical Example

let name = "Rohan";
let age = 19;
let isStudent = true;

console.log(name);
console.log(age);
console.log(isStudent);
Enter fullscreen mode Exit fullscreen mode

Output in console:

Rohan
19
true

Assignment Practice

Try writing the following code:

let name = "Rahul";
let age = 18;
let isStudent = true;

console.log(name);
console.log(age);
console.log(isStudent);

Enter fullscreen mode Exit fullscreen mode

Now experiment:

  1. Change the value of name
  2. Change the value of age
  3. Try creating a constvariable and change it

Example:

const country = "India";
country = "USA"; // observe the error
Enter fullscreen mode Exit fullscreen mode

Observe how JavaScript behaves.

Top comments (0)