Before learning React, one of the most important basics you must master is JavaScript variables and data types. React relies heavily on storing and updating values—so understanding how JS handles variables makes everything else easier.

---

1. What Are Variables in JavaScript?

A variable is a container used to store data.
Example:

let age = 25;

Here, age is a variable storing the value 25.

JavaScript offers three ways to declare variables:

1. var
2. let
3. const

React developers mostly use let and const, not var.

---

2. Difference Between var, let, and const

✔ var (Old and Avoided in Modern JS)

• Introduced in early JavaScript
• Function-scoped
• Allows redeclaration
• Causes bugs in large applications

Example:

var x = 10;
var x = 20; // Allowed

✔ let (Block Scoped & Most Used)

• Block scoped ({})
• Cannot be redeclared
• Can be updated

Example:

let name = "Sagar";
name = "Sidana"; // Allowed

✔ const (Constant Value)

• Block scoped
• Cannot be updated
• Must be initialized

Example:

const pi = 3.14;

In React, you use const for:

• Components
• Hooks like useState
• Function declarations

---

3. JavaScript Data Types

JavaScript has primitive and non-primitive types.

---

A. Primitive Data Types

1. String

let user = "Sagar";

2. Number

let price = 99.99;

3. Boolean

let isLoggedIn = true;

4. Undefined

Variable declared but no value assigned.

let x;

5. Null

Represents intentional empty value.

let data = null;

6. BigInt

Large integers.

let bigNumber = 12345678901234567890n;

7. Symbol

Unique identifiers.

---

B. Non-Primitive (Reference) Data Types

1. Object

Most important type for React!

const person = { name: "Sagar", age: 24 };

2. Array

React uses arrays heavily for lists.

const items = [1, 2, 3];

3. Function

Functions are first-class citizens.

function greet() {
  return "Hello";
}

---

4. Dynamic Typing in JavaScript

JavaScript is dynamically typed, meaning a variable can change type.

Example:

let value = "Hello"; // string
value = 30;          // now number

This flexibility is powerful but requires careful handling when building large React applications.

---

5. How This Relates to React

React uses variables and data types everywhere:

✔ State values
✔ Props
✔ Arrays for rendering lists
✔ Objects for component data
✔ Functions for event handling

Example React snippet:

const [count, setCount] = useState(0);

Here:

• count → variable
• 0 → number data type
• setCount → function

Understanding this JS foundation makes React development smooth and error-free.

---

6. Quick Practice Quiz

Try these to test yourself:

1. What is the difference between let and const?
2. What data type is null?
3. Can you redeclare a var variable?

(Answers: let vs const – const cannot be reassigned; null is an object; yes var can be redeclared.)

---

Conclusion

Variables and data types form the backbone of JavaScript. Mastering them prepares you for more advanced concepts like functions, DOM manipulation, and eventually React components, hooks, and state management.

---

Citations

https://savanka.com/category/learn/js/
https://www.w3schools.com/js/