🚀 JavaScript Documentation

JavaScript is a cross-platform, object-oriented scripting language that has become the backbone of modern web development. Originally designed to make web pages interactive, it has evolved into a powerful language used everywhere from browsers to servers, mobile apps to desktop applications.

JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects.

// Your first JavaScript program
console.log("Hello, JavaScript World!");

// Variables and functions
const greeting = "Welcome to JavaScript!";
function showMessage(message) {
    alert(message);
}

showMessage(greeting);

Despite their similar names, JavaScript and Java are fundamentally different languages with distinct purposes, syntax, and execution models. Understanding these differences is crucial for developers working with either language.

🏗️ Object Models Compared

// Prototype-based inheritance
function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound`);
};

const dog = new Animal("Rex");
dog.speak(); // "Rex makes a sound"

// Class-based inheritance
public class Animal {
    private String name;

    public Animal(String name) {
        this.name = name;
    }

    public void speak() {
        System.out.println(name + " makes a sound");
    }
}

JavaScript's free-form nature means you don't need to declare all variables, classes, and methods upfront. You don't need to worry about access modifiers (public, private, protected) or implement interfaces explicitly. This flexibility makes JavaScript excellent for rapid development but requires discipline to maintain code quality in larger projects.

Variables are symbolic names for values in your application. They act as containers that store data values and allow you to reference and manipulate that data throughout your program.

✅ Valid Variable Names

// Valid identifiers
let userName = "John";
let _privateVar = 42;
let $element = document.getElementById("myDiv");
let temp99 = 25.5;
let numberOfItems = 10;
let isValid = true;

// Unicode characters are allowed
let café = "coffee";
let naïve = "innocent";
let π = 3.14159;

❌ Invalid Variable Names

// Invalid identifiers - these will cause errors
let 2names = "invalid";     // Cannot start with digit
let my-var = "invalid";     // Hyphens not allowed
let class = "invalid";      // Reserved keyword
let my var = "invalid";     // Spaces not allowed
let @symbol = "invalid";    // @ symbol not allowed

let firstName = "John";
let totalAmount = 100;
let isUserLoggedIn = true;

// Good
let userAge = 25;
let shoppingCartItems = [];

// Avoid
let x = 25;
let arr = [];

const MAX_USERS = 100;
const API_URL = "https://api.example.com";
const TAX_RATE = 0.08;

// Unicode examples
let résumé = "CV document";
let 变量 = "Chinese variable";
let \u0041pple = "Apple"; // \u0041 is Unicode for 'A'

JavaScript has dynamic typing, meaning variables can hold values of any type without declaring the type explicitly. The latest ECMAScript standard defines eight primitive data types plus objects.

let isActive = true;
let isComplete = false;

let age = 25;
let price = 19.99;
let infinity = Infinity;

let name = "John";
let message = 'Hello World';
let template = `Welcome ${name}!`;

let x;
console.log(x); // undefined

let data = null;
// Note: null !== NULL !== Null

let sym1 = Symbol('id');
let sym2 = Symbol('id');
console.log(sym1 === sym2); // false

let bigNumber = 123456789012345678901234567890n;
let anotherBig = BigInt("123456789012345678901234567890");

let person = {
  name: "Alice",
  age: 30,
  hobbies: ["reading", "coding"]
};

let numbers = [1, 2, 3, 4, 5];
let today = new Date();

console.log(typeof 42);          // "number"
console.log(typeof "Hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (this is a known quirk!)
console.log(typeof Symbol('id')); // "symbol"
console.log(typeof 123n);        // "bigint"
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"

Although JavaScript has a relatively small number of data types, they enable you to perform powerful operations in your applications. Objects and functions are the other fundamental elements that make JavaScript so versatile. Think of objects as named containers for values, and functions as reusable procedures that your application can execute.

Constants are read-only named values created with the const keyword. Once declared and initialized, their value cannot be changed through reassignment, making them perfect for values that should remain fixed throughout your program.

// Basic constant declaration
const PI = 3.14159;
const MAX_USERS = 100;
const API_URL = "https://api.example.com";

// Constants must be initialized
const APP_NAME = "My Application"; // ✅ Correct
// const EMPTY_CONST; // ❌ Error: Missing initializer

const PI = 3.14;
PI = 3.14159; // ❌ TypeError: Assignment to constant variable

const MAX_SIZE = 100;
const MAX_SIZE = 200; // ❌ SyntaxError: Identifier 'MAX_SIZE' has already been declared

const GREETING = "Hello"; // ✅ Correct
// const MESSAGE; // ❌ SyntaxError: Missing initializer in const declaration

if (true) {
  const TEMP = "block scoped";
}
// console.log(TEMP); // ❌ ReferenceError: TEMP is not defined

// Object properties can be modified
const USER = {
  name: "John",
  age: 25
};

USER.age = 26;        // ✅ This works - modifying property
USER.city = "NYC";    // ✅ This works - adding property
// USER = {};         // ❌ This fails - reassigning the constant

// Array elements can be modified
const COLORS = ["red", "green", "blue"];
COLORS.push("yellow"); // ✅ This works - modifying array
COLORS[0] = "crimson"; // ✅ This works - changing element
// COLORS = [];        // ❌ This fails - reassigning the constant

const MAX_RETRY_ATTEMPTS = 3;
const DEFAULT_TIMEOUT = 5000;
const ERROR_MESSAGES = {
  NOT_FOUND: "Resource not found",
  UNAUTHORIZED: "Access denied"
};

const CONFIG = {
  API_BASE_URL: "https://api.myapp.com",
  ITEMS_PER_PAGE: 20,
  CACHE_DURATION: 300000
};

// Function scope example
function example() {
  const LOCAL_CONST = "function scoped";

  if (true) {
    const BLOCK_CONST = "block scoped";
    console.log(LOCAL_CONST);  // ✅ Accessible
    console.log(BLOCK_CONST);  // ✅ Accessible
  }

  console.log(LOCAL_CONST);    // ✅ Accessible
  // console.log(BLOCK_CONST); // ❌ ReferenceError
}

// Global scope
const GLOBAL_CONST = "globally accessible";
example();

JavaScript provides three ways to declare variables: var, let, and const. Each has different scoping rules, hoisting behavior, and use cases. Understanding these differences is crucial for writing reliable JavaScript code.

var x = 42;
var name = "John";

// Can be redeclared
var x = 100; // ✅ No error

// Function scoped
function example() {
  var localVar = "function scoped";
  if (true) {
    var localVar = "still function scoped";
  }
  console.log(localVar); // "still function scoped"
}

let y = 13;
let message = "Hello";

// Cannot be redeclared in same scope
// let y = 20; // ❌ SyntaxError

// Block scoped
function example() {
  let blockVar = "block scoped";
  if (true) {
    let blockVar = "different block scope";
    console.log(blockVar); // "different block scope"
  }
  console.log(blockVar); // "block scoped"
}

const PI = 3.14159;
const CONFIG = { api: "https://api.example.com" };

// Must be initialized
// const EMPTY; // ❌ SyntaxError

// Cannot be reassigned
// PI = 3.14; // ❌ TypeError

// Avoid this - creates global variable
x = 42; // ❌ Bad practice

// In strict mode, this throws an error
"use strict";
y = 13; // ❌ ReferenceError: y is not defined

function scopeDemo() {
  console.log("=== Scope Demonstration ===");

  // var is function-scoped
  if (true) {
    var varVariable = "I'm function scoped";
    let letVariable = "I'm block scoped";
    const constVariable = "I'm also block scoped";
  }

  console.log(varVariable);    // ✅ "I'm function scoped"
  // console.log(letVariable); // ❌ ReferenceError
  // console.log(constVariable); // ❌ ReferenceError
}

scopeDemo();

Functions are reusable blocks of code that perform specific tasks. They are fundamental building blocks in JavaScript, allowing you to organize code, avoid repetition, and create modular applications.

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

console.log(greet("Alice")); // "Hello, Alice!"

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

console.log(greet("Bob")); // "Hello, Bob!"

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

// Multiple parameters
const add = (a, b) => a + b;

// Block body
const processData = (data) => {
  const processed = data.map(item => item * 2);
  return processed.filter(item => item > 10);
};

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

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

// Destructuring parameters
function createUser({name, age, email}) {
  return {
    id: Date.now(),
    name,
    age,
    email,
    createdAt: new Date()
  };
}

// Usage examples
console.log(greet());                    // "Hello, World!"
console.log(greet("Alice", "?"));        // "Hello, Alice?"
console.log(sum(1, 2, 3, 4, 5));        // 15
console.log(createUser({
  name: "John",
  age: 30,
  email: "john@example.com"
}));

Following JavaScript best practices helps you write cleaner, more maintainable, and more reliable code. These guidelines will improve your code quality and make collaboration easier.

// Use camelCase for variables and functions
const userName = "john_doe";
const calculateTotalPrice = (items) => { /* ... */ };

// Use PascalCase for constructors and classes
class UserAccount { /* ... */ }
const user = new UserAccount();

// Use UPPER_SNAKE_CASE for constants
const MAX_RETRY_ATTEMPTS = 3;
const API_BASE_URL = "https://api.example.com";

"use strict";

// Prevents common mistakes
function example() {
  // undeclaredVar = 42; // ❌ ReferenceError in strict mode
  let declaredVar = 42;   // ✅ Correct
}

// Use const/let instead of var
const items = [1, 2, 3];
let counter = 0;

// Use arrow functions for short functions
const double = x => x * 2;

// Use template literals
const message = `Hello, ${userName}!`;

// Use destructuring
const {name, age} = user;
const [first, second] = items;