JavaScript - Complete Beginner’s Guide
What is JavaScript? JavaScript is the language of the web. Every interactive thing you see on websites (buttons that respond, pop-ups, animations) is powered by JavaScript. It’s beginner-friendly and super fun to learn!
1. Getting Started: Your First Code
What is a Variable?
A variable is a container that stores information. Think of it like a box where you write a label and put something inside.
// Creating a variable and putting a value in it
let name = "Alice"; // This is a "let" variable - most common
const age = 25; // "const" means this won't change
var city = "New York"; // "var" is the old way (avoid using this)
console.log(name); // Prints: AliceWhy different types?
let- Use this most of the time. You can change it laterconst- Use when you don’t want to change itvar- Old-fashioned. Don’t use it in modern code
Data Types: What Can We Store?
// Strings (text)
let greeting = "Hello!";
let name = 'John'; // Single or double quotes both work
// Numbers (whole or decimal)
let age = 25;
let height = 5.9;
let score = -10; // Negative numbers work too
// Booleans (true or false)
let isRaining = true;
let hasLicense = false;
// null and undefined (advanced - don't worry yet)
let value = null; // Intentionally empty
let unknown = undefined; // Not yet assigned💡 Tip: Use console.log() to print things and see what’s happening!
2. Working with Strings (🟢 Beginner - Text)
Creating and Using Strings
let message = "Welcome to JavaScript!";
// Getting the length
console.log(message.length); // 23
// Combining strings (concatenation)
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName; // "John Doe"
// Easier way with template literals (backticks)
let fullNameV2 = `${firstName} ${lastName}`; // Same result, cleaner!Common String Methods
let text = "Hello World";
// Change case
text.toLowerCase(); // "hello world"
text.toUpperCase(); // "HELLO WORLD"
// Find position
text.indexOf("World"); // 6 (position where "World" starts)
// Extract part of string
text.substring(0, 5); // "Hello"
text.slice(-5); // "World"
// Replace text
text.replace("World", "JavaScript"); // "Hello JavaScript"
// Check if it contains something
text.includes("Hello"); // true
text.startsWith("Hello"); // true
text.endsWith("World"); // true
// Split into array
"apple,banana,orange".split(","); // ["apple", "banana", "orange"]💡 Common Mistake: Forgetting that strings are indexed starting at 0!
3. Numbers and Math
Basic Math Operations
let a = 10;
let b = 3;
a + b; // 13 (addition)
a - b; // 7 (subtraction)
a * b; // 30 (multiplication)
a / b; // 3.33... (division)
a % b; // 1 (remainder/modulo - useful for checking even/odd)
a ** b; // 1000 (exponentiation - power)Math Object (Useful Functions)
// Rounding
Math.round(4.7); // 5
Math.floor(4.9); // 4 (always round down)
Math.ceil(4.1); // 5 (always round up)
// Absolute value (positive number)
Math.abs(-15); // 15
// Random number between 0 and 1
Math.random(); // 0.234857... (different each time)
// Random whole number between 1-10
Math.floor(Math.random() * 10) + 1;
// Min and max
Math.min(5, 2, 9, 1); // 1
Math.max(5, 2, 9, 1); // 9
// Power
Math.pow(2, 3); // 8 (2 to the power of 3)
Math.sqrt(16); // 4 (square root)Why Math.floor(Math.random() * 10) + 1?
Math.random()gives 0.0 to 0.999…- Multiply by 10 → 0 to 9.99…
Math.floor()→ 0 to 9- Add 1 → 1 to 10 ✓
4. Arrays (🟢 Beginner - Lists of Values)
Creating and Accessing Arrays
// Array with items
let fruits = ["apple", "banana", "orange"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "hello", true, 3.14];
// Get item by position (starts at 0!)
fruits[0]; // "apple"
fruits[1]; // "banana"
fruits[2]; // "orange"
fruits[3]; // undefined (doesn't exist)
// Find length
fruits.length; // 3
// Change an item
fruits[1] = "mango"; // ["apple", "mango", "orange"]Adding and Removing Items
let colors = ["red", "blue"];
// Add to end
colors.push("green"); // ["red", "blue", "green"]
colors.push("yellow", "pink"); // Can add multiple!
// Remove from end
colors.pop(); // Removes last item
// Add to beginning
colors.unshift("black"); // Adds to start
// Remove from beginning
colors.shift(); // Removes first item
// Remove item at position
colors.splice(1, 1); // Remove 1 item starting at position 1
colors.splice(1, 2, "orange"); // Remove 2, then insert "orange"Array Methods (Super Useful!)
let nums = [1, 2, 3, 4, 5];
// Check if value exists
nums.includes(3); // true
nums.indexOf(3); // 2 (position of value 3)
// Combine arrays
let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2); // [1, 2, 3, 4]
// Reverse order
nums.reverse(); // [5, 4, 3, 2, 1]
// Sort (careful! numbers sort as strings by default)
[3, 1, 4, 1, 5].sort(); // [1, 1, 3, 4, 5]
// Join into string
nums.join("-"); // "1-2-3-4-5"
// Map (transform each item)
let doubled = nums.map(n => n * 2); // [2, 4, 6, 8, 10]
// Filter (keep only items that match)
let evenOnly = nums.filter(n => n % 2 === 0); // [2, 4]
// Find (get first matching item)
let firstEven = nums.find(n => n % 2 === 0); // 2
// Check if all match condition
nums.every(n => n > 0); // true (all positive)
// Check if any match condition
nums.some(n => n > 4); // true (5 is greater than 4)5. Objects (🟡 Intermediate - Collections of Properties)
Creating Objects
// Object with key-value pairs
let person = {
name: "John",
age: 30,
city: "New York"
};
// Access properties
person.name; // "John"
person["age"]; // 30 (bracket notation also works)
// Add property
person.email = "john@example.com";
// Change property
person.age = 31;
// Delete property
delete person.city;Objects with Methods (Functions Inside!)
let calculator = {
name: "My Calculator",
lastResult: 0,
add: function(a, b) {
this.lastResult = a + b;
return this.lastResult;
},
multiply: function(a, b) {
this.lastResult = a * b;
return this.lastResult;
}
};
calculator.add(5, 3); // 8
calculator.multiply(4, 2); // 8
calculator.lastResult; // 8 (saved by method)Object Shortcuts
// Modern syntax (cleaner!)
let person = {
name: "Alice",
greet() {
return `Hello, I'm ${this.name}`;
}
};
person.greet(); // "Hello, I'm Alice"6. Control Flow: Making Decisions
If / Else Statements
let age = 15;
if (age >= 18) {
console.log("You can vote!");
} else if (age >= 13) {
console.log("You're a teenager");
} else {
console.log("You're a child");
}
// Output: "You're a teenager"Comparison Operators
// Equal to
5 == 5; // true
5 == "5"; // true (loose equality - converts types)
5 === "5"; // false (strict equality - must be same type!)
// Not equal
5 != 5; // false
5 !== "5"; // true
// Greater/Less than
10 > 5; // true
5 < 10; // true
5 >= 5; // true
5 <= 4; // false
// Logical operators
true && false; // false (AND - both must be true)
true || false; // true (OR - at least one true)
!true; // false (NOT - opposite)
// Combining conditions
age >= 18 && hasLicense; // Both must be true
age < 13 || age > 60; // At least one must be true⚠️ Important: Always use === not ==! It’s safer and more predictable.
Switch Statements
let dayNumber = 1;
switch(dayNumber) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("Unknown day");
}
// Output: "Monday"7. Loops (Repeating Code)
For Loop
// Repeat 5 times
for (let i = 0; i < 5; i++) {
console.log(i); // Prints 0, 1, 2, 3, 4
}
// Loop through array
let colors = ["red", "blue", "green"];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}While Loop
let count = 0;
while (count < 5) {
console.log(count); // 0, 1, 2, 3, 4
count++;
}
// Do-while (runs at least once)
do {
console.log("This runs at least once");
} while (false); // Even though condition is false!Better Ways to Loop (Recommended)
let numbers = [1, 2, 3, 4, 5];
// forEach - loops through each item
numbers.forEach(function(num) {
console.log(num);
});
// Same with arrow function (cleaner!)
numbers.forEach(num => console.log(num));
// for...of - modern and simple
for (let num of numbers) {
console.log(num);
}
// for...in - loops through object properties
let person = { name: "John", age: 30 };
for (let key in person) {
console.log(key, person[key]);
}
// Output: name John
// age 30💡 Tip: Use forEach or for...of instead of traditional for loops in modern code!
8. Functions (🟢 Beginner - Reusable Code)
Basic Functions
// Simple function
function greet(name) {
return `Hello, ${name}!`;
}
greet("Alice"); // "Hello, Alice!"
// Multiple parameters
function add(a, b) {
return a + b;
}
add(5, 3); // 8
// With default values
function welcome(name = "Guest") {
return `Welcome, ${name}!`;
}
welcome(); // "Welcome, Guest!"
welcome("John"); // "Welcome, John!"Arrow Functions (Modern Syntax)
// Traditional
const multiply = function(a, b) {
return a * b;
};
// Arrow function (shorter!)
const multiply = (a, b) => {
return a * b;
};
// Even shorter for single line
const multiply = (a, b) => a * b;
// Single parameter (parentheses optional)
const square = x => x * x;
// No parameters
const random = () => Math.random();
// With array methods
[1, 2, 3].map(x => x * 2); // [2, 4, 6]Function Best Practices
// ✅ Good: Clear name, does one thing
function calculateTotalPrice(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
// ❌ Bad: Unclear name, does too much
function process(x) {
// ... multiple responsibilities
}
// ✅ Good: Handles edge cases
function divide(a, b) {
if (b === 0) {
return "Cannot divide by zero";
}
return a / b;
}
// ✅ Good: Returns early to avoid nesting
function getUserInfo(id) {
if (!id) return null;
if (id < 0) return null;
// ... continue processing
}9. Prototypes & Inheritance (🔴 Advanced - JavaScript’s Object Model)
What are Prototypes?
Every JavaScript object has a prototype - a template object it inherits from. This is how JavaScript implements inheritance.
// Simple object
const person = {
name: "Alice",
greet() {
return `Hello, I'm ${this.name}`;
}
};
console.log(person.greet()); // "Hello, I'm Alice"
// Prototypes let us add methods to all objects of a type
Object.getPrototypeOf(person); // See the prototypeWhy prototypes matter? They’re how JavaScript shares code between objects without duplication.
Constructor Functions & the New Keyword
// Constructor function (capitalized by convention)
function Dog(name, breed) {
this.name = name;
this.breed = breed;
}
// Add method to prototype
Dog.prototype.bark = function() {
return `${this.name} says woof!`;
};
// Create objects with new
const dog1 = new Dog("Rex", "Golden Retriever");
const dog2 = new Dog("Buddy", "German Shepherd");
console.log(dog1.bark()); // "Rex says woof!"
console.log(dog2.bark()); // "Buddy says woof!"
// Both dogs share the same bark method (memory efficient)
console.log(dog1.bark === dog2.bark); // trueWhy use constructor functions? Create multiple objects with the same structure and shared methods.
Prototype Chain
// Objects inherit from their prototype
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
return `${this.name} makes a sound`;
};
function Cat(name, color) {
Animal.call(this, name); // Call parent constructor
this.color = color;
}
// Set up inheritance - Cat's prototype is an Animal
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat; // Restore constructor
Cat.prototype.speak = function() {
return `${this.name} says meow!`;
};
const cat = new Cat("Whiskers", "orange");
console.log(cat.speak()); // "Whiskers says meow!"
console.log(cat.name); // "Whiskers"
console.log(cat.color); // "orange"
// The chain: cat → Cat.prototype → Animal.prototype → Object.prototypeES6 Classes (Modern Way)
// Modern classes are syntactic sugar over prototypes
class Animal {
constructor(name) {
this.name = name;
}
speak() {
return `${this.name} makes a sound`;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // Call parent constructor
this.breed = breed;
}
speak() {
return `${this.name} says woof!`;
}
}
const dog = new Dog("Rex", "Lab");
console.log(dog.speak()); // "Rex says woof!"Under the hood: Classes are just syntactic sugar for prototypes. They do the same thing but look cleaner.
This Keyword & Context
const person = {
name: "Alice",
age: 25,
// this refers to the object
greet() {
console.log(`Hello, I'm ${this.name}`);
}
};
person.greet(); // "Hello, I'm Alice" - this = person
// But be careful!
const greetFunction = person.greet;
greetFunction(); // "Hello, I'm undefined" - this is lost!
// Fix with bind
const boundGreet = person.greet.bind(person);
boundGreet(); // "Hello, I'm Alice" - this is bound
// Arrow functions don't have their own this
const person2 = {
name: "Bob",
greet: () => {
console.log(`Hello, I'm ${this.name}`); // this from outer scope
}
};Why this matters? Understanding this prevents bugs with callbacks and event handlers.
Checking Instance Type
class Dog {
bark() { return "woof"; }
}
const dog = new Dog();
// Check if object is instance of class
console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // false
// Check if method exists
console.log("bark" in dog); // true
console.log(dog.hasOwnProperty("bark")); // false (it's in prototype)10. Working with Events (User Interactions)
Listening for Clicks and Inputs
// HTML: <button id="myButton">Click me</button>
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log("Button was clicked!");
});
// With arrow function
button.addEventListener("click", () => {
alert("You clicked the button!");
});
// Multiple events
document.addEventListener("keypress", (event) => {
console.log(`You pressed: ${event.key}`);
});Common Events
// Click
element.addEventListener("click", handler);
// Input/Change
input.addEventListener("input", handler); // While typing
input.addEventListener("change", handler); // When done typing
// Mouse
element.addEventListener("mouseover", handler);
element.addEventListener("mouseout", handler);
// Keyboard
document.addEventListener("keydown", handler);
document.addEventListener("keyup", handler);
// Form
form.addEventListener("submit", handler);10. Common Patterns & Best Practices
Null Checking (Avoiding Errors)
// ❌ Bad: Can crash if user is null
let name = user.name;
// ✅ Good: Check first
if (user && user.name) {
let name = user.name;
}
// ✅ Even better: Optional chaining (modern)
let name = user?.name;
// ✅ Nullish coalescing (default value)
let name = user?.name ?? "Unknown";Working with Undefined
// Check if variable is defined
if (typeof myVar !== "undefined") {
// Safe to use myVar
}
// Provide default value
let result = myVar || "default";
// Modern way (better!)
let result = myVar ?? "default";Try/Catch (Error Handling)
try {
// Code that might error
let result = riskyFunction();
console.log(result);
} catch (error) {
// Handle the error
console.log("An error occurred:", error.message);
} finally {
// Always runs
console.log("Done!");
}Timing (setTimeout and setInterval)
// Run code after delay
setTimeout(() => {
console.log("This runs after 2 seconds");
}, 2000);
// Run code repeatedly
let counter = 0;
let interval = setInterval(() => {
counter++;
console.log(counter);
if (counter === 5) {
clearInterval(interval); // Stop it
}
}, 1000);11. Practical Examples
Temperature Converter
function celsiusToFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
function fahrenheitToCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
console.log(celsiusToFahrenheit(0)); // 32
console.log(fahrenheitToCelsius(98.6)); // 37Check Password Strength
function checkPasswordStrength(password) {
if (password.length < 8) return "Too short (min 8)";
if (!/[A-Z]/.test(password)) return "Need uppercase letter";
if (!/[0-9]/.test(password)) return "Need number";
if (!/[!@#$%^&*]/.test(password)) return "Need special character";
return "Strong password!";
}
console.log(checkPasswordStrength("Pass123!")); // "Strong password!"
console.log(checkPasswordStrength("weak")); // "Too short (min 8)"Find Most Common Element
function mostCommon(arr) {
let counts = {};
arr.forEach(item => {
counts[item] = (counts[item] || 0) + 1;
});
let max = 0;
let maxItem = null;
for (let item in counts) {
if (counts[item] > max) {
max = counts[item];
maxItem = item;
}
}
return maxItem;
}
console.log(mostCommon([1, 2, 2, 3, 3, 3, 4])); // 312. Debugging Tips
// Print values to console
console.log("Value:", myVar);
// Warning level
console.warn("This might be a problem");
// Error level
console.error("Something went wrong!");
// Group related logs
console.group("User Info");
console.log("Name:", name);
console.log("Age:", age);
console.groupEnd();
// Table (shows arrays/objects nicely)
console.table([
{ name: "John", age: 30 },
{ name: "Jane", age: 25 }
]);
// Assertion (prints error if false)
console.assert(age > 0, "Age must be positive");
// Timing
console.time("myTimer");
// ... code to measure
console.timeEnd("myTimer"); // Prints how long it tookNext Steps
- Practice with HTML: Create a simple web page and use JavaScript to make it interactive
- Build Projects: Make a calculator, to-do list, or game
- Learn DOM: Understand how to change HTML/CSS from JavaScript
- Async JavaScript: Learn about Promises and async/await
- Modern Features: Destructuring, spread operator, classes
You’re doing great! JavaScript takes practice, but you’ll get there. Happy coding! 🎉