📜 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]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'}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); // trueAsync
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);
}
}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')
]);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=1Spread & 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)); // 10Promises
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'));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));Need more developer tools? Check out AIMentionFinder