JavaScript is the cornerstone of modern web development, enabling developers to create interactive, dynamic, and responsive web pages. This cheat sheet delves into essential JavaScript concepts, making it an indispensable resource for both beginners and seasoned developers.

Variable Declarations

JavaScript offers multiple ways to declare variables, each serving different scopes and use cases:

• `let`: Allows you to declare a block-scoped variable that can be updated.

  let name = 'Alice';  
  name = 'Bob'; // value can be changed 

• `const`: Declares a block-scoped variable whose value cannot be changed.

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

• `var`: Declares a function-scoped or globally-scoped variable. It is generally avoided in modern code due to its quirky behavior.

  var age = 30;
  if (true) {
    var age = 31; // same variable
  }
  console.log(age); // 31

Functions

Functions are the building blocks of JavaScript. They can be declared in various ways:

• Function Declaration: A traditional way to define a function.

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

• Arrow Function: Provides a concise syntax and lexical this binding.

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

• Function Expression: A function assigned to a variable.

  const add = function(a, b) {
    return a + b;
  };

Event Handling

Event handling is crucial for creating interactive web applications. The addEventListener method is versatile for responding to user actions.

• Basic Event Handling:

  document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
  });

• Event Delegation: Efficiently manage events on multiple elements.

  document.getElementById('parentDiv').addEventListener('click', function(event) {
    if (event.target && event.target.matches('button.child')) {
      alert('Child button clicked!');
    }
  });

Array Methods

Arrays are one of JavaScript's most powerful data structures. They come with built-in methods for manipulating and transforming data:

• `map()`: Creates a new array with the results of calling a function on every element.

  const numbers = [1, 2, 3];
  const doubled = numbers.map(num => num * 2);
  console.log(doubled); // [2, 4, 6]

• `filter()`: Creates a new array with all elements that pass a test.

  const numbers = [1, 2, 3, 4, 5];
  const evens = numbers.filter(num => num % 2 === 0);
  console.log(evens); // [2, 4]

• `reduce()`: Applies a function against an accumulator and each element to reduce it to a single value.

  const numbers = [1, 2, 3, 4];
  const sum = numbers.reduce((acc, num) => acc + num, 0);
  console.log(sum); // 10

• `forEach()`: Executes a provided function once for each array element.

  const numbers = [1, 2, 3];
  numbers.forEach(num => console.log(num));
  // Outputs: 1 2 3