Purpose

Adds interactivity to web pages, builds full-stack web/mobile apps, powers servers (Node.js), automation, and more.

Key Characteristics

• Dynamic Typing: Variable types determined at runtime. Offers flexibility but requires careful handling.
• Interpreted/JIT-Compiled: Modern engines (V8, SpiderMonkey) use Just-In-Time compilation for performance.
• Event Loop: Core mechanism enabling non-blocking I/O by offloading operations and processing results via a callback queue. Event Loop Explained
• Prototype-based Inheritance: Objects inherit directly from other objects (prototypes). ES6 Classes provide syntax sugar.
• Multi-paradigm: Supports procedural, object-oriented (via prototypes/classes), and functional programming styles.

Declarations

• const: Block-scoped (`{}`). Must be initialized. Cannot be reassigned. Use when the variable reference shouldn't change. (Note: Object/array *contents* can still be mutated).
• let: Block-scoped (`{}`). Can be reassigned. Can be declared without initialization (`undefined` by default). Use for variables that need to change value.
• var: Function-scoped (or global). Subject to hoisting issues (declaration moved up, initialization stays). Generally avoid in modern ES6+ code.

Scope

• Block Scope: Variables (`let`/`const`) only accessible within the `{...}` block (e.g., `if`, `for`, `while`) where defined.
• Function Scope: Variables (`var`) accessible anywhere within the function they are defined in, regardless of blocks.
• Global Scope: Variables declared outside any function/block. Accessible everywhere (avoid polluting global scope).
• Lexical Scope: Inner functions have access to variables of their outer functions (forms closures).

Hoisting & Temporal Dead Zone (TDZ)

Declarations are conceptually "hoisted" (moved to top of scope) during compilation. `var` declarations are initialized with `undefined`. `let` and `const` declarations are hoisted but *not* initialized, creating a "Temporal Dead Zone" until the declaration line is reached. Accessing them in the TDZ throws a `ReferenceError`. Hoisting | TDZ

function scopeTest() {
  // console.log(letVar); // ReferenceError: Cannot access 'letVar' before initialization (TDZ)
  console.log(varVar); // undefined (Hoisted, initialized with undefined)

  let letVar = "I am block scoped";
  var varVar = "I am function scoped";

  if (true) {
    let innerLet = "Inner block";
    const innerConst = "Inner constant";
  }
  // console.log(innerLet); // ReferenceError: innerLet is not defined
}
scopeTest();
// console.log(varVar); // ReferenceError: varVar is not defined (outside function scope)

Primitives (Immutable)

• string: Textual data (e.g., `"hello"`, `'world'`, `` `template` ``).
• number: Numeric values (e.g., `42`, `3.14`, `1e6`). Includes special values `Infinity`, `-Infinity`, `NaN` (Not-a-Number).
• boolean: Logical values (`true`, `false`).
• null: Intentional absence of any object value. Represents "no value".
• undefined: Variable declared but not yet assigned a value; also default function return value.
• symbol (ES6): Unique, immutable identifier, often used as non-string object property keys. `Symbol('desc')`.
• bigint (ES2020): Arbitrary precision integers (e.g., `9007199254740991n`). For numbers larger than `Number.MAX_SAFE_INTEGER`.

Object (Mutable)

• object: Collection of properties (key-value pairs). Includes arrays, functions, Date, RegExp, Map, Set, etc. Passed by reference.

Type Checking (`typeof`)

typeof "hello"    // "string"
typeof 42         // "number"
typeof true       // "boolean"
typeof undefined  // "undefined"
typeof null       // "object" (historical quirk!)
typeof {}         // "object"
typeof []         // "object" (arrays are objects)
typeof function(){} // "function" (functions are objects)
typeof Symbol('id') // "symbol"
typeof 123n       // "bigint"
typeof NaN        // "number"

Type Coercion & Equality

JavaScript automatically converts types in certain operations (coercion). This can lead to unexpected results with loose equality (`==`). Always prefer strict equality (`===`) which checks both value and type without coercion. Equality Comparisons

console.log('5' == 5);  // true (String '5' coerced to Number 5)
console.log('5' === 5); // false (Types are different)
console.log(null == undefined); // true (Special rule)
console.log(null === undefined);// false (Types are different)
console.log(0 == false);  // true (Boolean false coerced to Number 0)
console.log(0 === false); // false (Types are different)

