JavaScript Cheat Sheet – Complete Modern JS Reference (ES6+)

1. Variables & Data Types

Declaration

Always prefer const unless the value needs to change.

// Block scoped, re-assignable
let age = 25; 
age = 26;

// Block scoped, constant
const name = “Dev”; 

// Old school (Avoid if possible)
var old = “Legacy”;
            

Primitive Types

• String: const text = 'Hello';
• Number: const pi = 3.14;
• Boolean: const isCool = true;
• Null: const empty = null; (Intentionally empty)
• Undefined: let unknown; (Not assigned yet)

2. Functions

Arrow Functions (ES6)

Concise syntax, lexical this.

// Standard Arrow Function
const greet = (name) => {
    return “Hello “ + name;
};

// Implicit Return (One-liners)
const add = (a, b) => a + b;
            

Traditional Functions

function multiply(a, b) {
    return a * b;
}
            

3. Array Methods

Assuming: const nums = [1, 2, 3, 4];

Transformation

.map()

Creates a new array by transforming every element.

const doubled = nums.map(n => n * 2);
// Result: [2, 4, 6, 8]
            

Filtering

.filter()

Creates a new array with elements that pass the test.

const evens = nums.filter(n => n % 2 === 0);
// Result: [2, 4]
            

Finding

.find()

Returns the first element that matches.

const three = nums.find(n => n === 3);
// Result: 3
            

Modification

• nums.push(5): Add to end
• nums.pop(): Remove from end
• nums.shift(): Remove from start
• nums.unshift(0): Add to start

4. Logic & Control Flow

Ternary Operator

A shorthand for if...else statements.

const status = age >= 18 ? "Adult" : "Minor";
            

Short Circuiting

// OR operator (||) – Defaults
const username = inputName || “Guest”;

// AND operator (&&) – Guard clause
const init = () => {
    isLoggedIn && showDashboard();
};
            

5. Objects

Destructuring

Extracting values into variables cleanly.

const user = { 
    id: 1, 
    fullName: “John Doe”,
    role: “Admin” 
};

// Extracting
const { fullName, role } = user;
console.log(fullName); // “John Doe”
            

Spread Operator (…)

Cloning and merging objects.

const updatedUser = {
    ...user,          // Copy all old fields
    status: "Active"  // Add/Overwrite field
};
            

6. DOM Manipulation

Interacting with the HTML page.

Selecting Elements

const btn = document.querySelector('#myButton');
const items = document.querySelectorAll('.item');
            

Event Listeners

btn.addEventListener('click', (event) => {
    console.log('Button clicked!');
    event.preventDefault(); // Stop form submit
});
            

Modifying Elements

// Changing Text
btn.innerText = “Clicked”;

// Changing Styles
btn.style.backgroundColor = “red”;

// Changing Classes
btn.classList.add(“hidden”);
            

7. Async & Fetch

Async / Await (Modern)

The cleanest way to handle promises.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data", error);
    }
}
            

8. String Methods

Template Literals

Injecting variables into strings using backticks.

const greeting = `Welcome back, ${name}!`;
            

Useful Methods

• "Text".includes("ex"): Returns true/false
• "Text".toUpperCase(): Returns “TEXT”
• " a,b,c ".trim(): Removes whitespace
• "a,b,c".split(","): Returns [“a”, “b”, “c”]