JavaScript

JavaScript Cheat Sheet: A Quick Reference Guide

This cheat sheet categorizes essential JavaScript concepts, syntax, and common tasks based on their purpose for front-end and general development.

---

1. Basics of JavaScript

Concept	Description	Example
JavaScript	A scripting language for web interactivity.	console.log("Hello!");
Syntax	Core structure of JavaScript code.	let x = 5; console.log(x);

let name = "John";
console.log(`Hello, ${name}!`); // Output: Hello, John!

---

2. Variables and Data Types

Keywords for Variable Declarations

Keyword	Purpose	Scope
let	Declares a block-scoped variable.	Block Scope
const	Declares a constant variable.	Block Scope
var	Declares a function-scoped variable.	Function Scope

Data Types

Type	Description	Example
Number	Represents numerical values.	let x = 42;
String	Represents text.	let name = "Alice";
Boolean	Represents true or false.	let isDone = true;
Array	An ordered list of values.	let arr = [1, 2, 3];
Object	Key-value pairs.	let obj = { age: 30 };
Null	Absence of a value.	let val = null;
Undefined	Variable not assigned a value.	let data;

---

3. Operators

Arithmetic Operators

Operator	Purpose	Example	Result
+	Addition	5 + 3	8
-	Subtraction	5 - 2	3
*	Multiplication	5 * 2	10
/	Division	10 / 2	5
%	Modulus (Remainder)	10 % 3	1

Comparison Operators

Operator	Purpose	Example	Result
==	Loose equality	5 == '5'	true
===	Strict equality	5 === '5'	false
!=	Loose inequality	5 != '6'	true
<, >	Less/greater than	5 > 3	true

Logical Operators

Operator	Purpose	Example	Result
&&	Logical AND	true && false	false
||	Logical OR	true || false	true
!	Logical NOT	!true	false

---

4. Control Flow

Statement	Purpose	Example
if	Executes code if condition is true.	if (x > 10) { console.log("Hi"); }
else	Executes if condition is false.	else { console.log("Bye"); }
switch	Executes case-matching conditions.	switch(x) { case 5: ... }
for	Loops for a condition.	for (let i = 0; i < 5; i++)
while	Loops while a condition is true.	while (x < 5) { x++; }

---

5. Functions

Type	Syntax	Purpose
Function	function name() {}	Defines a reusable block of code.
Arrow Function	const fn = () => {};	Concise function syntax.
Parameters	function greet(name)	Accepts input arguments.
Return Value	return value;	Returns output.

// Arrow function example
const add = (a, b) => a + b;
console.log(add(3, 5)); // Output: 8

---

6. Arrays and Objects

Arrays

Method	Purpose	Example
push()	Adds element at the end.	arr.push(4);
pop()	Removes last element.	arr.pop();
forEach()	Iterates over array.	arr.forEach(x => console.log(x))

Objects

Operation	Example
Access property	obj.name;
Add property	obj.age = 30;
Delete property	delete obj.age;

---

7. DOM Manipulation

Method	Purpose	Example
getElementById()	Select element by ID.	document.getElementById("btn");
querySelector()	Select first matching element.	document.querySelector(".class");
innerHTML	Set/get content inside element.	element.innerHTML = "Hello";
addEventListener()	Add an event listener.	btn.addEventListener("click", fn);

// Example
document.getElementById("btn").addEventListener("click", () => {
    alert("Button clicked!");
});

---

8. Events

Event	Trigger	Example
click	User clicks an element.	button.addEventListener("click")
mouseover	Mouse enters an element.	element.onmouseover
keydown	Key pressed on the keyboard.	input.addEventListener("keydown")

---

9. Error Handling

Statement	Purpose	Example
try	Wraps code to test for errors.	try { riskyCode(); }
catch	Catches and handles errors.	catch(error) { console.log(error); }
finally	Executes after try or catch.	finally { console.log("Done"); }

try {
    riskyCode();
} catch (error) {
    console.error("An error occurred:", error);
} finally {
    console.log("Execution complete.");
}