JavaScript Cheat Sheet

1. Variables


let x = 10; // Declare a variable
const PI = 3.14; // Declare a constant
var y = 20; // Declare a variable (old syntax)

2. Data Types


let x = 10; // Number
let y = `Hello`; // String
let z = true; // Boolean
let a = null; // Null
let b = undefined; // Undefined
let c = [1, 2, 3]; // Array
let d = { name: `John`, age: 30 }; // Object

3. Operators


let x = 10;
let y = 20;
console.log(x + y); // Addition
console.log(x - y); // Subtraction
console.log(x * y); // Multiplication
console.log(x / y); // Division
console.log(x % y); // Modulus
console.log(x ** y); // Exponentiation

4. Conditional Statements


let x = 10;
if (x > 5) {
  console.log(`x is greater than 5`);
} else {
  console.log(`x is less than or equal to 5`);
}

5. Loops


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

6. Functions


function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet(`John`);

7. Arrays


let fruits = [`apple`, `banana`, `cherry`];
console.log(fruits[0]); // Access an element
fruits.push(`orange`); // Add an element
fruits.pop(); // Remove an element

8. Objects


let person = { name: `John`, age: 30 };
console.log(person.name); // Access a property
person.country = `USA`; // Add a property
delete person.age; // Remove a property

9. DOM Manipulation


let element = document.getElementById(`myElement`);
element.innerHTML = `Hello, World!`;
element.style.color = `red`;

10. Events


let button = document.getElementById(`myButton`);
button.addEventListener(`click`, function() {
  console.log(`Button clicked!`);
});

11. JSON


let data = { name: `John`, age: 30 };
let jsonData = JSON.stringify(data);
console.log(jsonData); // Output: {`name`:`John`,`age`:30}

12. AJAX


let xhr = new XMLHttpRequest();
xhr.open(`GET`, `https://api.example.com/data`, true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

13. Promises


let promise = new Promise(function(resolve, reject) {
  // Do something
  resolve(`Success!`);
});
promise.then(function(result) {
  console.log(result); // Output: Success!
});

14. Async/Await


async function myFunction() {
  let result = await myPromise();
  console.log(result); // Output: Success!
}

15. ES6 Classes


class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}
let person = new Person(`John`, 30);
person.greet(); // Output: Hello, my name is John and I am 30 years old.

16. ES6 Modules


// mymodule.js
export function greet(name) {
  console.log(`Hello, ${name}!`);
}
// main.js
import { greet } from `./mymodule.js`;
greet(`John`); // Output: Hello, John!

17. ES6 Destructuring


let person = { name: `John`, age : 30 };
let { name, age } = person; // Destructure properties
console.log(name); // Output: John
console.log(age); // Output: 30

18. Spread Operator


let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // Spread elements into a new array
console.log(arr2); // Output: [1, 2, 3, 4, 5]

19. Rest Parameters


function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

20. Template Literals


let name = `John`;
let greeting = `Hello, ${name}!`; // Use backticks for string interpolation
console.log(greeting); // Output: Hello, John!

21. Arrow Functions


const add = (a, b) => a + b; // Shorter syntax for functions
console.log(add(2, 3)); // Output: 5

22. Set and Map


let mySet = new Set([1, 2, 3, 3]); // Set only stores unique values
console.log(mySet); // Output: Set(3) { 1, 2, 3 }
let myMap = new Map();
myMap.set(`name`, `John`);
console.log(myMap.get(`name`)); // Output: John

23. Error Handling


try {
  throw new Error(`Something went wrong!`);
} catch (error) {
  console.log(error.message); // Output: Something went wrong!
}

24. Local Storage


localStorage.setItem(`key`, `value`); // Store data
let value = localStorage.getItem(`key`); // Retrieve data
console.log(value); // Output: value

25. Session Storage


sessionStorage.setItem(`sessionKey`, `sessionValue`); // Store session data
let sessionValue = sessionStorage.getItem(`sessionKey`); // Retrieve session data
console.log(sessionValue); // Output: sessionValue