Common Operator Types

• Arithmetic: `+` (addition/concatenation), `-` (subtraction), `*` (multiplication), `/` (division), `%` (remainder/modulo), `**` (exponentiation ES7), `++` (increment), `--` (decrement).
• Assignment: `=` (assign), `+=`, `-=`, `*=`, `/=`, `%=` (compound assignment).
• Comparison: `==` (loose equality), `!=` (loose inequality), `===` (strict equality), `!==` (strict inequality), `>`, `>=`, `<`, `<=`.
• Logical: `&&` (AND), `||` (OR), `!` (NOT). Short-circuiting behavior is important.
• Bitwise: `&`, `|`, `^`, `~`, `<<`, `>>`, `>>>` (Less common in frontend).
• String: `+` (concatenation).
• Conditional (Ternary): `condition ? valueIfTrue : valueIfFalse`.
• Type: `typeof` (returns string indicating type), `instanceof` (checks if object is instance of a class/constructor).
• Comma: `,` (Evaluates multiple expressions, returns the last one).
• Spread/Rest (`...`): Used in arrays, objects, function calls/definitions (See Modern JS).
• Optional Chaining (`?.`): Access nested properties safely (See Modern JS).
• Nullish Coalescing (`??`): Provide default for `null` or `undefined` (See Modern JS).

Operator precedence determines the order of evaluation. Use parentheses `()` to enforce specific order. Operator Precedence

Conditionals

• `if...else if...else`: Execute blocks based on conditions.
• `switch`: Efficiently compare one value against multiple `case` values. Use `break` to exit.

Loops

• `for` loop: `for (initialization; condition; final-expression) { ... }` - Standard loop for known iteration counts.
• `while` loop: `while (condition) { ... }` - Loop while condition is true. Condition checked *before* execution.
• `do...while` loop: `do { ... } while (condition);` - Loop while condition is true. Condition checked *after* execution (always runs at least once).
• `for...in` loop: `for (const key in object) { ... }` - Iterates over enumerable property *keys* (usually strings) of an object. Avoid for arrays.
• `for...of` loop (ES6): `for (const value of iterable) { ... }` - Iterates over the *values* of iterable objects (Arrays, Strings, Maps, Sets). Preferred way to loop over array values.

Other Control Statements

• `break`: Exits the current loop or switch statement.
• `continue`: Skips the rest of the current loop iteration and proceeds to the next.
• `try...catch...finally`: Handles errors (exceptions). `try` block contains code that might throw, `catch` handles the error, `finally` always executes (optional). try...catch

// for...of example
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color); // red, green, blue
}

// for...in example (use with caution on objects)
const car = { make: 'Toyota', model: 'Camry' };
for (const prop in car) {
  if (Object.hasOwn(car, prop)) { // Important check!
      console.log(`${prop}: ${car[prop]}`); // make: Toyota, model: Camry
  }
}

Defining Functions

• Declaration: `function name(...) { ... }` (Hoisted).
• Expression: `const name = function(...) { ... };` (Variable hoisted, function not).
• Arrow Function (ES6): `const name = (...) => { ... };` (Concise, lexical `this`).
• Named Function Expression: `const name = function innerName(...) { ... };` (Name available inside).
• Immediately Invoked Function Expression (IIFE): `(function() { ... })();` (Creates private scope, less common with modules).

Closures

A function "closes over" its lexical environment (scope where it was created). It remembers and can access variables from its outer scope, even after the outer function has finished executing. MDN Closures

function createCounter() {
  let count = 0; // Variable in outer scope
  return function() { // Inner function forms a closure
    count++;
    console.log(count);
    return count;
  };
}
const counter1 = createCounter();
counter1(); // 1
counter1(); // 2
const counter2 = createCounter();
counter2(); // 1 (independent count)

`this` Keyword Binding

The value of `this` depends on *how* the function is called: MDN `this`

• Global Context: `window` (browser, non-strict mode) or `undefined` (strict mode).
• Method Invocation: `object.method()` sets `this` to `object`.
• Constructor Invocation: `new MyClass()` sets `this` to the newly created instance inside the constructor.
• Explicit Binding: `func.call(thisArg, ...args)`, `func.apply(thisArg, [argsArray])`, `func.bind(thisArg)` (returns new function with fixed `this`).
• Arrow Functions: Inherit `this` lexically from the surrounding scope where they are defined. They do *not* have their own `this` binding.

