JavaScript ES6+ Cheat Sheet

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

// Rename variables
const { name: fullName, age: years } = user;

// Default values
const { name, role = 'user' } = user;
// role = 'user' if not in object

// Nested destructuring
const person = {
  name: 'John',
  address: { city: 'NYC', zip: '10001' }
};
const { name, address: { city, zip } } = person;

// Rest operator (remaining properties)
const { name, ...rest } = user;
// rest = { age: 30, city: 'NYC' }

// In function parameters
function displayUser({ name, age }) {
  console.log(`${name} is ${age}`);
}
displayUser(user);

// Computed property names
const key = 'email';
const { [key]: userEmail } = { email: 'john@example.com' };

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

// Skip elements
const [, , third] = colors;
// third = 'blue'

// Rest operator
const [primary, ...others] = colors;
// primary = 'red', others = ['green', 'blue']

// Default values
const [a, b, c, d = 'yellow'] = colors;
// d = 'yellow'

// Swapping variables
let x = 1, y = 2;
[x, y] = [y, x];
// x = 2, y = 1

// Destructuring in loops
const users = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];
for (const { name, age } of users) {
  console.log(`${name}: ${age}`);
}

// Nested array destructuring
const nested = [1, [2, 3], 4];
const [a, [b, c], d] = nested;
// a=1, b=2, c=3, d=4

// Property shorthand
const name = 'John';
const age = 30;
const email = 'john@example.com';

// Old way
const user1 = {
  name: name,
  age: age,
  email: email
};

// Shorthand
const user2 = { name, age, email };

// Method shorthand
const obj = {
  // Old way
  oldMethod: function() {
    return 'result';
  },
  
  // Shorthand
  newMethod() {
    return 'result';
  },
  
  // Arrow function (use sparingly)
  arrowMethod: () => {
    // Note: this won't refer to obj
  }
};

// Computed property names
const propName = 'dynamicKey';
const dynamic = {
  [propName]: 'value',
  [Math.random()]: 'random',
  [`key_${id}`]: 'computed'
};

// Getters and setters
const person = {
  _age: 0,
  get age() {
    return this._age;
  },
  set age(value) {
    if (value >= 0) this._age = value;
  }
};
person.age = 25; // Calls setter

// Object.keys() - get property names
const user = { name: 'John', age: 30 };
Object.keys(user); // ['name', 'age']

// Object.values() - get property values
Object.values(user); // ['John', 30]

// Object.entries() - get [key, value] pairs
Object.entries(user);
// [['name', 'John'], ['age', 30]]

// Iterate entries
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

// Object.assign() - merge objects
const defaults = { theme: 'light', lang: 'en' };
const config = Object.assign({}, defaults, userSettings);
// Or use spread: { ...defaults, ...userSettings }

// Object.freeze() - make immutable
const frozen = Object.freeze({ x: 1 });
frozen.x = 2; // Silent fail

// Object.seal() - prevent adding/removing
const sealed = Object.seal({ x: 1 });
sealed.y = 2; // Fails
sealed.x = 2; // OK

// Object.create() - set prototype
const parent = { greet() { return 'hi'; } };
const child = Object.create(parent);

// Object.defineProperty() - define properties
Object.defineProperty(obj, 'prop', {
  value: 'test',
  writable: false,
  enumerable: true
});

// map() - transform elements
const numbers = [1, 2, 3, 4, 5];
numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter() - select elements
numbers.filter(n => n > 2);
// [3, 4, 5]

// reduce() - accumulate value
numbers.reduce((sum, n) => sum + n, 0);
// 15

// Complex reduce - group by property
const users = [
  { role: 'admin', name: 'John' },
  { role: 'user', name: 'Jane' },
  { role: 'admin', name: 'Bob' }
];

const byRole = users.reduce((groups, user) => {
  groups[user.role] = groups[user.role] || [];
  groups[user.role].push(user.name);
  return groups;
}, {});

// find() - get first match
users.find(u => u.role === 'admin');

// findIndex() - get index of match
users.findIndex(u => u.name === 'Jane');

// some() - check if any match
users.some(u => u.role === 'admin'); // true

// every() - check if all match
numbers.every(n => n > 0); // true

// includes() - simple existence check
numbers.includes(3); // true

// flat() - flatten nested arrays
const nested = [1, [2, 3], [4, [5, 6]]];
nested.flat(); // [1, 2, 3, 4, [5, 6]]
nested.flat(2); // [1, 2, 3, 4, 5, 6]

// flatMap() - map then flatten
const sentences = ['hello world', 'foo bar'];
sentences.flatMap(s => s.split(' '));
// ['hello', 'world', 'foo', 'bar']

// sort() - sort array in place
const words = ['zebra', 'apple', 'banana'];
words.sort(); // ['apple', 'banana', 'zebra']

// Numeric sort (ascending)
numbers.sort((a, b) => a - b);

// Sort objects by property
users.sort((a, b) => 
  a.name.localeCompare(b.name));

// reverse() - reverse order
numbers.reverse();

