JavaScript Fundamentals

JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web.

Introduction

JavaScript was created by Brendan Eich in 1995. It enables interactive web pages and is an essential part of web applications.

Key Features

• Dynamic Typing: Variables can hold values of any type
• First-Class Functions: Functions are treated as objects
• Prototype-Based: Uses prototypes instead of classes
• Event-Driven: Responds to user interactions
• Asynchronous: Supports async/await and promises

Basic Syntax

Variables

// var (function-scoped, avoid using)
var oldVar = "old way";

// let (block-scoped, can be reassigned)
let name = "JavaScript";
name = "JS";

// const (block-scoped, cannot be reassigned)
const PI = 3.14159;

Data Types

// Primitive types
let number = 42;
let string = "Hello";
let boolean = true;
let nullValue = null;
let undefinedValue = undefined;
let symbol = Symbol("id");

// Objects
let person = {
    name: "John",
    age: 30
};

// Arrays
let fruits = ["apple", "banana", "orange"];

Functions

// Function declaration
function greet(name) {
    return `Hello, ${name}!`;
}

// Function expression
const greet = function(name) {
    return `Hello, ${name}!`;
};

// Arrow function
const greet = (name) => `Hello, ${name}!`;

// Higher-order functions
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);

Classes (ES6+)

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    introduce() {
        return `I'm ${this.name}, ${this.age} years old`;
    }
}

const person = new Person("Alice", 25);

DOM Manipulation

// Selecting elements
const element = document.getElementById("myId");
const elements = document.querySelectorAll(".myClass");

// Modifying content
element.textContent = "New text";
element.innerHTML = "<strong>Bold text</strong>";

// Event listeners
element.addEventListener("click", () => {
    console.log("Clicked!");
});

Asynchronous Programming

Promises

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

Async/Await

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

Modern JavaScript Features

Destructuring

// Array destructuring
const [first, second] = [1, 2];

// Object destructuring
const {name, age} = {name: "John", age: 30};

Spread Operator

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3}; // {a: 1, b: 2, c: 3}

Template Literals

const name = "World";
const greeting = `Hello, ${name}!`;

Common Patterns

Closures

function outer() {
    let count = 0;
    return function inner() {
        count++;
        return count;
    };
}

Modules (ES6)

// math.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './math.js';