JavaScript Quick Reference

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

Quick Jump

BasicsArraysObjectsFunctionsAsyncDOM

Basics

Variables & Data Types

javascript
// Variables
let name = 'Alice';  // Can be reassigned
const age = 30;      // Cannot be reassigned

// Data types
const str = 'Hello';
const num = 42;
const bool = true;
const arr = [1, 2, 3];
const ...
// Variables
let name = 'Alice';  // Can be reassigned
const age = 30;      // Cannot be reassigned

// Data types
const str = 'Hello';
const num = 42;
const bool = true;
const arr = [1, 2, 3];
const obj = {key: 'value'};

Conditionals & Loops

javascript
// If/else
if (age >= 18) {
  console.log('Adult');
} else {
  console.log('Minor');
}

// Ternary
const status = age >= 18 ? 'Adult' : 'Minor';

// For loop
for (let i = 0; i < 5; i++) {
  console.lo...
// If/else
if (age >= 18) {
  console.log('Adult');
} else {
  console.log('Minor');
}

// Ternary
const status = age >= 18 ? 'Adult' : 'Minor';

// For loop
for (let i = 0; i < 5; i++) {
  console.log(i);
}

Arrays

Array Methods

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

// Map - transform
const doubled = numbers.map(n => n * 2);

// Filter - select
const evens = numbers.filter(n => n % 2 === 0);

// Find
const found = numbers.find(n ...
const numbers = [1, 2, 3, 4, 5];

// Map - transform
const doubled = numbers.map(n => n * 2);

// Filter - select
const evens = numbers.filter(n => n % 2 === 0);

// Find
const found = numbers.find(n => n > 3);

// Some/Every
const hasEven = numbers.some(n => n % 2 === 0);
const allPositive = numbers.every(n => n > 0);

Array Reduce

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

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

// Max
const max = numbers.reduce((a, b) => Math.max(a, b));

// Group by
const items = [{type: 'fruit', n...
const numbers = [1, 2, 3, 4, 5];

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

// Max
const max = numbers.reduce((a, b) => Math.max(a, b));

// Group by
const items = [{type: 'fruit', name: 'apple'}];
const grouped = items.reduce((acc, item) => {
  acc[item.type] = acc[item.type] || [];
  acc[item.type].push(item);
  return acc;
}, {});

Objects

Object Basics

javascript
// Object literal
const user = {
  name: 'Alice',
  age: 30,
  greet() {
    return 'Hello ' + this.name;
  }
};

// Access properties
console.log(user.name);
console.log(user['age']);

// Object meth...
// Object literal
const user = {
  name: 'Alice',
  age: 30,
  greet() {
    return 'Hello ' + this.name;
  }
};

// Access properties
console.log(user.name);
console.log(user['age']);

// Object methods
Object.keys(user);    // ['name', 'age', 'greet']
Object.values(user);  // ['Alice', 30, function]
Object.entries(user); // [['name','Alice'], ...]

Destructuring & Spread

javascript
// Object destructuring
const {name, age} = user;

// Array destructuring
const [first, second] = [1, 2, 3];

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

const obj1 = {a:...
// Object destructuring
const {name, age} = user;

// Array destructuring
const [first, second] = [1, 2, 3];

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

const obj1 = {a: 1};
const obj2 = {...obj1, b: 2};

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

Functions

Arrow Functions

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

// Multiple lines
const multiply = (a, b) => {
  const result = a * b;
  return result;
};

// Single parameter
const double = n => n * 2;

// No parame...
// Arrow function
const add = (a, b) => a + b;

// Multiple lines
const multiply = (a, b) => {
  const result = a * b;
  return result;
};

// Single parameter
const double = n => n * 2;

// No parameters
const greet = () => 'Hello!';

Higher-Order Functions

javascript
// Function returning function
function multiplier(factor) {
  return num => num * factor;
}
const double = multiplier(2);

// Function as parameter
const numbers = [1, 2, 3];
numbers.forEach(n => con...
// Function returning function
function multiplier(factor) {
  return num => num * factor;
}
const double = multiplier(2);

// Function as parameter
const numbers = [1, 2, 3];
numbers.forEach(n => console.log(n));

// Callbacks
setTimeout(() => {
  console.log('After 1 second');
}, 1000);

Async/Await

Async/Await Basics

javascript
// Async function
async function fetchUser(id) {
  const response = await fetch('/api/users/' + id);
  const user = await response.json();
  return user;
}

// Error handling
async function getData() ...
// Async function
async function fetchUser(id) {
  const response = await fetch('/api/users/' + id);
  const user = await response.json();
  return user;
}

// Error handling
async function getData() {
  try {
    const user = await fetchUser(1);
    console.log(user);
  } catch (err) {
    console.error('Error:', err);
  }
}

Promises

javascript
// Creating a promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);
});

// Using promises
promise
  .then(result => console.log(result))...
// Creating a promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);
});

// Using promises
promise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('Done'));

// Promise.all
Promise.all([promise1, promise2])
  .then(results => console.log(results));

DOM Manipulation

Selecting Elements

javascript
// Select elements
const el = document.querySelector('.class');
const byId = document.getElementById('id');
const all = document.querySelectorAll('.items');

// Modify element
el.textContent = 'New te...
// Select elements
const el = document.querySelector('.class');
const byId = document.getElementById('id');
const all = document.querySelectorAll('.items');

// Modify element
el.textContent = 'New text';
el.classList.add('active');
el.style.color = 'blue';

// Create and append
const div = document.createElement('div');
div.textContent = 'Hello';
document.body.appendChild(div);

Event Listeners

javascript
// Add event listener
const btn = document.querySelector('button');
btn.addEventListener('click', (e) => {
  console.log('Clicked!', e);
});

// Event delegation
document.addEventListener('click', (e)...
// Add event listener
const btn = document.querySelector('button');
btn.addEventListener('click', (e) => {
  console.log('Clicked!', e);
});

// Event delegation
document.addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    console.log('Item clicked');
  }
});

// Prevent default
link.addEventListener('click', (e) => {
  e.preventDefault();
});

Discover another handy tool from EditPDF.pro