// join() - convert to string
numbers.join(', '); // '1, 2, 3, 4, 5'

// slice() - create copy/subset
numbers.slice(1, 3); // [2, 3]

// concat() - combine arrays
[1, 2].concat([3, 4]);
// or use spread: [...[1,2], ...[3,4]]

// indexOf() & lastIndexOf()
numbers.indexOf(3); // 2
numbers.lastIndexOf(3); // 2

// Default export
export default class Calculator {
  add(a, b) { return a + b; }
}

// or
const config = { API_URL: '...' };
export default config;

// Named exports
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

export class Utils {
  static capitalize(str) {
    return str[0].toUpperCase() + str.slice(1);
  }
}

// Export all from module
export * from './utils';

// Export with alias
export { add as sum, subtract as minus };

// Mixed default + named
export default Database;
export { User, Post };

// Default import
import Calculator from './calculator';
const calc = new Calculator();

// Named imports
import { add, subtract } from './math';

// Import everything
import * as math from './math';
math.add(1, 2);

// Mix default and named
import Database, { User, Post } from './db';

// Import with alias
import { add as sum } from './math';
sum(1, 2);

// Dynamic import (runtime)
const module = await import('./utils');
const result = module.doSomething();

// Conditional imports
if (isDevelopment) {
  const debug = await import('./debug');
}

// Side-effect imports (run code)
import './styles.css';
import './setup'; // Runs setup.js code

// Select elements
const element = document.getElementById('my-id');
const elements = document.querySelectorAll('.my-class');
const first = document.querySelector('.my-class');

// Iterate selections
elements.forEach(el => {
  el.textContent = 'New text';
  el.style.color = 'red';
});

// Modify attributes
element.setAttribute('data-id', '123');
element.getAttribute('data-id'); // '123'
element.removeAttribute('disabled');

// Class operations
element.classList.add('active');
element.classList.remove('disabled');
element.classList.toggle('hidden');
element.classList.contains('active'); // true

// Create elements
const div = document.createElement('div');
div.textContent = 'Hello';
div.className = 'container';

// Add to DOM
element.appendChild(div);
element.insertBefore(div, element.firstChild);
element.replaceChild(newEl, oldEl);

// Remove from DOM
element.remove();
element.parentElement?.removeChild(element);

// Get parent/siblings
const parent = element.parentElement;
const prev = element.previousElementSibling;
const next = element.nextElementSibling;

// Add event listener
button.addEventListener('click', (event) => {
  console.log('Clicked!');
});

// Multiple events
['click', 'touchend'].forEach(event => {
  button.addEventListener(event, handleClick);
});

// Event delegation (efficient)
document.addEventListener('click', (event) => {
  if (event.target.matches('.delete-btn')) {
    deleteItem(event.target.dataset.id);
  }
});

// Remove listener
button.removeEventListener('click', handler);

// Event object properties
button.addEventListener('click', (e) => {
  e.preventDefault(); // Stop default
  e.stopPropagation(); // Stop bubbling
  e.target; // Element clicked
  e.currentTarget; // Element with listener
  e.type; // 'click'
  e.key; // Key pressed (keyboard)
  e.clientX; // Mouse position
});

// Common events
// - click, dblclick, mousedown, mouseup
// - focus, blur, input, change
// - keydown, keyup, keypress
// - submit, reset
// - load, unload, beforeunload
// - scroll, resize
// - dragstart, drop, dragover

// Array grouping (ES2024)
const items = [
  { category: 'A', value: 10 },
  { category: 'B', value: 20 },
  { category: 'A', value: 30 }
];

const grouped = Object.groupBy(items, item => 
  item.category);
// { A: [...], B: [...] }

// findLast() and findLastIndex()
const lastEven = numbers.findLast(n => 
  n % 2 === 0);
const lastIdx = numbers.findLastIndex(n => 
  n % 2 === 0);

// Array.from with mapping
const range = Array.from({ length: 5 }, 
  (_, i) => i + 1);
// [1, 2, 3, 4, 5]

// at() for array access
const last = arr.at(-1); // Last element
const first = arr.at(0); // First element

// Promise.withResolvers() (ES2024)
const { promise, resolve, reject } = 
  Promise.withResolvers();
// Cleaner promise creation

// Using ?? and ?. together
const city = user?.address?.city ?? 'Unknown';

// Logical assignment operators
let timeout = 0;
timeout ||= 5000; // Assign if falsy

let data = null;
data ??= getDefaultData(); // Assign if nullish

let config = {};
config &&= mergeConfig(config); // Assign if truthy

// replaceAll() for strings
const safe = userInput.replaceAll('<', '&lt;');

// structuredClone() for deep copy
const deepCopy = structuredClone(obj);

// Using Promise.allSettled()
const results = await Promise.allSettled([
  fetch1(), fetch2(), fetch3()
]);
results.forEach(result => {
  if (result.status === 'fulfilled') {
    console.log(result.value);
  } else {
    console.error(result.reason);
  }
});

// WeakMap for private data
const privateData = new WeakMap();
privateData.set(obj, 'secret');