JavaScript Guide for Beginners

1. Setting Up JavaScript

How to Run JavaScript:

Browser Console: Open your browser, press Ctrl + Shift + J (or Cmd + Option + J on Mac).
HTML File: Use the <script> tag.

Example HTML with JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Basics</title>
</head>
<body>
    <h1>Hello, JavaScript!</h1>
    <script>
        console.log("Welcome to JavaScript!");
    </script>
</body>
</html>

2. Variables and Constants

let: Block-scoped, can be updated.
const: Block-scoped, cannot be reassigned.
var: Function-scoped, avoid in modern JS.

Examples:

let username = "Alice";
const age = 25;
// age = 26; // Error: const variables cannot be reassigned
var isAdmin = true;

console.log(username, age, isAdmin);

3. Data Types

Primitive Types:

String: "Hello"
Number: 42
Boolean: true / false
Undefined: Variable not initialized
Null: Explicitly nothing
Symbol: Unique values (advanced use case)

Non-Primitive:

Objects: Key-value pairs
Arrays: Ordered list of elements

Example:

let name = "John"; // String
let age = 30;      // Number
let isLoggedIn = true; // Boolean
let user = null;   // Null
let items = ["apple", "banana", "cherry"]; // Array
let person = { name: "Alice", age: 25 }; // Object

console.log(name, age, isLoggedIn, user, items, person);

4. Operators

Arithmetic: +, -, *, /, %
Comparison: >, <, >=, <=, ==, ===
Logical: &&, ||, !
Assignment: =, +=, -=, *=

Example:

let a = 10, b = 20;
console.log(a + b); // 30
console.log(a > b); // false
console.log(true && false); // false

5. Conditional Statements

If-Else:

let score = 85;

if (score >= 90) {
    console.log("Excellent");
} else if (score >= 50) {
    console.log("Good");
} else {
    console.log("Fail");
}

Switch:

let grade = "A";

switch (grade) {
    case "A":
        console.log("Great job!");
        break;
    case "B":
        console.log("Good effort!");
        break;
    default:
        console.log("Keep trying!");
}

6. Loops

For Loop:

for (let i = 1; i <= 5; i++) {
    console.log("Count:", i);
}

While Loop:

let count = 0;
while (count < 3) {
    console.log("Count:", count);
    count++;
}

For...of (Arrays):

let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
    console.log(fruit);
}

For...in (Objects):

let person = { name: "Alice", age: 25 };
for (let key in person) {
    console.log(key, ":", person[key]);
}

7. Functions

Basic Functions:

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("John"));

Arrow Functions:

const add = (a, b) => a + b;
console.log(add(5, 10)); // 15

Default Parameters:

function sayHi(name = "Guest") {
    console.log(`Hi, ${name}!`);
}
sayHi(); // Hi, Guest!

8. Arrays

Methods to Know:

Add/Remove: push(), pop(), shift(), unshift()
Iterate: forEach(), map(), filter()
Search: find(), includes()
Combine: concat(), join()

Example:

let numbers = [1, 2, 3, 4];
numbers.push(5); // Add at end
numbers.pop();   // Remove last element
numbers = numbers.filter(n => n > 2); // [3, 4]

console.log(numbers);

9. Objects

Example:

let car = {
    brand: "Tesla",
    model : "Model X",
    year: 2023,
    getDetails() {
        return `${this.brand} ${this.model}, Year: ${this.year}`;
    }
};
console.log(car.getDetails());

10. DOM Manipulation

Select Elements:

let title = document.getElementById("title");
let buttons = document.querySelectorAll(".btn");

Modify Content:

title.textContent = "Updated Title!";

Event Handling:

document.getElementById("btn").addEventListener("click", () => {
    alert("Button clicked!");
});

11. ES6 Features

Template Literals:

let name = "Alice";
console.log(`Hello, ${name}!`);

Destructuring:

let user = { name: "John", age: 30 };
let { name, age } = user;
console.log(name, age);

Spread/Rest Operator:

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];
console.log(newArr);

12. Asynchronous JavaScript

Callback Example:

setTimeout(() => {
    console.log("This runs after 2 seconds");
}, 2000);

