JavaScript Cheat Sheet: Essential Concepts and Syntax

JavaScript is a powerful and versatile programming language used for web development. This cheat sheet covers the most important JavaScript concepts, helping you write cleaner and more efficient code.

---

1. Variables and Data Types

let name = "John";  // String
const age = 25;     // Number
var isStudent = true; // Boolean
let colors = ["red", "blue", "green"]; // Array
let person = { firstName: "John", lastName: "Doe" }; // Object
let x = null;  // Null
let y;  // Undefined

---

2. Operators

Arithmetic Operators

let sum = 5 + 3;   // 8
let power = 2 ** 3; // 8

Comparison Operators

console.log(5 == "5"); // true (loose comparison)
console.log(5 === "5"); // false (strict comparison)

Logical Operators

let a = true, b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

Ternary Operator

let result = age > 18 ? "Adult" : "Minor";

---

3. Conditionals

If-Else Statement

if (age >= 18) {
  console.log("You are an adult");
} else if (age >= 13) {
  console.log("You are a teenager");
} else {
  console.log("You are a child");
}

Switch Case

let fruit = "apple";
switch (fruit) {
  case "banana":
    console.log("It's a banana");
    break;
  case "apple":
    console.log("It's an apple");
    break;
  default:
    console.log("Unknown fruit");
}

---

4. Loops

For Loop

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

While Loop

let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

For-of Loop (Arrays)

let arr = [1, 2, 3, 4, 5];
for (let num of arr) {
  console.log(num);
}

For-in Loop (Objects)

let obj = { name: "John", age: 25 };
for (let key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

---

5. Functions

Function Declaration

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

Arrow Function

const multiply = (a, b) => a * b;

Default Parameters

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

greetUser(); // Hello, Guest!

---

6. Arrays and Methods

Basic Array Operations

let numbers = [1, 2, 3, 4, 5];
numbers.push(6); // Add to end
numbers.pop(); // Remove last element

Array Methods

let doubled = numbers.map(num => num * 2);
let filtered = numbers.filter(num => num > 2);
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(doubled, filtered, sum);

---

7. Objects

let person = {
  name: "Alice",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

console.log(person.name);
person.greet();

---

8. Destructuring & Spread Operator

let [first, second] = [10, 20];
let { name, age } = person;
let newArr = [...numbers, 6, 7, 8];
let newObj = { ...person, city: "New York" };

---

9. Promises & Async/Await

Promise Example

let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Success!"), 2000);
});

myPromise.then(result => console.log(result)).catch(err => console.log(err));

Async/Await

async function fetchData() {
  let response = await fetch("https://jsonplaceholder.typicode.com/posts");
  let data = await response.json();
  console.log(data);
}
fetchData();

---

10. DOM Manipulation

let btn = document.getElementById("myButton");
btn.addEventListener("click", () => alert("Button Clicked!"));

document.getElementById("title").textContent = "New Title";

---

11. Local Storage

localStorage.setItem("username", "JohnDoe");
console.log(localStorage.getItem("username"));
localStorage.removeItem("username");

---

12. ES6+ Features

let msg = `Hello, ${name}!`;
console.log(person?.address?.city);
let value = null ?? "Default Value";

---

This cheat sheet covers the fundamental concepts of JavaScript to help you code efficiently.

---

JavaScript Cheat Sheet Table

Category	Syntax/Example	Description
Variables	let name = "John";const age = 25;var isStudent = true;	let (block-scoped), const (constant), var (function-scoped)
Data Types	String, Number, Boolean, Array, Object, Null, Undefined	Primitive & Non-primitive data types
Operators	+, -, *, /, %, **	Arithmetic
	==, ===, !=, !==, >, <, >=, <=	Comparison
	&&, `
Conditionals	if (age >= 18) {...}	If-Else Statement
	switch (fruit) {...}	Switch Case
Loops	for (let i = 0; i < 5; i++) {...}	For Loop
	while (condition) {...}	While Loop
	do {...} while (condition);	Do-While Loop
Functions	function greet(name) {...}	Function Declaration
	const add = (a, b) => a + b;	Arrow Function
Arrays	let arr = [1, 2, 3];	Define an array
	arr.push(4);	Add to end
	arr.pop();	Remove last element
	arr.map(x => x * 2);	Transform elements
Objects	let person = {name: "John", age: 30};	Define an object
	console.log(person.name);	Access properties
Destructuring	let {name, age} = person;	Extract properties from an object
	let [first, second] = [10, 20];	Array destructuring
Spread Operator	let newArr = [...arr, 4, 5];	Expands an array/object
Promises	let promise = new Promise((resolve, reject) => {...});	Handle asynchronous operations
Async/Await	async function fetchData() {...}	Alternative to Promises
DOM Manipulation	document.getElementById("title").textContent = "New Title";	Modify HTML element
	document.createElement("div");	Create new elements
Local Storage	localStorage.setItem("key", "value");	Store data in browser
	localStorage.getItem("key");	Retrieve data
	localStorage.removeItem("key");	Remove data
ES6+ Features	`Hello, ${name}!`	Template Literals
	person?.address?.city;	Optional Chaining
	let value = null ?? "Default";	Nullish Coalescing Operator

---

This table summarizes key JavaScript concepts for quick reference. Let me know if you need any modifications!