📜 JavaScript Quick Reference

Modern JavaScript syntax, array methods, async patterns, and more

Arrays

Array Map & Filter

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

// Map - transform each element
const doubled = numbers.map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

// Filter - select elements
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens);  // [2, 4]

// Chain methods
const result = numbers
  .filter(n => n > 2)
  .map(n => n ** 2);
console.log(result);  // [9, 16, 25]
â–¶ Run

Array Reduce

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

// Sum
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum);  // 15

// Object from array
const users = ['Alice', 'Bob', 'Charlie'];
const userObj = users.reduce((acc, name, i) => {
  acc[i] = name;
  return acc;
}, {});
console.log(userObj);  // {0: 'Alice', 1: 'Bob', 2: 'Charlie'}
â–¶ Run

Array Find & Some/Every

const users = [
  {name: 'Alice', age: 30},
  {name: 'Bob', age: 25},
  {name: 'Charlie', age: 35}
];

// Find first match
const bob = users.find(u => u.name === 'Bob');
console.log(bob);  // {name: 'Bob', age: 25}

// Check if any match
const hasYoung = users.some(u => u.age < 30);
console.log(hasYoung);  // true

// Check if all match
const allAdults = users.every(u => u.age >= 18);
console.log(allAdults);  // true
â–¶ Run

Async

Async/Await

// Async function always returns a Promise
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const user = await response.json();
  return user;
}

// Usage with try/catch
async function getData() {
  try {
    const user = await fetchUser(1);
    console.log(user);
  } catch (err) {
    console.error('Failed:', err);
  }
}
â–¶ Run

Parallel Async Operations

// Sequential (slow)
const user = await fetchUser(1);
const posts = await fetchPosts(1);

// Parallel (fast)
const [user, posts] = await Promise.all([
  fetchUser(1),
  fetchPosts(1)
]);

// Race - first to complete wins
const fastest = await Promise.race([
  fetch('/api/server1'),
  fetch('/api/server2')
]);
â–¶ Run

Modern Syntax

Destructuring

// Object destructuring
const user = {name: 'Alice', age: 30, city: 'NYC'};
const {name, age} = user;

// Rename variables
const {name: userName} = user;

// Array destructuring
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;

// Swap variables
let a = 1, b = 2;
[a, b] = [b, a];  // a=2, b=1
â–¶ Run

Spread & Rest Operators

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

// Spread objects
const user = {name: 'Alice'};
const details = {city: 'NYC'};
const full = {...user, ...details};

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4));  // 10
â–¶ Run

Promises

Creating Promises

// Basic promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('Success!');
    } else {
      reject('Failed!');
    }
  }, 1000);
});

// Using the promise
promise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('Done'));
â–¶ Run

Promise Chaining

fetch('/api/user/1')
  .then(response => response.json())
  .then(user => {
    console.log('User:', user);
    return fetch(`/api/posts?userId=${user.id}`);
  })
  .then(response => response.json())
  .then(posts => console.log('Posts:', posts))
  .catch(error => console.error('Error:', error));
â–¶ Run

Need more developer tools? Check out AIMentionFinder