Scribd
Upload
83 views

Modern JavaScript Cheat Sheet

This document provides a cheat sheet overview of modern JavaScript concepts including variables, data types, arrays, array functions, objects, functions, arrow functions, template literals, destructuring, loops, conditional statements, promises, async/await, the Fetch API, and DOM selection and manipulation. It contains code examples for working with each concept.

Uploaded by

mukta.sairatna1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
83 views

Modern JavaScript Cheat Sheet

This document provides a cheat sheet overview of modern JavaScript concepts including variables, data types, arrays, array functions, objects, functions, arrow functions, template literals, destructuring, loops, conditional statements, promises, async/await, the Fetch API, and DOM selection and manipulation. It contains code examples for working with each concept.

Uploaded by

mukta.sairatna1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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
colors.push('yellow'); // ['red', 'green', 'blue', 'yellow']

// Loop through elements


for (const color of colors) {
console.log(color);
}

4. Array Functions

// Map
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2); // [2, 4, 6, 8, 10]

// Filter
const evenNumbers = numbers.filter((num) => num % 2 === 0); // [2, 4]

// Reduce
const sum = numbers.reduce((acc, num) => acc + num, 0); // 15

// forEach
colors.forEach((color) => console.log(color));
// Output:
// 'red'
// 'green'
// 'blue'

// find and findIndex


const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' },
];
const user = users.find((user) => user.id === 2); // { id: 2, name: 'Bob' }
const userIndex = users.findIndex((user) => user.id === 2); // 1

5. Objects

const person = {
name: 'John',
age: 30,
};

2 Modern JavaScript Cheat Sheet


// Access property
const name = person.name; // 'John'

// Add a new property


person.city = 'New York';

// Loop through properties


for (const key in person) {
console.log(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++) {
console.log(i);
}
// For...of Loop
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
console.log(color);
}

11. Conditional Statements

const age = 18;

if (age >= 18) {


console.log('You are an adult.'); // 'You are an adult.'
} else {
console.log('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();
console.log(response);
} catch (error) {
console.error(error);
}
}

4 Modern JavaScript Cheat Sheet


14. Fetch API

fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));

15. DOM Selection and Manipulation

Selecting Elements

const elementById = document.getElementById('elementId');


const elementsByClass = document.getElementsByClassName('className');
const elementsByTag = document.getElementsByTagName('tagName');
const elementBySelector = document.querySelector('CSSSelector');
const elementsBySelectorAll = document.querySelectorAll('CSSSelector');

Manipulating Elements

// Changing text content


elementById.textContent = 'New Text';

// Changing HTML content


elementById.innerHTML = '<strong>New HTML</strong>';

// Adding/removing CSS classes


elementById.classList.add('newClass');
elementById.classList.remove('oldClass');

// Creating new elements


const newElement = document.createElement('tagName');

// Appending elements
parentElement.appendChild(newElement);

// Removing elements
parentElement.removeChild(childElement);

// Event handling
elementById.addEventListener('click', (event) => {
// Handle click event
});

Modern JavaScript Cheat Sheet 5

You might also like