Promise Example:

fetch("https://jsonplaceholder.typicode.com/posts")
    .then(response => response.json())
    .then(data => console.log(data));

Async/Await:

async function fetchData() {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts");
    let data = await response.json();
    console.log(data);
}
fetchData();

JavaScript Practice Challenges

These programming exercises are organized by difficulty levels, helping you solidify your JavaScript knowledge and progress step by step.

Beginner Level

1. Variables and Data Types

Write a program to swap two numbers without using a third variable.

let a = 5, b = 10;
a = a + b; // a now becomes 15
b = a - b; // b becomes 5
a = a - b; // a becomes 10
console.log(a, b); // Outputs: 10, 5

Create a program to calculate the area of a rectangle given its length and width.

function calculateArea(length, width) {
    return length * width;
}
console.log(calculateArea(5, 10)); // Outputs: 50

2. Control Flow

Write a program to check whether a given number is even or odd.

function isEven(num) {
    return num % 2 === 0;
}
console.log(isEven(4)); // Outputs: true

Create a program to find the largest of three numbers.

function findLargest(a, b, c) {
    return Math.max(a, b, c);
}
console.log(findLargest(1, 5, 3)); // Outputs: 5

3. Loops

Print all numbers from 1 to 100. Replace:

Multiples of 3 with "Fizz"
Multiples of 5 with "Buzz"
Multiples of both with "FizzBuzz"

for (let i = 1; i <= 100; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
        console.log("FizzBuzz");
    } else if (i % 3 === 0) {
        console.log("Fizz");
    } else if (i % 5 === 0) {
        console.log("Buzz");
    } else {
        console.log(i);
    }
}

Write a program to generate the Fibonacci sequence up to n terms.

function fibonacci(n) {
    let fib = [0, 1];
    for (let i = 2; i < n; i++) {
        fib[i] = fib[i - 1] + fib[i - 2];
    }
    return fib;
}
console.log(fibonacci(10)); // Outputs: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

4. Strings

Reverse a string without using built-in methods.

function reverseString(str) {
    let reversed = '';
    for (let i = str.length - 1; i >= 0; i--) {
        reversed += str[i];
    }
    return reversed;
}
console.log(reverseString("hello")); // Outputs: "olleh"

Count the number of vowels in a given string.

function countVowels(str) {
    return str.match(/[aeiou]/gi)?.length || 0;
}
console.log(countVowels("hello world")); // Outputs: 3

5. Arrays

Write a program to find the maximum and minimum values in an array.

let numbers = [5, 3, 8, 1, 2];
let max = Math.max(...numbers);
let min = Math.min(...numbers);
console.log(max, min); // Outputs: 8, 1

Remove duplicate values from an array.

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // Outputs: [1, 2, 3, 4, 5]

Intermediate Level

1. Functions and Recursion

Create a function to check if a string is a palindrome.

function isPalindrome(str) {
    return str === str.split('').reverse().join('');
}
console.log(isPalindrome("racecar")); // Outputs: true

Write a recursive function to calculate the factorial of a number.

function factorial(n) {
    return n === 0 ? 1 : n * factorial(n - 1);
}
console.log(factorial(5)); // Outputs: 120

2. Objects

Create an object representing a student and add a method to calculate the average grade.

let student = {
    name: "John",
    grades: [90, 80, 85],
    average() {
        return this.grades.reduce((a, b) => a + b) / this.grades.length;
    }
};
console.log(student.average()); // Outputs: 85

Merge two objects and handle cases where they have conflicting keys.

let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let merged = { ...obj1, ...obj2 };
console.log(merged); // Outputs: { a: 1, b: 3, c: 4 }

3. Higher-Order Functions

Use map() to create a new array with all elements squared.

let numbers = [1, 2, 3, 4];
let squared = numbers.map(num => num * num);
console.log(squared); // Outputs: [1, 4, 9, 16]

Use filter() to extract numbers greater than 50 from an array.

let nums = [10, 55, 30, 75, 20];
let filtered = nums.filter(num => num > 50);
console.log(filtered); // Outputs: [55, 75]

4. DOM Manipulation

