JavaScript Array Methods and Scoping

JavaScript Array Methods

• Changing original array:
  • pop: Deletes the last element.
  • push: Adds an element to the end.
  • shift: Deletes the first element.
  • slice: Creates a shallow copy (doesn't modify original).

Converting Array to Object

• Object.assign({}, ...arr): Creates a new object from an array using the rest operator.

var, let, and const Differences

• var:
  • Function-scoped.
  • Can be re-declared within the same scope.
  • Hoisted (declared before execution).
• let:
  • Block-scoped.
  • Can't be re-declared within the same scope.
  • Hoisted (declared before execution), but not initialized; attempting to use it before declaration causes a "temporal dead zone" error.
  • Can be updated.
• const:
  • Block-scoped.
  • Can't be re-declared or re-assigned.
  • Hoisted (declared before execution), but not initialized; attempting to use it before declaration causes a "temporal dead zone" error.

Temporal Dead Zone

• Short period during execution when let or const variables are inaccessible.
• It occurs after the variable is declared but before it's initialized.

Creating Objects in JavaScript

• Constructor Functions:
  • Define a function that acts as a blueprint for creating objects.
  • Use new keyword to create instances of object from a class/function blueprint.
• Object.create():
  • Creates a new object with a prototype.
• Object Literals:
  • Creates objects using curly braces and key-value pairs.
• Factory Functions:
  • Create objects from a function and return them.

Copying Object Properties

• Object.assign(): Copies properties from source to target
• Spread Operator (...): Creates a new object by copying the properties of the source object

this Keyword

• Global context: Refers to the global object.
• Methods: Refers to the object the method belongs to.
• Constructor functions: Refers to the newly created object.
• Event handlers: Refers to the element that triggered the event.
• Arrow functions: Lexically bound to the surrounding scope.

Currying

• Technique to transform a function with multiple arguments into a sequence of functions, each taking a single argument.

Regular vs. Arrow Functions

• arguments object: Regular functions have access to this object, which stores the function's parameters. Arrow functions don't have their own arguments object, use rest parameters to achieve similar result.
• this binding: In regular functions the this keyword is determined dynamically, in an arrow function it's lexically bound (from its surrounding scope).
• Syntax: Regular functions define using the keyword "function", and can use either declaration or expression syntax. Arrow functions use concise syntax and the => operator

Equality Operators (==, ===)

• == (Loose Equality): Performs type coercion before comparison.
• === (Strict Equality): Compares both value and type without coercion.

Implicit Type Coercion

• JavaScript automatically converts values to different data types based on the context in which they are used.

Error Handling (try...catch...finally)

• try block: Contains code that might throw an error.
• catch block: Handles errors thrown in the try block.
• finally block: Contains code that always runs, regardless of whether an error occurred or not.

throw Statement

• Used to manually create and throw an error.
• Can create custom error messages/exceptions based on certain conditions.

Error Objects

• Contain information about the error such as message, type, stack trace.

Promises

• Represents the eventual completion or failure of an asynchronous operation.
• Has three states: Pending, Fulfilled, Rejected.

Async Functions

• Used for asynchronous operations.

Prototypes

• Mechanism for creating objects, inheriting properties and methods from other objects.
• Objects have a prototype property (proto).
• __proto__: A property that refers to other objects in the prototype chain.

Getters and Setters

• Special methods to control object property access.
  • Getters: Retrieve values.
  • Setters: Update values.
• Used to encapsulate internal logic and perform validation.

Event Loop

• The main part of JavaScript's non-blocking concurrency model.
• Handles asynchronous operations efficiently without blocking the main thread.
  • Callbacks: Placed into the callback queue.
  • Execution: The event loop checks the call stack, processes the callback queue, and executes callbacks.

Destructuring Assignment

• Extracts values from arrays or objects and assigns them to variables efficiently.
  • Array Destructuring: Separate values from array using square brackets
  • Object Destructuring: Separate properties from objects using curly braces

Storage Methods (Cookies, Local Storage, Session Storage)

• Cookies: Store small pieces of data (up to 4KB). Accessible from client and server.
• Local Storage: Stores larger amounts of data (up to 5MB-10MB). Stays persistent until deleted.
• Session Storage: Stores data only for the duration of the browser session. Cleared when the tab closes.

Event Listeners

• addEventListener(): Method to add event listeners to elements dynamically.
• Inline Event Handlers: Adding directly inside HTML attributes like <button onclick="...">.

Event Propagation

• How events propagate through document.
  • Capturing Phase: Root -> Target Element
  • Bubbling Phase: Target -> Root

Event Delegation

• Handling events at a higher level in the DOM tree.
• Reduces the number of event listeners needed.

stopPropagation()

• Prevents an event from bubbling up the DOM tree.