Modern JavaScript Cheat Sheet
Table of Contents
▪ Variables
▪ Data Types
▪ Arrays
▪ Array Functions
▪ Objects
▪ Functions
▪ Arrow Functions
▪ Template Literals
▪ Destructuring
▪ Loops
▪ Conditional Statements
▪ Promises
▪ Async/Await
▪ Fetch API
▪ DOM Selection and Manipulation
1. Variables
let variableName = "Hello, JavaScript!";
const constantValue = 42;
2. Data Types
// String, Number, Boolean
const name = "Najem";
const age = 25;
const isStudent = true;
// Array, Object
const colors = ['red', 'green', 'blue'];
const person = { name: 'John', age: 30 };
// null, undefined
let value1 = null;
let value2;
Modern JavaScript Cheat Sheet 1
3. Arrays
const colors = ['red', 'green', 'blue'];
// Access element
const firstColor = colors[0]; // 'red'
// Add an element
[Link]('yellow'); // ['red', 'green', 'blue', 'yellow']
// Loop through elements
for (const color of colors) {
[Link](color);
}
4. Array Functions
// Map
const numbers = [1, 2, 3, 4, 5];
const doubled = [Link]((num) => num * 2); // [2, 4, 6, 8, 10]
// Filter
const evenNumbers = [Link]((num) => num % 2 === 0); // [2, 4]
// Reduce
const sum = [Link]((acc, num) => acc + num, 0); // 15
// forEach
[Link]((color) => [Link](color));
// Output:
// 'red'
// 'green'
// 'blue'
// find and findIndex
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' },
];
const user = [Link]((user) => [Link] === 2); // { id: 2, name: 'Bob' }
const userIndex = [Link]((user) => [Link] === 2); // 1
5. Objects
const person = {
name: 'John',
age: 30,
};
2 Modern JavaScript Cheat Sheet
// Access property
const name = [Link]; // 'John'
// Add a new property
[Link] = 'New York';
// Loop through properties
for (const key in person) {
[Link](key, person[key]);
}
// 'name' 'John'
// 'age' 30
// 'city' 'New York'
6. Functions
function greet(name) {
return `Hello, ${name}!`;
}
// Function expression
const add = function (a, b) {
return a + b;
};
// Arrow function
const multiply = (a, b) => a * b;
7. Arrow Functions
const square = (x) => x * x;
const double = (x) => {
return x * 2;
};
8. Template Literals
const name = 'Alice';
const greeting = `Hello, ${name}!`; // 'Hello, Alice!'
9. Destructuring
const person = { name: 'Bob', age: 25 };
const { name, age } = person; // name = 'Bob', age = 25
const colors = ['red', 'green', 'blue'];
const [first, second] = colors; // first = 'red', second = 'green'
Modern JavaScript Cheat Sheet 3
10. Loops
// For Loop
for (let i = 0; i < 5; i++) {
[Link](i);
}
// For...of Loop
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
[Link](color);
}
11. Conditional Statements
const age = 18;
if (age >= 18) {
[Link]('You are an adult.'); // 'You are an adult.'
} else {
[Link]('You are a minor.');
}
12. Promises
const fetchData = () => {
return new Promise((resolve, reject) => {
// Async operation
if (success) {
resolve(data);
} else {
reject(error);
}
});
};
13. Async/Await
async function getData() {
try {
const response = await fetchData();
[Link](response);
} catch (error) {
[Link](error);
}
}
4 Modern JavaScript Cheat Sheet
14. Fetch API
fetch('[Link]
.then((response) => [Link]())
.then((data) => [Link](data))
.catch((error) => [Link](error));
15. DOM Selection and Manipulation
Selecting Elements
const elementById = [Link]('elementId');
const elementsByClass = [Link]('className');
const elementsByTag = [Link]('tagName');
const elementBySelector = [Link]('CSSSelector');
const elementsBySelectorAll = [Link]('CSSSelector');
Manipulating Elements
// Changing text content
[Link] = 'New Text';
// Changing HTML content
[Link] = '<strong>New HTML</strong>';
// Adding/removing CSS classes
[Link]('newClass');
[Link]('oldClass');
// Creating new elements
const newElement = [Link]('tagName');
// Appending elements
[Link](newElement);
// Removing elements
[Link](childElement);
// Event handling
[Link]('click', (event) => {
// Handle click event
});
Modern JavaScript Cheat Sheet 5