Build a counter app with three buttons to increment, decrement, and reset the counter.

let count = 0;
function updateDisplay() {
    document.getElementById("counter").textContent = count;
}
document.getElementById("increment").onclick = () => { count++; updateDisplay(); };
document.getElementById("decrement").onclick = () => { count--; updateDisplay(); };
document.getElementById("reset").onclick = () => { count = 0; updateDisplay(); };
updateDisplay();

Create a to-do list app where users can add items, mark items as complete, and delete items.

let todos = [];
function addTodo(todo) {
    todos.push({ text: todo, completed: false });
}
function toggleComplete(index) {
    todos[index].completed = !todos[index].completed;
}
function deleteTodo(index) {
    todos.splice(index, 1);
}

5. Asynchronous Programming

Fetch data from an API and log the response to the console.

fetch("https://jsonplaceholder.typicode.com/posts")
    .then(response => response.json())
    .then(data => console.log(data));

Implement a countdown timer using setTimeout.

function countdown(seconds) {
    let timer = setInterval(() => {
        console.log(seconds);
        seconds--;
        if (seconds < 0) {
            clearInterval(timer);
        }
    }, 1000);
}
countdown(5); // Counts down from 5

Advanced Level

1. Closures

Create a function that keeps track of how many times it has been called and returns the count.

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}
const counter = createCounter();
console.log(counter()); // Outputs: 1
console.log(counter()); // Outputs: 2

Write a curried function that allows adding numbers one at a time.

function add(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}
console.log(add(2)(3)(5)()); // Outputs: 10

2. Promises and Async/Await

Write a program to fetch data from multiple APIs simultaneously using Promise.all.

Promise.all([
    fetch("https://jsonplaceholder.typicode.com /posts"),
    fetch("https://jsonplaceholder.typicode.com/comments")
])
.then(responses => Promise.all(responses.map(res => res.json())))
.then(data => console.log(data));

Simulate an API call with a delay using setTimeout and Promise.

function fakeApiCall() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve("Data received");
        }, 2000);
    });
}
fakeApiCall().then(data => console.log(data)); // Outputs: "Data received" after 2 seconds

3. Error Handling

Create a function to perform division between two numbers and handle divide-by-zero errors gracefully.

function safeDivide(a, b) {
    if (b === 0) {
        return "Error: Cannot divide by zero";
    }
    return a / b;
}
console.log(safeDivide(10, 2)); // Outputs: 5
console.log(safeDivide(10, 0)); // Outputs: "Error: Cannot divide by zero"

4. Data Structures

Implement a stack or queue using JavaScript arrays.

class Stack {
    constructor() {
        this.items = [];
    }
    push(element) {
        this.items.push(element);
    }
    pop() {
        return this.items.pop();
    }
    peek() {
        return this.items[this.items.length - 1];
    }
}
const stack = new Stack();
stack.push(1);
stack.push(2);
console.log(stack.pop()); // Outputs: 2

Write a function to sort an array of objects by a specific property (e.g., age).

let people = [{ name: "Alice", age: 25 }, { name: "Bob", age: 20 }];
people.sort((a, b) => a.age - b.age);
console.log(people); // Outputs: [{ name: "Bob", age: 20 }, { name: "Alice", age: 25 }]

5. Advanced DOM Manipulation

Build a dynamic table from a JSON array, where users can sort columns and search rows.

function createTable(data) {
    const table = document.createElement("table");
    data.forEach(item => {
        const row = table.insertRow();
        Object.values(item).forEach(text => {
            const cell = row.insertCell();
            cell.textContent = text;
        });
    });
    document.body.appendChild(table);
}
createTable([{ name: "Alice", age: 25 }, { name: "Bob", age: 20 }]);

Create a simple calculator app with a fully interactive UI for addition, subtraction, multiplication, and division.

function calculate(a, b, operation) {
    switch (operation) {
        case "add":
            return a + b;
        case "subtract":
            return a - b;
        case "multiply":
            return a * b;
        case "divide":
            return b !== 0 ? a / b : "Error: Cannot divide by zero";
    }
}
console.log(calculate(10, 5, "add")); // Outputs: 15