75 Advanced Javascript Concepts for Experienced Programmers

17. Template Literals:

Explanation: Template literals, introduced in ES6, provide a new way to create strings in JavaScript. They allow for multi-line strings and expression interpolation, making it easier to build strings with dynamic content.

Example:

const name = 'John';
const age = 30;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Output: Hello, my name is John and I am 30 years old.

In this example, the template literal syntax () is used to create a string with embedded expressions (${name}and${age}`) that are evaluated and included in the resulting string.

18. Destructuring:

Explanation: Destructuring, introduced in ES6, is a syntax that allows for the unpacking of values from arrays or properties from objects into distinct variables. It makes it easier to extract and work with data from complex structures.

Example:

// Array destructuring
const [a, b] = [1, 2];
console.log(a); // Output: 1
console.log(b); // Output: 2

// Object destructuring
const person = { name: 'Jane', age: 25 };
const { name, age } = person;
console.log(name); // Output: Jane
console.log(age); // Output: 25

In this example, array destructuring assigns values from the array [1, 2] to the variables a and b, and object destructuring assigns properties from the person object to the variables name and age.

19. Spread and Rest Operators:

Explanation: The spread and rest operators, introduced in ES6, provide more flexibility when working with arrays, objects, and function arguments. The spread operator (...) expands an iterable into its individual elements, while the rest operator collects multiple elements into a single array.

Example using Spread Operator:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]

Example using Rest Operator:

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // Output: 10

In these examples, the spread operator is used to combine arrays, and the rest operator is used to gather multiple function arguments into a single array.

20. Arrow Functions:

Explanation: Arrow functions, introduced in ES6, provide a shorter syntax for writing function expressions. They do not have their own this context, which means this inside an arrow function refers to the enclosing lexical context.

Example:

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const addArrow = (a, b) => a + b;

console.log(add(2, 3)); // Output: 5
console.log(addArrow(2, 3)); // Output: 5

In this example, the arrow function addArrow provides a more concise way to define the add function, with implicit return of the result.

21. Classes and Inheritance:

Explanation: Classes, introduced in ES6, provide a more convenient syntax for creating constructor functions and managing inheritance in JavaScript. They are syntactic sugar over the existing prototype-based inheritance model.

Example:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Output: Rex barks.

In this example, the Animal class defines a constructor and a method, and the Dog class extends Animal, overriding the speak method.

22. Modules (ES6+):

Explanation: ES6 introduced a native module system for JavaScript, allowing developers to define modules and export/import functionality between them. This enables better code organization and reuse.

Example:

// math.js (module exporting functions)
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js (module importing functions)
import { add, subtract } from './math.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

In this example, math.js exports functions using the export keyword, and main.js imports these functions using the import statement.

23. Generators and Iterators:

Explanation: Generators, introduced in ES6, are special functions that can be paused and resumed, allowing the function to yield multiple values over time. They are defined using the function* syntax and the yield keyword.

Example:

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator();
console.log(gen.next().value); // Output: 1
console.log(gen.next().value); // Output: 2
console.log(gen.next().value); // Output: 3

In this example, the generator function yields values 1, 2, and 3 sequentially. The next method is used to retrieve each value from the generator.

24. Async/Await:

Explanation: Async/await, introduced in ES2017 (ES8), provides a more readable and synchronous-looking way to work with asynchronous code. It is built on top of promises, allowing asynchronous functions to be written using the async keyword, and the await keyword to pause execution until a promise is resolved.

Example:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchDataAsync(); // Output after 2 seconds: Data fetched successfully

In this example, the fetchDataAsync function uses the async keyword to define an asynchronous function and the await keyword to wait for the fetchData promise to resolve.

25. Higher-Order Functions:

Explanation: Higher-order functions are functions that can take other functions as arguments or return functions as their result. They are a key concept in functional programming and enable powerful abstraction and code reuse.

Example:

function greet(name) {
  return function(message) {
    console.log(`${message}, ${name}!`);
  };
}

const greetJohn = greet('John');
greetJohn('Hello'); // Output: Hello, John!
greetJohn('Goodbye'); // Output: Goodbye, John!

In this example, the greet function returns another function that takes a message as an argument and logs a greeting message.

26. Callback Functions:

Explanation: A callback function is a function passed as an argument to another function and is executed after some operation is completed. Callbacks are commonly used in asynchronous programming to handle tasks like I/O operations, timers, and event listeners.

Example:

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched successfully');
  }, 2000);
}

fetchData(data => {
  console.log(data); // Output after 2 seconds: Data fetched successfully
});

In this example, the fetchData function takes a callback function as an argument and calls it with the fetched data after a delay of 2 seconds.

27. Event Bubbling and Capturing:

Explanation: Event bubbling and capturing are two phases of event propagation in the DOM. In the capturing phase, the event starts from the root and propagates down to the target element. In the bubbling phase, the event starts from the target element and propagates up to the root. Event listeners can be registered for either phase.

Example:

document.getElementById('child').addEventListener('click', () => {
  console.log('Child clicked');
}, true); // Capturing phase

document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
}, false); // Bubbling phase

In this example, the child element’s click event is handled in the capturing phase, and the parent element’s click event is handled in the bubbling phase.

28. JSON Handling:

Explanation: JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. JavaScript provides built-in methods to parse JSON strings into objects and to stringify objects into JSON strings.

Example:

const jsonString = '{"name": "Alice", "age": 25}';

// Parsing JSON string to object
const user = JSON.parse(jsonString);
console.log(user.name); // Output: Alice

// Stringifying object to JSON string
const newUser = { name: 'Bob', age: 30 };
const newJsonString = JSON.stringify(newUser);
console.log(newJsonString); // Output: {"name":"Bob","age":30}

In this example, JSON.parse converts a JSON string into a JavaScript object, and JSON.stringify converts a JavaScript object into a JSON string.

29. Closures:

Explanation: A closure is a feature in JavaScript where an inner function has access to its outer enclosing function’s variables and parameters, even after the outer function has returned. Closures enable powerful patterns like data encapsulation and function factories.

Example:

function makeCounter() {
  let count = 0;
  return function() {
    count += 1;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

In this example, the inner function returned by makeCounter forms a closure, retaining access to the count variable even after makeCounter has returned.

30. Promises:

Explanation: Promises represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They provide a cleaner and more manageable way to handle asynchronous operations compared to traditional callback-based approaches.

Example:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved');
  }, 2000);
});

promise.then(result => {
  console.log(result); // Output after 2 seconds: Promise resolved
}).catch(error => {
  console.error(error);
});

In this example, a new promise is created that resolves after a delay of 2 seconds. The then method is used to handle the resolved value, and the catch method is used to handle any errors.

31. Prototypes and Inheritance:

Explanation: Prototypes are a fundamental mechanism by which JavaScript objects inherit properties and methods from other objects. Every JavaScript object has a prototype, which is another object that provides shared properties and methods. This enables inheritance and method reuse.

Example:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.greet(); // Output: Hello, my name is Alice

In this example, the Person constructor function creates new objects with a name property. The greet method is defined on Person.prototype, making it available to all instances of Person.

32. Hoisting:

Explanation: Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase. This means that variables and functions can be used before they are declared in the code.

Example:

console.log(hoistedVar); // Output: undefined
var hoistedVar = 'I am hoisted';

hoistedFunction(); // Output: I am hoisted
function hoistedFunction() {
  console.log('I am hoisted');
}

In this example, the variable hoistedVar and the function hoistedFunction are hoisted to the top of their scope, allowing them to be used before their declarations in the code.

33. Currying:

Explanation: Currying is a functional programming technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for partial application of arguments and function reuse.

Example:

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(3)); // Output: 6
console.log(multiplyByTwo(4)); // Output: 8

In this example, the multiply function is curried, allowing the creation of specialized functions like multiplyByTwo that partially apply the first argument.

34. Memoization:

Explanation: Memoization is an optimization technique where the results of expensive function calls are cached, so that subsequent calls with the same arguments return the cached result instead of recomputing it. This can significantly improve performance for functions with repeated calls.

Example:

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    } else {
      const result = fn(...args);
      cache[key] = result;
      return result;
    }
  };
}

const factorial = memoize(function(n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
});

console.log(factorial(5)); // Output: 120
console.log(factorial(5)); // Output: 120 (retrieved from cache)

In this example, the memoize function wraps the factorial function, caching its results and improving performance for repeated calls with the same arguments.

35. Debouncing and Throttling:

Explanation: Debouncing and throttling are techniques to control the rate at which a function is executed, often in response to user events. Debouncing ensures that a function is called only after a specified delay since the last invocation, while throttling ensures that a function is called at most once in a specified interval.

Example using Debounce:

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Window resized');
}, 300));

In this example, the debounce function wraps a callback to log a message when the window is resized, ensuring that the callback is called only after 300 milliseconds have passed since the last resize event.

36. ES6 Map and Set:

Explanation: ES6 introduced new data structures, Map and Set, to provide more flexible and efficient ways to store and manipulate collections of data. Map is an ordered collection of key-value pairs, while Set is an unordered collection of unique values.

Example using Map:

const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');

console.log(map.get('key1')); // Output: value1
console.log(map.size); // Output: 2

Example using Set:

const set = new Set();
set.add(1);
set.add(2);
set.add(2); // Duplicate value is ignored

console.log(set.has(1)); // Output: true
console.log(set.size); // Output: 2

In these examples, Map and Set are used to store and retrieve data efficiently, with Map storing key-value pairs and Set storing unique values.

37. Symbols:

Explanation: Symbols, introduced in ES6, are a new primitive data type that is used to create unique and immutable identifiers for object properties. They are useful for defining non-enumerable properties and avoiding naming conflicts.

Example:

const sym1 = Symbol('description');
const sym2 = Symbol('description');

const obj = {
  [sym1]: 'value1',
  [sym2]: 'value2'
};

console.log(obj[sym1]); // Output: value1
console.log(obj[sym2]); // Output: value2
console.log(sym1 === sym2); // Output: false

In this example, two symbols with the same description are created, but they are unique and can be used as property keys without conflicts.

38. Typed Arrays:

Explanation: Typed arrays provide a way to work with binary data in JavaScript. They are array-like objects that allow you to read and write raw binary data directly, offering better performance and control over memory usage.

Example:

const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);

int32View[0] = 42;
console.log(int32View[0]); // Output: 42

In this example, an ArrayBuffer of 16 bytes is created, and an Int32Array view is used to interpret and manipulate the data as 32-bit integers.

39. Proxy and Reflect:

Explanation: Proxy and Reflect, introduced in ES6, provide meta-programming capabilities in JavaScript. Proxy allows you to create objects with custom behavior for fundamental operations, while Reflect provides methods to intercept and define custom behavior for these operations.

Example using Proxy:

const target = {
  message: 'Hello, World!'
};

const handler = {
  get: function(obj, prop) {
    if (prop === 'message') {
      return `Intercepted: ${obj[prop]}`;
    }
    return obj[prop];
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.message); // Output: Intercepted: Hello, World!

In this example, a Proxy is used to intercept and modify the behavior of accessing the message property of the target object.

40. WeakMap and WeakSet:

Explanation: WeakMap and WeakSet, introduced in ES6, are similar to Map and Set but with key differences: they do not prevent garbage collection of keys (in WeakMap) or values (in WeakSet). This makes them useful for memory management and preventing memory leaks.

Example using WeakMap:

const weakMap = new WeakMap();
const obj = {};

weakMap.set(obj, 'value');
console.log(weakMap.get(obj)); // Output: value

// obj is eligible for garbage collection when no longer referenced

Example using WeakSet:

const weakSet = new WeakSet();
const obj = {};

weakSet.add(obj);
console.log(weakSet.has(obj)); // Output: true

// obj is eligible for garbage collection when no longer referenced

In these examples, WeakMap and WeakSet are used to store references to objects without preventing their garbage collection.

41. Default Parameters:

Explanation: Default parameters, introduced in ES6, allow you to specify default values for function parameters. If no argument is provided for a parameter, the default value is used.

Example:

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, Guest!
greet('Alice'); // Output: Hello, Alice!

In this example, the name parameter has a default value of 'Guest', which is used when no argument is provided to the greet function.

42. Rest Parameters:

Explanation: Rest parameters, introduced in ES6, allow you to represent an indefinite number of arguments as an array. This is useful for functions that need to handle a variable number of arguments.

Example:

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // Output: 6
console.log(sum(4, 5, 6, 7)); // Output: 22

In this example, the sum function uses the rest parameter syntax (...numbers) to accept any number of arguments and sum them up.

43. Spread Syntax:

Explanation: Spread syntax, introduced in ES6, allows an iterable (e.g., an array) to be expanded into individual elements. This is useful for combining arrays, passing arguments to functions, and more.

Example:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];

console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(...arr1)); // Output: 6

In this example, spread syntax is used to combine two arrays and to pass array elements as individual arguments to a function.

44. ES6 Modules:

Explanation: ES6 modules provide a standardized way to organize and reuse code. Modules can export functions, objects, or values and import them in other modules, enabling modular and maintainable code.

Example:

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';

console.log(add(2, 3)); // Output: 5

In this example, the add function is exported from math.js and imported in main.js, allowing it to be used in the main module.

45. ES7 (ES2016) – Exponentiation Operator:

Explanation: The exponentiation operator (**), introduced in ES7, provides a shorthand for exponentiation, making it easier to raise numbers to a power.

Example:

const result = 2 ** 3;
console.log(result); // Output: 8

In this example, the exponentiation operator is used to calculate 2 raised to the power of 3.

46. ES7 (ES2016) – Array.prototype.includes:

Explanation: The includes method, introduced in ES7, allows you to check if an array includes a certain element, returning true or false.

Example:

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // Output: true
console.log(numbers.includes(6)); // Output: false

In this example, the includes method is used to check if the array contains the elements 3 and 6.

47. ES8 (ES2017) – Async/Await:

Explanation: Async/await, introduced in ES8, provides a more readable way to work with asynchronous code. The async keyword is used to define an asynchronous function, and the await keyword pauses execution until a promise is resolved.

Example:

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
}

async function fetchDataAsync() {
  const data = await fetchData();
  console.log(data); // Output after 2 seconds: Data fetched
}

fetchDataAsync();

In this example, the fetchDataAsync function uses async/await to handle the asynchronous fetchData function.

48. ES8 (ES2017) – Object.entries:

Explanation: The Object.entries method, introduced in ES8, returns an array of a given object’s own enumerable property [key, value] pairs. This is useful for iterating over objects.

Example:

const user = { name: 'Alice', age: 25 };
const entries = Object.entries(user);

entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// Output:
// name: Alice
// age: 25

In this example, Object.entries is used to get an array of key-value pairs from the user object.

49. ES8 (ES2017) – Object.values:

Explanation: The Object.values method, introduced in ES8, returns an array of a given object’s own enumerable property values. This is useful for getting the values of an object.

Example:

const user = { name: 'Alice', age: 25 };
const values = Object.values(user);

console.log(values); // Output: ['Alice', 25]

In this example, Object.values is used to get an array of values from the user object.

50. ES8 (ES2017) – String Padding:

Explanation: String padding methods, padStart and padEnd, introduced in ES8, allow you to pad a string with another string until the resulting string reaches a given length.

Example:

const str = '5';
console.log(str.padStart(3, '0')); // Output: '005'
console.log(str.padEnd(3, '0')); // Output: '500'

In this example, padStart pads the string from the start, and padEnd pads the string from the end, until the resulting string reaches the specified length.

51. ES9 (ES2018) – Rest/Spread Properties:

Explanation: Rest and spread properties, introduced in ES9, allow you to collect and spread properties in objects, similar to the rest and spread syntax for arrays.

Example using Rest Properties:

const str = '5';
console.log(str.padStart(3, '0')); // Output: '005'
console.log(str.padEnd(3, '0')); // Output: '500'

Example using Spread Properties:

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // Output: { a: 1, b: 2, c: 3 }

In these examples, rest properties are used to collect the remaining properties into an object, and spread properties are used to combine objects.

52. ES9 (ES2018) – Asynchronous Iteration:

Explanation: Asynchronous iteration, introduced in ES9, allows you to iterate over asynchronous data sources using the for await...of syntax. This makes it easier to work with asynchronous iterables.

Example:

async function* asyncGenerator() {
  yield 'Hello';
  yield 'World';
}

(async () => {
  for await (const value of asyncGenerator()) {
    console.log(value);
  }
  // Output:
  // Hello
  // World
})();

In this example, an asynchronous generator function is used to yield values, and the for await...of loop is used to iterate over these values.

53. ES10 (ES2019) – Array.prototype.flat:

Explanation: The flat method, introduced in ES10, flattens a nested array to the specified depth. This is useful for converting multi-dimensional arrays into a single-dimensional array.

Example:

const arr = [1, [2, [3, [4]]]];
const flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]

In this example, the flat method is used to flatten the array to a depth of 2.

54. ES10 (ES2019) – Array.prototype.flatMap:

Explanation: The flatMap method, introduced in ES10, maps each element of an array using a mapping function and then flattens the result into a new array. This is useful for combining mapping and flattening operations in a single step.

Example:

const arr = [1, 2, 3];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // Output: [1, 2, 2, 4, 3, 6]

In this example, the flatMap method is used to map and flatten the array in a single operation.

55. ES10 (ES2019) – Object.fromEntries:

Explanation: The Object.fromEntries method, introduced in ES10, transforms a list of key-value pairs into an object. This is the inverse of Object.entries.

Example:

const entries = [['name', 'Alice'], ['age', 25]];
const obj = Object.fromEntries(entries);
console.log(obj); // Output: { name: 'Alice', age: 25 }

In this example, Object.fromEntries is used to convert an array of key-value pairs into an object.

56. ES10 (ES2019) – Optional Catch Binding:

Explanation: Optional catch binding, introduced in ES10, allows you to omit the catch binding parameter in try...catch statements. This is useful when you don’t need to reference the error object.

Example:

try {
  throw new Error('Something went wrong');
} catch {
  console.log('Error caught');
}
// Output: Error caught

In this example, the catch binding parameter is omitted, simplifying the try...catch statement when the error object is not needed.

57. ES10 (ES2019) – String.prototype.trimStart and String.prototype.trimEnd:

Explanation: The trimStart and trimEnd methods, introduced in ES10, remove whitespace from the beginning and end of a string, respectively. This is useful for trimming strings.

Example:

const str = '  Hello, World!  ';
console.log(str.trimStart()); // Output: 'Hello, World!  '
console.log(str.trimEnd()); // Output: '  Hello, World!'

In this example, trimStart removes whitespace from the beginning of the string, and trimEnd removes whitespace from the end of the string.

58. ES11 (ES2020) – Optional Chaining:

Explanation: Optional chaining, introduced in ES11, allows you to safely access deeply nested properties of an object without having to check if each reference in the chain is valid. If any reference is null or undefined, the expression short-circuits and returns undefined.

Example:

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland'
  }
};

console.log(user.address?.city); // Output: Wonderland
console.log(user.contact?.email); // Output: undefined

In this example, optional chaining is used to safely access the city property of address and the email property of contact.

59. ES11 (ES2020) – Nullish Coalescing Operator:

Explanation: The nullish coalescing operator (??), introduced in ES11, provides a way to return the right-hand operand when the left-hand operand is null or undefined. This is useful for providing default values.

Example:

const name = null;
const defaultName = 'Guest';

console.log(name ?? defaultName); // Output: Guest

In this example, the nullish coalescing operator returns defaultName because name is null.

60. ES11 (ES2020) – BigInt:

Explanation: BigInt, introduced in ES11, is a new numeric data type that can represent integers with arbitrary precision. This is useful for working with very large numbers.

Example:

const largeNumber = BigInt('123456789012345678901234567890');
const anotherLargeNumber = 123456789012345678901234567890n;

console.log(largeNumber); // Output: 123456789012345678901234567890n
console.log(anotherLargeNumber); // Output: 123456789012345678901234567890n

In this example, BigInt is used to represent large integers with arbitrary precision.

61. ES11 (ES2020) – Dynamic Import:

Explanation: Dynamic import, introduced in ES11, allows you to import modules dynamically at runtime. This is useful for code splitting and lazy loading.

Example:

async function loadModule() {
  const { add } = await import('./math.js');
  console.log(add(2, 3)); // Output: 5
}

loadModule();

In this example, the import function is used to dynamically import the add function from the math.js module at runtime.

62. ES11 (ES2020) – Promise.allSettled:

Explanation: The Promise.allSettled method, introduced in ES11, returns a promise that resolves when all of the input promises have settled, whether they are fulfilled or rejected. This is useful for handling multiple promises without short-circuiting on rejection.

Example:

const promises = [
  Promise.resolve(1),
  Promise.reject(new Error('Error')),
  Promise.resolve(3)
];

Promise.allSettled(promises).then(results => {
  results.forEach(result => console.log(result));
  // Output:
  // { status: 'fulfilled', value: 1 }
  // { status: 'rejected', reason: Error: Error }
  // { status: 'fulfilled', value: 3 }
});

In this example, Promise.allSettled is used to handle an array of promises, logging their status and result when they settle.

63. ES11 (ES2020) – globalThis:

Explanation: globalThis, introduced in ES11, provides a standard way to access the global this value across different environments (e.g., window in browsers, global in Node.js).

Example:

globalThis.someGlobalVariable = 'Hello, World!';
console.log(globalThis.someGlobalVariable); // Output: Hello, World!

In this example, globalThis is used to set and access a global variable in a cross-environment way.

64. ES11 (ES2020) – String.prototype.matchAll:

Explanation: The matchAll method, introduced in ES11, returns an iterator of all results matching a string against a regular expression, including capturing groups.

Example:

const str = 'test1test2';
const regex = /t(e)(st(\d?))/g;
const matches = str.matchAll(regex);

for (const match of matches) {
  console.log(match);
  // Output:
  // ["test1", "e", "st1", "1"]
  // ["test2", "e", "st2", "2"]
}

In this example, matchAll is used to find all matches of the regular expression in the string, including capturing groups.

65. ES12 (ES2021) – Logical Assignment Operators:

Explanation: Logical assignment operators (&&=, ||=, ??=), introduced in ES12, combine logical operations with assignment, providing a shorthand for common patterns.

Example:

let x = true;
let y = false;

x &&= true;
y ||= true;

console.log(x); // Output: true
console.log(y); // Output: true

let z = null;
z ??= 'default';

console.log(z); // Output: default

In this example, logical assignment operators are used to combine logical operations with assignment.

66. ES12 (ES2021) – Numeric Separators:

Explanation: Numeric separators, introduced in ES12, allow you to use underscores (_) as separators in numeric literals to improve readability, especially for large numbers.

Example:

const largeNumber = 1_000_000_000;
const smallNumber = 0.000_001;

console.log(largeNumber); // Output: 1000000000
console.log(smallNumber); // Output: 0.000001

In this example, numeric separators are used to improve the readability of large and small numbers.

67. ES12 (ES2021) – String.prototype.replaceAll:

Explanation: The replaceAll method, introduced in ES12, allows you to replace all occurrences of a substring or regular expression in a string.

Example:

const str = 'hello world hello';
const newStr = str.replaceAll('hello', 'hi');

console.log(newStr); // Output: hi world hi

In this example, replaceAll is used to replace all occurrences of 'hello' with 'hi' in the string.

68. ES12 (ES2021) – WeakRefs:

Explanation: WeakRef, introduced in ES12, provides a way to hold a weak reference to an object, allowing it to be garbage collected if there are no other strong references. This is useful for managing memory in certain scenarios.

Example:

let obj = { name: 'Alice' };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()); // Output: { name: 'Alice' }

obj = null; // obj is now eligible for garbage collection
console.log(weakRef.deref()); // Output: undefined (after garbage collection)

In this example, WeakRef is used to hold a weak reference to an object, allowing it to be garbage collected.

69. ES12 (ES2021) – FinalizationRegistry:

Explanation: FinalizationRegistry, introduced in ES12, provides a way to register a callback that is called when an object is garbage collected. This is useful for cleaning up resources.

Example:

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Cleaned up: ${heldValue}`);
});

