Programming Language

JavaScript

Complete beginner-friendly guide to JavaScript with practical examples and best practices

Last Updated Jan 2026
Premium Documentation

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: Alice

Why different types?

  • let - Use this most of the time. You can change it later
  • const - Use when you don’t want to change it
  • var - 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 prototype

Why 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);  // true

Why 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.prototype

ES6 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)); // 37

Check 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]));  // 3

12. 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 took


Next Steps

  1. Practice with HTML: Create a simple web page and use JavaScript to make it interactive
  2. Build Projects: Make a calculator, to-do list, or game
  3. Learn DOM: Understand how to change HTML/CSS from JavaScript
  4. Async JavaScript: Learn about Promises and async/await
  5. Modern Features: Destructuring, spread operator, classes

You’re doing great! JavaScript takes practice, but you’ll get there. Happy coding! 🎉