JavaScript for Beginners 2026: Complete Step-by-Step Guide

// Your very first JavaScript
console.log("Hello, JavaScript!");  // prints to console

// Calculate in the console
console.log(2 + 2);     // 4
console.log(10 * 5);    // 50
console.log(Math.sqrt(16));  // 4

// Three ways to declare variables
const name = "Alice";    // constant (can't reassign)
let age = 25;            // can reassign
var old = "avoid";       // old way, use const/let

// Data types
const str = "Hello";        // String
const num = 42;             // Number
const decimal = 3.14;       // Also Number (no int/float distinction)
const bool = true;          // Boolean
const nothing = null;       // Null (intentionally empty)
let notSet;                 // Undefined (not set yet)

// Check type
console.log(typeof "hello");  // "string"
console.log(typeof 42);      // "number"
console.log(typeof true);    // "boolean"

// String operations
const firstName = "John";
const lastName = "Doe";
const fullName = firstName + " " + lastName;     // concatenation
const greeting = `Hello, ${firstName}!`;          // template literal (better!)
console.log(greeting.toUpperCase());              // "HELLO, JOHN!"
console.log(greeting.includes("John"));           // true
console.log(greeting.length);                     // 12

// Arrays — ordered list of values
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);          // "apple" (0-indexed)
console.log(fruits.length);      // 3

fruits.push("date");             // add to end
fruits.pop();                    // remove from end
const removed = fruits.shift();  // remove from start
fruits.unshift("avocado");       // add to start

// Array methods
const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
const doubled = numbers.map(n => n * 2);      // [6, 2, 8, ...]
const evens = numbers.filter(n => n % 2 === 0); // [4, 2, 6]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 31
const sorted = [...numbers].sort((a, b) => a - b);  // [1, 1, 2, 3, 4, 5, 6, 9]

// Objects — key-value pairs
const person = {
  name: "Alice",
  age: 30,
  isActive: true,
  address: {
    city: "Sydney",
    country: "Australia"
  }
};

console.log(person.name);         // "Alice"
console.log(person["age"]);       // 30
console.log(person.address.city); // "Sydney"

// Destructuring
const { name, age } = person;    // extract specific fields
const { address: { city } } = person;  // nested destructuring

// Function declaration
function add(a, b) {
  return a + b;
}

// Arrow function (preferred in modern JS)
const multiply = (a, b) => a * b;
const square = n => n * n;  // single param, no parentheses needed

// Default parameters
function greet(name = "World") {
  return `Hello, ${name}!`;
}
console.log(greet());        // "Hello, World!"
console.log(greet("Alice")); // "Hello, Alice!"

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

// Higher-order functions (functions as arguments)
function applyTwice(fn, value) {
  return fn(fn(value));
}
console.log(applyTwice(square, 3)); // 81 (3^2 = 9, 9^2 = 81)

<!-- HTML setup -->
<div id="counter">
  <h2 id="count">0</h2>
  <button id="btn-inc">+1</button>
  <button id="btn-dec">-1</button>
  <button id="btn-reset">Reset</button>
</div>

// JavaScript to make it interactive
let count = 0;
const countEl = document.getElementById('count');

function updateDisplay() {
  countEl.textContent = count;
  countEl.style.color = count > 0 ? 'green' : count < 0 ? 'red' : 'black';
}

document.getElementById('btn-inc').addEventListener('click', () => {
  count++;
  updateDisplay();
});

document.getElementById('btn-dec').addEventListener('click', () => {
  count--;
  updateDisplay();
});

document.getElementById('btn-reset').addEventListener('click', () => {
  count = 0;
  updateDisplay();
});

// Fetch data from an API
async function getWeather(city) {
  try {
    const response = await fetch(
      `https://api.open-meteo.com/v1/forecast?latitude=51.5&longitude=-0.1&current_weather=true`
    );

    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }

    const data = await response.json();
    return data.current_weather;
  } catch (error) {
    console.error("Failed to fetch:", error.message);
    return null;
  }
}

// Call the async function
getWeather("London").then(weather => {
  if (weather) {
    console.log(`Temperature: ${weather.temperature}°C`);
  }
});