JavaScript Cheatsheet
Adding JavaScript to HTML
Inline Script (Avoid for Production)
<script>
[Link]("Hello World");
</script>
External JS File (Recommended)
<script src="[Link]" defer></script>
• Use defer to ensure scripts run after HTML is parsed.
• Use type="module" for ES modules.
<script type="module" src="[Link]"></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") {
[Link](`Hello, ${name}`);
}
DOM Manipulation
Selecting Elements
[Link]('#id');
[Link]('.class');
Changing Content
[Link]("elementID").textContent = "Hello World!";
Creating & Appending Elements
const div = [Link]('div');
[Link] = "New Element";
[Link](div);
Console Output
[Link]("Message");
[Link]("Error message");
[Link]([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++) [Link](i);
For…of (Modern)
for (const item of ['a', 'b', 'c']) [Link](item);
forEach
[1, 2, 3].forEach(num => [Link](num));
While & Do While
while (i < 5) i++;
do { i++; } while (i < 5);
Strings
const str = "JavaScript";
[Link](3);
[Link]("Script");
[Link]("Java");
[Link]("pt");
[Link]("Java", "Type");
[Link]("");
[Link]();
Arrays
const arr = [1, 2, 3];
[Link](4);
[Link]();
[Link]();
[Link](0);
[Link](2);
[Link](num => num > 1);
[Link](num => num > 1);
[Link](num => num * 2);
[Link]((acc, cur) => acc + cur, 0);
Numbers & Math
[Link](value);
[Link](4.2);
[Link](4.9);
[Link](); // 0-1
[Link](1, 5, 9);
[Link](1, 5, 9);
Dates
const now = new Date();
[Link]();
[Link](); // 0-11
[Link]();
Events
[Link]('#btn').addEventListener('click', e => {
[Link]('Button clicked', e);
});
Common events: click , input , change , submit , keydown , keyup ,
mouseenter , mouseleave
Error Handling
try {
throw new Error("Something went wrong");
} catch (error) {
[Link](error);
} finally {
[Link]("Always runs");
}
Async JavaScript
Promises
fetch('[Link]
.then(res => [Link]())
.then(data => [Link](data))
.catch(err => [Link](err));
Async/Await
async function getData() {
try {
const res = await fetch('[Link]
const data = await [Link]();
[Link](data);
} catch (err) {
[Link](err);
}
}
Window Methods
alert("Hello");
const confirmed = confirm("Are you sure?");
const name = prompt("Enter your name");
setTimeout(() => [Link]("Timeout"), 1000);
const interval = setInterval(() => [Link]("Tick"), 1000);
clearInterval(interval);
Modern ES6+ Features
Template Literals
const name = "Harry";
[Link](`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 [Link]((a, b) => a + b);
}
Modules
// [Link]
export const PI = 3.14;
export default function greet() {
[Link]("Hello");
}
// [Link]
import greet, { PI } from './[Link]';
Debugging
debugger; // Pauses execution in DevTools
