ProgrammingBeginner
JavaScript Basics: Variables and Data Types
Learn the fundamentals of JavaScript variables, including let, const, and var, plus all essential data types.
Written byAlex Rodriguez
PublishedNov 10, 2025
Time30 minutes
5clear steps
Before you begin
- Basic computer literacy
The walkthrough
Step by step.
01
Step 1 of 5
Understanding Variables
Variables are containers for storing data values. In JavaScript, we use let, const, or var to declare variables. Modern JavaScript prefers let and const.
javascript
// Using let - for variables that can change
let age = 25;
age = 26; // This works
// Using const - for variables that won't change
const name = "John";
// name = "Jane"; // This would cause an error
// Var (old way - avoid in modern code)
var oldStyle = "avoid this";Field note
- Use const by default, let when you need to reassign
- Avoid var in modern JavaScript
02
Step 2 of 5
String Data Type
Strings represent text. You can use single quotes, double quotes, or backticks for template literals.
javascript
const greeting = "Hello World";
const name = 'Alice';
const message = `Hello, ${name}!`; // Template literal
// String methods
const text = "JavaScript";
console.log(text.length); // 10
console.log(text.toUpperCase()); // JAVASCRIPT
console.log(text.slice(0, 4)); // JavaField note
- Use template literals for string interpolation
- Strings are immutable in JavaScript
03
Step 3 of 5
Number Data Type
JavaScript has only one number type. It can represent integers and decimals.
javascript
const integer = 42;
const decimal = 3.14;
const negative = -10;
// Math operations
const sum = 10 + 5; // 15
const product = 4 * 3; // 12
const division = 10 / 2; // 5
const remainder = 10 % 3; // 1
// Special number values
const infinity = Infinity;
const notANumber = NaN;Field note
- Be careful with floating-point precision
- Use parseInt() or parseFloat() to convert strings to numbers
04
Step 4 of 5
Boolean and Null/Undefined
Booleans represent true/false. Null and undefined represent absence of value.
javascript
// Boolean
const isActive = true;
const isCompleted = false;
// Comparison operators return booleans
const isEqual = 5 === 5; // true
const isGreater = 10 > 5; // true
// Null - intentional absence of value
const result = null;
// Undefined - variable declared but not assigned
let notAssigned;
console.log(notAssigned); // undefinedField note
- Use === for equality checks (strict equality)
- null is intentional, undefined is accidental
05
Step 5 of 5
Arrays and Objects
Arrays store ordered lists. Objects store key-value pairs.
javascript
// Array
const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // apple
fruits.push("grape"); // Add to end
// Object
const person = {
name: "Alice",
age: 30,
city: "New York"
};
console.log(person.name); // Alice
person.email = "[email protected]"; // Add propertyField note
- Arrays are zero-indexed
- Use dot notation or bracket notation for object properties
Guide complete
