Hoisting

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during compilation, allowing them to be used before they are actually declared.

console.log(a); // undefined
var a = 5;

The Temporal Dead Zone

The Temporal Dead Zone (TDZ) is the period between the start of a scope and the point where a variable is declared. Trying to access a variable during the TDZ results in a ReferenceError.

console.log(b); // ReferenceError
let b = 10;

Closures

Closures are a powerful feature in JavaScript that allows functions to remember and access variables from their containing scope, even after that scope has executed.

function outer() {
  let c = 5;
  function inner() {
    console.log(c);
  }
  return inner;
}
const innerFunction = outer();
innerFunction(); // Outputs 5

JavaScript Map

The JavaScript Map is a collection that stores key-value pairs where the keys can be of any data type. It provides a way to associate values with keys and is often used when you need to maintain the order of elements.

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap.get('key1')); // Outputs: value1

Reduce Method

The "reduce" method is used to apply a function to an accumulator and each element in an array to reduce the array to a single value. It's often used for calculations such as summing up array elements.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Outputs: 15

Unique Values - Set

The Set object in JavaScript represents a collection of unique values. It can be used to store and manage unique elements, helping you eliminate duplicates from arrays.

const uniqueNumbers = new Set([1, 2, 2, 3, 4, 4]);
console.log(uniqueNumbers); // Outputs: Set { 1, 2, 3, 4 }

Destructuring

Destructuring is a feature in JavaScript that allows you to extract values from objects or arrays and assign them to variables in a more concise and readable way.

const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age); // Outputs: Alice 25

Async/Await

Async/Await is a modern way to work with asynchronous code in JavaScript. It allows you to write asynchronous code in a more synchronous-looking style, making it easier to read and understand.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}
fetchData();

Promises

Promises are a way to handle asynchronous operations in JavaScript. They provide a more structured and readable approach to handling callbacks and managing async code flow.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
};
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Fetch API

The Fetch API provides an interface for making network requests in a more modern way compared to traditional XMLHttpRequest. It returns Promises, making it easier to handle async data retrieval.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));