Parameters

• Default Parameters (ES6): `function greet(name = 'Guest') { ... }`
• Rest Parameters (ES6): `function sum(...numbers) { ... }` (collects arguments into an array).
• `arguments` object: (Legacy, avoid in ES6+) Array-like object containing all passed arguments (not available in arrow functions).

Creating & Accessing

const empty = [];
const items = [1, 'two', { three: 3 }, [4]];
console.log(items[1]); // 'two'
console.log(items.length); // 4

Common Iteration Methods

• `forEach(callback(value, index, array))`: Executes callback for each element.
• `map(callback(value, index, array))`: Creates a *new* array with results of calling callback on every element.
• `filter(callback(value, index, array))`: Creates a *new* array with elements that pass the callback's test (return true).
• `reduce(callback(accumulator, currentValue, index, array), initialValue?)`: Executes callback on each element, resulting in a single output value (the accumulator).
• `find(callback(value, index, array))`: Returns the *first* element that passes the test.
• `findIndex(callback(value, index, array))`: Returns the *index* of the first element that passes the test.
• `some(callback(value, index, array))`: Checks if *at least one* element passes the test.
• `every(callback(value, index, array))`: Checks if *all* elements pass the test.

Mutation Methods

• `push(item1, ...)` / `pop()`: Add/remove from end.
• `unshift(item1, ...)` / `shift()`: Add/remove from beginning.
• `splice(start, deleteCount?, item1?, ...)`: Remove/replace elements.
• `sort(compareFn?)` / `reverse()`: Sort/reverse in place.

Other Useful Methods

• `slice(start?, end?)`: Returns a shallow copy of a portion.
• `concat(arr1, ...)`: Returns a new array merging arrays.
• `includes(value, fromIndex?)`: Checks if value exists.
• `indexOf(value, fromIndex?)` / `lastIndexOf()`: Find index of value.
• `join(separator?)`: Join elements into a string.
• `Array.isArray(value)`: Check if value is an array.

// Map, Filter, Reduce Example
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);          // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0);   // [2, 4]
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 15

Creating & Accessing

const person = {
  firstName: 'Ada',
  'last-name': 'Lovelace', // Use quotes for keys with special chars
  age: 36,
  greet: function() { // Method (pre-ES6)
    console.log(`Hello, I'm ${this.firstName}`);
  },
  sayHi() { // Method shorthand (ES6+)
      console.log('Hi!');
  }
};

console.log(person.firstName); // Ada
console.log(person['last-name']); // Lovelace (Bracket notation needed)
person.greet(); // Hello, I'm Ada

Object Methods

• `Object.keys(obj)`: Returns array of own property keys.
• `Object.values(obj)`: Returns array of own property values.
• `Object.entries(obj)`: Returns array of `[key, value]` pairs.
• `Object.assign(target, ...sources)`: Copies properties from sources to target (shallow copy).
• `Object.create(proto, propertiesObject?)`: Creates a new object with the specified prototype object and properties.
• `Object.hasOwn(obj, prop)` (ES2022) / `obj.hasOwnProperty(prop)` (older): Checks if object has own property (not inherited).
• `Object.freeze(obj)`: Prevents modifications (shallow).

Prototypal Inheritance

Objects inherit properties from their prototype (`[[Prototype]]`). Lookups follow the prototype chain until the property is found or the chain ends (`null`). Prototype Chain

// Using Object.create for inheritance
const animalPrototype = {
  speak() { console.log(`${this.name} makes a noise.`); }
};

const dog = Object.create(animalPrototype);
dog.name = 'Buddy';
dog.bark = function() { console.log('Woof!'); };

dog.speak(); // Buddy makes a noise. (Inherited)
dog.bark();  // Woof!

console.log(Object.getPrototypeOf(dog) === animalPrototype); // true

// ES6 Class equivalent (syntax sugar)
class Animal { speak() { console.log(`${this.name} makes a noise.`); } }
class Dog extends Animal { constructor(name){ super(); this.name = name; } bark() { console.log('Woof!'); } }
const buddy = new Dog('Buddy');
buddy.speak();