let obj = { name: 'Alice' };
registry.register(obj, 'Some resource');

obj = null; // obj is now eligible for garbage collection
// Output: Cleaned up: Some resource (after garbage collection)

In this example, FinalizationRegistry is used to register a cleanup callback for an object that is eligible for garbage collection.

70. ES13 (ES2022) – Top-Level await:

Explanation: Top-level await, introduced in ES13, allows you to use the await keyword at the top level of a module, making it easier to work with asynchronous code without wrapping it in an async function.

Example:

// main.js
const data = await fetch('https://api.example.com/data').then(response => response.json());
console.log(data);

In this example, await is used at the top level of the module to fetch and log data from an API.

71. ES13 (ES2022) – Class Fields and Private Methods:

Explanation: Class fields and private methods, introduced in ES13, provide a way to define properties and methods directly within a class body, with the ability to make them private using the # prefix.

Example:

class Person {
  name;
  #age;

  constructor(name, age) {
    this.name = name;
    this.#age = age;
  }

  #getAge() {
    return this.#age;
  }

  describe() {
    return `${this.name} is ${this.#getAge()} years old.`;
  }
}

const alice = new Person('Alice', 30);
console.log(alice.describe()); // Output: Alice is 30 years old
console.log(alice.#getAge()); // Error: Private field '#getAge' must be declared in an enclosing class

In this example, class fields and private methods are used to define properties and methods within a class, with the # prefix indicating privacy.

72. ES13 (ES2022) – Ergonomic Brand Checks for Private Fields:

Explanation: Ergonomic brand checks for private fields, introduced in ES13, provide a way to check if an object has a specific private field, enhancing encapsulation and data integrity in classes.

Example:

class MyClass {
  #privateField;

  constructor(value) {
    this.#privateField = value;
  }

  hasPrivateField() {
    return #privateField in this;
  }
}

const obj = new MyClass('value');
console.log(obj.hasPrivateField()); // Output: true

In this example, ergonomic brand checks are used to determine if an object has a specific private field.

73. ES13 (ES2022) – RegExp Match Indices:

Explanation: RegExp match indices, introduced in ES13, provide the start and end positions of matches in strings, making it easier to work with substrings and capture groups.

Example:

const str = 'test1test2';
const regex = /t(e)(st(\d?))/g;
const matches = [...str.matchAll(regex)];

matches.forEach(match => {
  console.log(match.indices);
  // Output:
  // [[0, 5], [1, 2], [2, 5], [4, 5]]
  // [[5, 10], [6, 7], [7, 10], [9, 10]]
});

In this example, RegExp match indices are used to obtain the start and end positions of matches and capture groups in a string.

74. ES13 (ES2022) – at Method:

Explanation: The at method, introduced in ES13, provides a way to access elements in arrays, strings, or other indexable objects using relative indexing, including negative indices.

Example:

const arr = [1, 2, 3, 4, 5];

console.log(arr.at(0)); // Output: 1
console.log(arr.at(-1)); // Output: 5

In this example, the at method is used to access elements in an array using both positive and negative indices.

75. ES14 (ES2023) – Array.prototype.findLast and Array.prototype.findLastIndex:

Explanation: The findLast and findLastIndex methods, introduced in ES14, allow you to find the last element or the last index of an element in an array that satisfies a provided testing function. This is useful for searching arrays from the end.

Example using findLast:

const arr = [1, 2, 3, 4, 5];

const lastEven = arr.findLast(x => x % 2 === 0);
console.log(lastEven); // Output: 4

Example using findLastIndex:

const arr = [1, 2, 3, 4, 5];

const lastEvenIndex = arr.findLastIndex(x => x % 2 === 0);
console.log(lastEvenIndex); // Output: 3

In these examples, findLast and findLastIndex are used to find the last even element and its index in the array, respectively.

Conclusion:

This comprehensive overview covers the most important features and concepts introduced in JavaScript over the years, providing examples and explanations for each. Whether you are a beginner or an experienced developer, understanding these features will enhance your ability to write modern, efficient, and maintainable JavaScript code.

By learning these concepts and practicing their usage, you will be better equipped to tackle complex JavaScript projects, improve your code quality, and stay up-to-date with the latest advancements in the language.