JavaScript Fundamentals: The Language of the Web

What is JavaScript?

JavaScript is a high-level, interpreted programming language that runs in web browsers and on servers. It's the only language that runs natively in all web browsers, making it essential for creating interactive websites.

Think of a website as a house: HTML is the structure (walls, rooms), CSS is the decoration (paint, furniture), and JavaScript is the electricity that makes things work (lights, appliances, automation). Without JavaScript, websites would be static and lifeless.

Why Learn JavaScript?

Universal Language: Runs everywhere - browsers, servers (Node.js), mobile apps, desktop apps, even IoT devices
Beginner-Friendly: No compilation needed, see results immediately in your browser
Massive Ecosystem: Over 2 million packages on NPM, largest developer community
Career Opportunities: Most in-demand programming language for 11+ years
Full Stack Capability: Build complete applications with one language

Variables: Storing Data

Variables are containers that store data. Think of them as labeled boxes where you keep information.

// Three ways to declare variables

// let - for values that will change
let age = 25;
age = 26; // Can be updated

// const - for values that won't change (constant)
const name = "Alice";
// name = "Bob"; // Error! Can't reassign const

// var - old way, avoid using it
var score = 100; // Has scoping issues

// Naming conventions
let userName = "John"; // camelCase (recommended)
let user_name = "Jane"; // snake_case (not common in JS)
const MAX_USERS = 100; // UPPERCASE for constants

When to use: Use const by default. Only use let when you know the value will change. Never use var.

Data Types: Different Kinds of Information

JavaScript has several data types to represent different kinds of information:

// Primitive Data Types

// 1. Number - integers and decimals
let age = 30;
let price = 19.99;
let negative = -5;

// 2. String - text data
let firstName = "Alice";
let message = 'Hello World';
let template = `My name is ${firstName}`; // Template literal

// 3. Boolean - true or false
let isLoggedIn = true;
let hasPermission = false;

// 4. Undefined - variable declared but not assigned
let username; // undefined

// 5. Null - intentionally empty
let selectedItem = null;

// 6. Symbol - unique identifier (advanced)
let id = Symbol('id');

// Reference Types

// 7. Object - collection of key-value pairs
let user = {
    name: "Bob",
    age: 25,
    isActive: true
};

// 8. Array - ordered list
let fruits = ["apple", "banana", "orange"];
let numbers = [1, 2, 3, 4, 5];

// Check data type
console.log(typeof age); // "number"
console.log(typeof firstName); // "string"
console.log(typeof user); // "object"

Functions: Reusable Code Blocks

Functions are like recipes - a set of instructions you can use repeatedly. They help organize code and avoid repetition.

// Function Declaration
function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("Alice")); // "Hello, Alice!"

// Function Expression
const add = function(a, b) {
    return a + b;
};
console.log(add(5, 3)); // 8

// Arrow Function (ES6+) - shorter syntax
const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 20

// Arrow function with multiple lines
const calculateTotal = (price, tax) => {
    const total = price + (price * tax);
    return total;
};

// Function with default parameters
function createUser(name, role = "guest") {
    return { name, role };
}
console.log(createUser("John")); // { name: "John", role: "guest" }

// Immediately Invoked Function Expression (IIFE)
(function() {
    console.log("I run immediately!");
})();

When to use: Create a function when you need to repeat the same task multiple times or want to organize related code together.

Arrays: Working with Lists

Arrays store multiple values in a single variable. Think of an array as a shopping list.

// Creating arrays
let fruits = ["apple", "banana", "orange"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "text", true, null]; // Can hold different types

// Accessing elements (zero-based indexing)
console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "orange"

// Array properties and methods
console.log(fruits.length); // 3

// Adding elements
fruits.push("grape"); // Add to end
fruits.unshift("mango"); // Add to beginning

// Removing elements
let lastFruit = fruits.pop(); // Remove from end
let firstFruit = fruits.shift(); // Remove from beginning

// Modern array methods (ES6+)

// map - transform each element
const prices = [10, 20, 30];
const withTax = prices.map(price => price * 1.1);
// [11, 22, 33]

// filter - select elements that match a condition
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// [2, 4, 6]

// find - get first element that matches
const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
];
const user = users.find(u => u.id === 2);
// { id: 2, name: "Bob" }

// reduce - accumulate values
const total = numbers.reduce((sum, num) => sum + num, 0);
// 21

// forEach - execute function for each element
fruits.forEach(fruit => console.log(fruit));

// includes - check if array contains value
console.log(fruits.includes("banana")); // true

// Spread operator - copy/combine arrays
const moreFruits = [...fruits, "kiwi"];
const combined = [...fruits, ...numbers];

Objects: Structured Data

Objects store related data and functions together. Think of an object as a real-world entity with properties and abilities.

// Creating objects
const person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    isEmployed: true,
    // Method - function inside object
    greet: function() {
        return `Hi, I'm ${this.firstName}`;
    },
    // Shorter method syntax (ES6+)
    sayAge() {
        return `I am ${this.age} years old`;
    }
};

// Accessing properties
console.log(person.firstName); // Dot notation
console.log(person["lastName"]); // Bracket notation

// Calling methods
console.log(person.greet()); // "Hi, I'm John"

// Adding/modifying properties
person.email = "john@example.com";
person.age = 31;

// Deleting properties
delete person.isEmployed;

// Object destructuring (ES6+)
const { firstName, age } = person;
console.log(firstName); // "John"

// Object spread operator
const updatedPerson = {
    ...person,
    city: "New York",
    age: 32 // Override existing property
};