26. Fetch API


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

27. Event Delegation


document.getElementById(`parent`).addEventListener(`click`, function(event) {
  if (event.target.matches(`.child`)) {
    console.log(`Child clicked!`);
  }
});

28. Throttle and Debounce


// Throttle function
function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        func.apply(context, args);
        lastRan = Date.now();
      }, limit - (Date.now() - lastRan));
    }
  };
}
// Debounce function
function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

29. Regular Expressions


let regex = /[a-z]+/; // Regular expression to match lowercase letters
console.log(regex.test(`hello`)); // Output: true

30. Array Methods


let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2); // Map
let filtered = numbers.filter(num => num > 2); // Filter
console.log(doubled); // Output: [2, 4, 6, 8, 10]
console.log(filtered); // Output: [3, 4, 5]

31. String Methods


let str = `Hello, World!`;
console.log (str.length); // Output: 13
console.log(str.toUpperCase()); // Output: HELLO, WORLD!
console.log(str.includes(`World`)); // Output: true

32. Date and Time


let date = new Date();
console.log(date); // Current date and time
console.log(date.getFullYear()); // Output: Current year

33. SetTimeout and SetInterval


setTimeout(() => {
  console.log(`Executed after 2 seconds`);
}, 2000); // Execute after 2 seconds
setInterval(() => {
  console.log(`Executed every 1 second`);
}, 1000); // Execute every 1 second

34. Closures


function outerFunction() {
  let outerVariable = `I'm from outer function`;
  return function innerFunction() {
    console.log(outerVariable);
  };
}
const innerFunc = outerFunction();
innerFunc(); // Output: I'm from outer function

35. IIFE (Immediately Invoked Function Expression)


(function() {
  console.log(`I am an IIFE`);
})(); // Output: I am an IIFE

36. Prototypes


function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};
const john = new Person(`John`);
john.greet(); // Output: Hello, my name is John

37. Object.create()


const animal = {
  speak() {
    console.log(`Animal speaks`);
  }
};
const dog = Object.create(animal);
dog.speak(); // Output: Animal speaks

38. Object.assign()


const target = { a: 1 };
const source = { b: 2, c: 3 };
const returnedTarget = Object.assign(target, source);
console.log(returnedTarget); // Output: { a: 1, b: 2, c: 3 }

39. Array Destructuring


const arr = [1, 2, 3];
const [first, second] = arr; // Destructure array
console.log(first); // Output: 1
console.log(second); // Output: 2

40. Object Destructuring


const obj = { x: 1, y: 2 };
const { x, y } = obj; // Destructure object
console.log(x); // Output: 1
console.log(y); // Output: 2

41. Spread Syntax with Objects


const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // Spread properties into a new object
console.log(obj2); // Output: { a: 1, b: 2, c: 3 }

42. Array.from()


const str = `hello`;
const arr = Array.from(str); // Convert string to array
console.log(arr); // Output: ['h', 'e', 'l', 'l', 'o']

43. Array.prototype.includes()


const arr = [1, 2, 3];
console.log(arr.includes(2)); // Output: true
console.log(arr.includes(4)); // Output: false

44. Array.prototype.reduce()


const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, curr) => acc + curr, 0); // Sum of array elements
console.log(sum); // Output: 10

45. Array.prototype.forEach()


const arr = [1, 2, 3];
arr.forEach(num => console.log(num)); // Output: 1 2 3

46. Array.prototype.find()


const arr = [1, 2, 3, 4];
const found = arr.find(num => num > 2); // Find first element greater than 2
console.log(found); // Output: 3

47. Array.prototype.filter()


const arr = [1 , 2, 3, 4];
const filtered = arr.filter(num => num > 2); // Filter elements greater than 2
console.log(filtered); // Output: [3, 4]

48. Array.prototype.map()


const arr = [1, 2, 3];
const doubled = arr.map(num => num * 2); // Double each element
console.log(doubled); // Output: [2, 4, 6]

49. Array.prototype.some()


