Scope and Memory Management

The Scope Chain

The scope chain is a fundamental mechanism for variable lookup in JavaScript. It consists of a hierarchy of scopes created by nested code blocks or functions. When a variable is requested, the engine searches the current scope first; if not found, it moves up to the parent scope, continuing until the global scope is reached. Inner scopes have access to outer scope variables, but the reverse is not true.

Garbage Collection

JavaScript employs automatic memory management, primarily using the Mark-and-Sweep algorithm.

• Mark-and-Sweep: The garbage collector starts from 'root' objects (like the global object or active variables on the call stack) and marks all reachable objects. In the sweep phase, unmarked objects are considered unreachable and deallocated. This method effectively handles circular references.
• Reference Counting: An older strategy where objects track how many references point to them. When the count drops to zero, memory is freed. This approach is rarely used now due to its inability to resolve circular references, which leads to memory leaks.

Closures

A closure occurs when an inner function preserves access to variables in its outer (enclosing) function's scope, even after the outer function has finished execution. This allows for data encapsulation and the creation of private variables.

function createTimer() {
  let seconds = 0;
  return {
    tick: function() {
      seconds++;
      console.log(`Elapsed: ${seconds}s`);
    },
    reset: function() {
      seconds = 0;
      console.log('Timer reset.');
    }
  };
}

const timer = createTimer();
timer.tick(); // Elapsed: 1s
timer.tick(); // Elapsed: 2s

Function Mechanics

Parameters and Arguments

Functions can define default values for parameters directly in the signature. If an argument is omitted or is undefined, the default value is used.

function greetUser(name = 'Guest', status = 'Active') {
  console.log(`User: ${name}, Status: ${status}`);
}
greetUser(); // User: Guest, Status: Active

Inside a function (excluding arrow functions), the arguments object is available. It is an array-like object containing all passed arguments. However, modern JavaScript favors rest parameters (...), which collect excess arguments into a true Array.

function aggregateMetrics(...values) {
  return values.reduce((acc, val) => acc + val, 0);
}
console.log(aggregateMetrics(10, 20, 30)); // 60

Arrow Functions

Arrow functions provide a concise syntax and lexically bind the this value. They do not have their own arguments object or this context; they inherit both from the enclosing execution context. Consequently, they cannot be used as constructors with the new keyword.

const multiplier = (factor, ...nums) => {
  return nums.map(n => n * factor);
};

const contextDemo = {
  val: 10,
  traditionalFn: function() { console.log(this.val); },
  arrowFn: () => console.log(this.val) // Inherits 'this' from global/window
};

The Spread Operator and Destructuring

Spread Syntax (...)

The spread operator allows iterables (like arrays or strings) to be expanded in places where zero or more arguments or elements are expected. It is commonly used for cloning arrays/objects or merging them.

const sourceArr = [1, 2, 3];
const cloneArr = [...sourceArr];
const mergedObj = { a: 1, ...{ b: 2 } }; // { a: 1, b: 2 }

Destructuring Assignment

Destructuring enables unpacking values from arrays or properties from objects into distinct variables.

// Array Destructuring
const rgb = [255, 100, 50];
const [red, green, blue = 0] = rgb;

// Object Destructuring with Alias
const user = { id: 101, username: 'jdoe' };
const { id: userId, username } = user;
console.log(userId); // 101

Array Methods

Key iteration methods include forEach for side-effects and filter for deriving new arrays based on conditions.

const inventory = [
  { item: 'apple', qty: 10 },
  { item: 'banana', qty: 5 },
  { item: 'orange', qty: 20 }
];

// forEach iterates but returns undefined
inventory.forEach(product => console.log(product.item));

// filter creates a new array with elements passing the test
const lowStock = inventory.filter(p => p.qty < 10);
console.log(lowStock); // [{ item: 'banana', qty: 5 }]

Object-Oriented Programming

Constructors and Instances

A constructor is a function designed to create objects via the new keyword. When invoked with new, the function creates a new object, binds this to it, and executes the internal logic. By convention, constructor names are capitalized.

function Device(name) {
  this.name = name; // Instance member
}

const phone = new Device('Smartphone');

Static and Prototype Members

Static members are properties or methods attached directly to the constructor function and are not accessible by instances. Prototype members are shared across all instances, saving memory.

Device.info = 'Generic Device'; // Static member

Device.prototype.powerOn = function() {
  console.log(`${this.name} is now on.`);
};

phone.powerOn(); // Smartphone is now on.

Inheritance and The Prototype Chain

JavaScript implements inheritance through prototypes. Every object has a __proto__ link pointing to its constructor's prototype. When a property is accessed, the engine traverses up this chain until it finds the property or reaches null.

function Vehicle(wheels) {
  this.wheels = wheels;
}

function Car(model) {
  Vehicle.call(this, 4); // Call parent constructor
  this.model = model;
}

// Set up inheritance
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

const sedan = new Car('Sedan');
console.log(sedan instanceof Car); // true

Manipulating Context (this)

JavaScript provides methods to explicitly control the this context: call, apply, and bind.

• call(): Invokes the function immediately with a specified this and arguments provided individually.
• apply(): Invokes the function immediately with a specified this and arguments provided as an array.
• bind(): Does not invoke the function immediately. It returns a new function with this permanently bound to the provided value.

function updateProfile(age, city) {
  console.log(`${this.name}, Age: ${age}, City: ${city}`);
}

const person = { name: 'Alice' };

updateProfile.call(person, 25, 'New York');
updateProfile.apply(person, [30, 'London']);

const boundProfile = updateProfile.bind(person);
boundProfile(40, 'Tokyo');