// Shorthand property names
const name = "Alice";
const userAge = 25;
const user = { name, age: userAge }; // { name: "Alice", age: 25 }

// Object.keys, values, entries
console.log(Object.keys(person)); // ["firstName", "lastName", ...]
console.log(Object.values(person)); // ["John", "Doe", ...]
console.log(Object.entries(person)); // [["firstName", "John"], ...]

DOM Manipulation: Making Pages Interactive

The Document Object Model (DOM) is how JavaScript interacts with HTML. It's the bridge between your code and the webpage.

// Selecting elements
const button = document.getElementById('myButton');
const items = document.getElementsByClassName('item');
const heading = document.querySelector('h1'); // First match
const allParagraphs = document.querySelectorAll('p'); // All matches

// Changing content
heading.textContent = 'New Title'; // Text only
heading.innerHTML = 'Bold Title'; // Can include HTML

// Changing styles
heading.style.color = 'blue';
heading.style.fontSize = '24px';

// Working with classes
heading.classList.add('highlight');
heading.classList.remove('old-class');
heading.classList.toggle('active'); // Add if missing, remove if present
heading.classList.contains('highlight'); // Check if has class

// Creating new elements
const newDiv = document.createElement('div');
newDiv.textContent = 'I am new!';
newDiv.classList.add('box');

// Adding to page
document.body.appendChild(newDiv); // Add to end
document.body.prepend(newDiv); // Add to beginning

// Removing elements
newDiv.remove();

// Changing attributes
const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');
const url = link.getAttribute('href');
link.removeAttribute('target');

Where to use: DOM manipulation is used whenever you want to change what users see on the page - updating text, showing/hiding elements, adding new content, etc.

Event Handling: Responding to User Actions

Events are things that happen in the browser - clicks, key presses, form submissions. JavaScript can listen for and respond to these events.

// Click event
const button = document.querySelector('button');
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Using arrow function
button.addEventListener('click', () => {
    console.log('Clicked with arrow function');
});

// Event object contains information
button.addEventListener('click', (event) => {
    console.log(event.target); // The element that was clicked
    console.log(event.type); // "click"
});

// Form events
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
    event.preventDefault(); // Stop form from submitting
    const input = document.querySelector('input');
    console.log('User entered:', input.value);
});

// Input events
const textInput = document.querySelector('input[type="text"]');
textInput.addEventListener('input', (event) => {
    console.log('Current value:', event.target.value);
});

// Mouse events
const box = document.querySelector('.box');
box.addEventListener('mouseenter', () => console.log('Mouse entered'));
box.addEventListener('mouseleave', () => console.log('Mouse left'));

// Keyboard events
document.addEventListener('keydown', (event) => {
    console.log('Key pressed:', event.key);
    if (event.key === 'Enter') {
        console.log('Enter was pressed!');
    }
});

// Remove event listener
const handler = () => console.log('Click');
button.addEventListener('click', handler);
button.removeEventListener('click', handler);

ES6+ Modern JavaScript Features

ES6 (ECMAScript 2015) and later versions brought powerful new features to JavaScript:

// 1. Template Literals - easier string formatting
const name = "Alice";
const age = 25;
const message = `Hello, my name is ${name} and I am ${age} years old`;

// Multi-line strings
const html = `
    
        ${name}
        Age: ${age}
    
`;

// 2. Destructuring - extract values from arrays/objects
const user = { name: "Bob", age: 30, city: "NYC" };
const { name, age } = user;

const colors = ["red", "green", "blue"];
const [first, second] = colors; // first = "red", second = "green"

// 3. Spread Operator - expand arrays/objects
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

const person = { name: "John", age: 25 };
const employee = { ...person, job: "Developer" };

// 4. Rest Parameters - collect multiple arguments
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

// 5. Default Parameters
function greet(name = "Guest") {
    return `Hello, ${name}`;
}

// 6. Arrow Functions
const double = x => x * 2; // Concise syntax
const add = (a, b) => a + b;

// 7. Promises - handle asynchronous operations
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// 8. Async/Await - cleaner async code
async function getData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

// 9. Modules - organize code across files
// export.js
export const PI = 3.14159;
export function square(x) { return x * x; }

// import.js
import { PI, square } from './export.js';

// 10. Optional Chaining - safe property access
const user = { profile: { name: "Alice" } };
console.log(user?.profile?.name); // "Alice"
console.log(user?.settings?.theme); // undefined (no error)

// 11. Nullish Coalescing - default values
const userInput = null;
const value = userInput ?? "default"; // "default"

Best Practices

Use meaningful variable names: userName instead of x or data1
Prefer const over let: Use const unless you know the value will change
Use strict equality (===): Avoid == as it can cause unexpected type coercion
Comment your code: Explain why, not what (code shows what)
Keep functions small: Each function should do one thing well
Use modern array methods: map, filter, reduce instead of loops when possible
Handle errors: Use try-catch blocks for operations that might fail
Avoid global variables: Keep variables in the smallest scope necessary

When to Use JavaScript

Form Validation: Check user input before submitting
Interactive UI: Dropdowns, modals, tabs, carousels
Dynamic Content: Update page content without refreshing
API Integration: Fetch data from servers and display it
Animations: Create smooth transitions and effects
Single Page Applications: Build app-like experiences with React, Angular, Vue
Real-time Features: Chat applications, live notifications

Master JavaScript with Expert Guidance

Our Full Stack JavaScript program takes you from fundamentals to advanced concepts. Build real-world projects with personalized mentorship from industry experts.

Explore JavaScript Program

JavaScript Fundamentals