const arr = [1, 2, 3, 4];
const hasEven = arr.some(num => num % 2 === 0); // Check if any element is even
console.log(hasEven); // Output: true

50. Array.prototype.every()


const arr = [1, 2, 3, 4];
const allEven = arr.every(num => num % 2 === 0); // Check if all elements are even
console.log(allEven); // Output: false

51. Array.prototype.splice()


const arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove 2 elements starting from index 1
console.log(arr); // Output: [1, 4]

52. Array.prototype.slice()


const arr = [1, 2, 3, 4];
const sliced = arr.slice(1, 3); // Get elements from index 1 to 3 (not inclusive)
console.log(sliced); // Output: [2, 3]

53. Array.prototype.concat()


const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2); // Combine two arrays
console.log(combined); // Output: [1, 2, 3, 4]

54. Array.prototype.join()


const arr = [1, 2, 3];
const joined = arr.join(`, `); // Join elements into a string
console.log(joined); // Output: `1, 2, 3`

55. String.prototype.split()


const str = `Hello, World!`;
const words = str.split(`, `); // Split string into an array
console.log(words); // Output: [`Hello`, `World!`]

56. String.prototype.replace()


const str = `Hello, World!`;
const newStr = str.replace(`World`, `JavaScript`); // Replace substring
console.log(newStr); // Output: `Hello, JavaScript!`

57. String.prototype.trim()


const str = `   Hello, World!   `;
const trimmed = str.trim(); // Remove whitespace
console.log(trimmed); // Output: `Hello, World!`

58. String.prototype.charAt()


const str = `Hello`;
const char = str.charAt(0); // Get character at index 0
console.log(char); // Output: `H`

59. String.prototype.indexOf()


const str = `Hello, World!`;
const index = str.indexOf(`World`); // Get index of substring
console.log(index); // Output: 7

60. String.prototype.includes()


const str = `Hello, World!`;
const hasWorld = str.includes(`World`); // Check if substring exists
console.log(hasWorld); // Output: true

61. Date.prototype.getDate()


const date = new Date();
console.log(date.getDate()); // Get day of the month

62. Date.prototype.getMonth()


const date = new Date();
console.log(date.getMonth()); // Get month (0-11)

63. Date.prototype.getFullYear()


const date = new Date();
console.log(date.getFullYear()); // Get full year

64. Date.prototype.getTime()


const date = new Date();
console.log(date.getTime()); // Get timestamp

65. Date.prototype.setDate()


const date = new Date();
date.setDate(15); // Set day of the month
console.log(date); // Output: Date object with day set to 15

66. Date.prototype.setMonth()


date.setMonth(5); // Set month (0-11)
console.log(date); // Output: Date object with month set to June

67. Date.prototype.setFullYear()


date.setFullYear(2025); // Set full year
console.log(date); // Output: Date object with year set to 2025

68. Date.prototype.toISOString()


console.log(date.toISOString()); // Output: ISO string representation of the date

69. Math Object


console.log(Math.PI); // Output: 3.141592653589793
console.log(Math.sqrt(16)); // Output: 4
console.log(Math.random()); // Output: Random number between 0 and 1

70. Set and Get Cookies


document.cookie = `username=John`; // Set a cookie
console.log(document.cookie); // Get all cookies

71. Fetching Data with Axios


axios.get(`https://api.example.com/data`)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

72. Using Local Storage


localStorage.setItem(`key`, `value`); // Store data
let value = localStorage.getItem(`key`); // Retrieve data
console.log(value); // Output: value

73. Using Session Storage


sessionStorage.setItem(`sessionKey`, `sessionValue`); // Store session data
let sessionValue = sessionStorage.getItem(`sessionKey`); // Retrieve session data
console.log(sessionValue); // Output: sessionValue

74. Using Web Workers


const worker = new Worker(`worker.js`); // Create a new web worker
worker.onmessage = function(event) {
  console.log(event.data); // Handle message from worker
};
worker.postMessage(`Hello, Worker!`); // Send message to worker

