Facebook Pixel
</> CodeWithHarry
JavaScript Cheatsheet

JavaScript Cheatsheet

"JavaScript Cheatsheet"

By CodeWithHarry

Updated: April 5, 2025

Adding JavaScript to HTML

Inline Script (Avoid for Production)

<script>
  console.log("Hello World");
</script>

External JS File (Recommended)

<script src="app.js" defer></script>
  • Use defer to ensure scripts run after HTML is parsed.
  • Use type="module" for ES modules.
<script type="module" src="app.js"></script>

Variables

Modern way to declare variables:

let name = "Harry";   // Block-scoped, reassignable
const PI = 3.14;      // Block-scoped, cannot be reassigned
var oldWay = true;    // Function-scoped, avoid using

Functions

Function Declaration

function greet(name) {
  return `Hello, ${name}!`;
}

Arrow Functions (Modern)

const greet = (name) => `Hello, ${name}!`;

Default Parameters

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

DOM Manipulation

Selecting Elements

document.querySelector('#id');
document.querySelectorAll('.class');

Changing Content

document.getElementById("elementID").textContent = "Hello World!";

Creating & Appending Elements

const div = document.createElement('div');
div.textContent = "New Element";
document.body.appendChild(div);

Console Output

console.log("Message");
console.error("Error message");
console.table([1, 2, 3]);

Conditional Statements

if (condition) {
  // code
} else if (otherCondition) {
  // code
} else {
  // code
}
 
switch(value) {
  case 'x':
    break;
  default:
}

Loops & Iteration

For Loop

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

For...of (Modern)

for (const item of ['a', 'b', 'c']) console.log(item);

forEach

[1, 2, 3].forEach(num => console.log(num));

While & Do While

while (i < 5) i++;
do { i++; } while (i < 5);

Strings

const str = "JavaScript";
str.charAt(3);
str.includes("Script");
str.startsWith("Java");
str.endsWith("pt");
str.replace("Java", "Type");
str.split("");
str.toUpperCase();

Arrays

const arr = [1, 2, 3];
arr.push(4);
arr.pop();
arr.shift();
arr.unshift(0);
arr.includes(2);
arr.find(num => num > 1);
arr.filter(num => num > 1);
arr.map(num => num * 2);
arr.reduce((acc, cur) => acc + cur, 0);

Numbers & Math

Number.isNaN(value);
Math.ceil(4.2);
Math.floor(4.9);
Math.random(); // 0-1
Math.max(1, 5, 9);
Math.min(1, 5, 9);

Dates

const now = new Date();
now.getFullYear();
now.getMonth(); // 0-11
now.toISOString();

Events

document.querySelector('#btn').addEventListener('click', e => {
  console.log('Button clicked', e);
});

Common events: click, input, change, submit, keydown, keyup, mouseenter, mouseleave

Error Handling

try {
  throw new Error("Something went wrong");
} catch (error) {
  console.error(error);
} finally {
  console.log("Always runs");
}

Async JavaScript

Promises

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

Async/Await

async function getData() {
  try {
    const res = await fetch('https://api.example.com');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

Window Methods

alert("Hello");
const confirmed = confirm("Are you sure?");
const name = prompt("Enter your name");
setTimeout(() => console.log("Timeout"), 1000);
const interval = setInterval(() => console.log("Tick"), 1000);
clearInterval(interval);

Modern ES6+ Features

Template Literals

const name = "Harry";
console.log(`Hello, ${name}`);

Destructuring

const person = { name: "Harry", age: 25 };
const { name, age } = person;

Spread & Rest Operators

const nums = [1, 2, 3];
const copy = [...nums];
function sum(...args) {
  return args.reduce((a, b) => a + b);
}

Modules

// export.js
export const PI = 3.14;
export default function greet() {
  console.log("Hello");
}
 
// import.js
import greet, { PI } from './export.js';

Debugging

debugger; // Pauses execution in DevTools

Download JavaScript CheatSheet

Tags

javascriptcheatsheet