75. Using Service Workers


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => console.log('Service Worker registered:', registration))
    .catch(error => console.error('Service Worker registration failed:', error));
}

76. Using IndexedDB


let request = indexedDB.open(`myDatabase`, 1);
request.onsuccess = function(event) {
  let db = event.target.result;
  console.log(`Database opened successfully`);
};

77. Using Fetch API with Async/Await


async function fetchData() {
  try {
    let response = await fetch(`https://api.example.com/data`);
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

78. Using the Window Object


console.log(window.innerWidth); // Get the width of the window
console.log(window.innerHeight); // Get the height of the window

79. Using the Document Object


console.log(document.title); // Get the title of the document
document.title = `New Title`; // Set a new title

80. Using the History Object


history.pushState({}, `New Page`, `/new-page`); // Add a new entry to the history

81. Using the Location Object


console.log(location.href); // Get the current URL
location.href = `https://www.example.com`; // Redirect to a new URL

82. Using the Navigator Object


console.log(navigator.userAgent); // Get the user agent string

83. Using the Screen Object


console.log(screen.width); // Get the width of the screen
console.log(screen.height); // Get the height of the screen

84. Using the Console Object


console.log(`Hello, World!`); // Log a message to the console
console.error(`This is an error message`); // Log an error message
console.warn(`This is a warning message`); // Log a warning message

85. Using the Debugger


debugger; // Pause execution for debugging

86. Using the Fetch API for POST Requests


fetch(`https://api.example.com/data`, {
  method: `POST`,
  headers: {
    `Content-Type`: `application/json`
  },
  body: JSON.stringify({ name: `John` })
})
.then(response => response.json())
.then(data => console.log(data));

87. Using the XMLHttpRequest for AJAX


let xhr = new XMLHttpRequest();
xhr.open(`POST`, `https://api.example.com/data`, true);
xhr.setRequestHeader(`Content-Type`, `application/json`);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(JSON.stringify({ name: `John` }));

88. Using the Event Object


document.addEventListener(`click`, function(event) {
  console.log(event.target); // Log the clicked element
});

89. Using the Mouse Events


document.addEventListener(`mousemove`, function(event) {
  console.log(`Mouse position: ${event.clientX}, ${event.clientY}`);
});

90. Using the Keyboard Events


document.addEventListener(`keydown`, function(event) {
  console.log(`Key pressed: ${event.key}`);
});

91. Using the Touch Events


document.addEventListener(`touchstart`, function(event) {
  console.log(`Touch started`);
});

92. Using the Resize Event


window.addEventListener(`resize`, function() {
  console.log(`Window resized`);
});

93. Using the Scroll Event


window.addEventListener(`scroll`, function() {
  console.log(`Scrolled`);
});

94. Using the Focus and Blur Events


let input = document.getElementById(`myInput`);
input.addEventListener(`focus`, function() {
  console.log(`Input focused`);
});
input.addEventListener(`blur`, function() {
  console.log(`Input blurred`);
});

95. Using the Change Event


let select = document.getElementById(`mySelect`);
select.addEventListener(`change`, function() {
  console.log(`Selected value: ${select.value}`);
});

96. Using the Submit Event


let form = document.getElementById(`myForm`);
form.addEventListener(`submit`, function(event) {
  event.preventDefault(); // Prevent form submission
  console.log(`Form submitted`);
});

97. Using the Load Event


window.addEventListener(`load`, function() {
  console.log(`Page fully loaded`);
});

98. Using the Unload Event


window.addEventListener(`unload`, function() {
  console.log(`Page is unloading`);
});

99. Using the BeforeUnload Event


window.addEventListener(`beforeunload`, function(event) {
  event.preventDefault(); // Show confirmation dialog
  event.returnValue = ''; // Required for Chrome
});

100. Using the Visibility Change Event


document.addEventListener(`visibilitychange`, function() {
  if (document.hidden) {
    console.log(`Page is hidden`);
  } else {
    console.log(`Page is visible`);
  }
});