JavaScript Cheat Sheet: Essential Syntax and Functions

JavaScript is the backbone of modern web development — powering everything from interactive websites to complex web applications. Whether you're a beginner just starting out or an experienced developer looking for a quick refresher, having a concise cheat sheet can save you time and boost your productivity.

In this tutorial, we’ve compiled the most essential JavaScript syntax, keywords, operators, data types, functions, and other core features into a handy cheat sheet. Think of it as your quick-reference guide to writing clean, efficient, and modern JavaScript.

No fluff — just the fundamentals you need to get things done.

1. Variables

let name = "Djamware";   // Block-scoped, reassignable
const pi = 3.14;         // Block-scoped, constant
var age = 30;            // Function-scoped (legacy)

---

2. Data Types

// Primitive Types
let str = "Hello";        // String
let num = 42;             // Number
let bool = true;          // Boolean
let undef = undefined;    // Undefined
let n = null;             // Null
let sym = Symbol("id");   // Symbol
let bigInt = 123n;        // BigInt

// Reference Type
let obj = { name: "JS" }; // Object
let arr = [1, 2, 3];       // Array

---

3. Operators

// Arithmetic
+  -  *  /  %  **

// Assignment
=  +=  -=  *=  /=

// Comparison
==  ===  !=  !==  >  <  >=  <=

// Logical
&&  ||  !

// Ternary
let result = (score >= 60) ? "Pass" : "Fail";

---

4. Conditionals

if (x > 10) {
  console.log("Greater");
} else if (x === 10) {
  console.log("Equal");
} else {
  console.log("Lesser");
}

switch (color) {
  case "red":
    console.log("Stop");
    break;
  default:
    console.log("Go");
}

---

5. Loops

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

while (n < 10) {
  n++;
}

do {
  n--;
} while (n > 0);

for (let item of items) {
  console.log(item);
}

for (let key in obj) {
  console.log(key, obj[key]);
}

---

6. Functions

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

// Function expression
const add = function(a, b) {
  return a + b;
};

// Arrow function
const multiply = (x, y) => x * y;

// Default parameters
function log(message = "Default") {
  console.log(message);
}

// Rest parameters
function sum(...nums) {
  return nums.reduce((a, b) => a + b);
}

---

7. Objects

const person = {
  name: "Jane",
  age: 25,
  greet() {
    return `Hi, I'm ${this.name}`;
  }
};

console.log(person.name);
console.log(person["age"]);

---

8. Arrays

let fruits = ["apple", "banana", "cherry"];

fruits.push("orange");      // Add to end
fruits.pop();               // Remove from end
fruits.shift();             // Remove from start
fruits.unshift("grape");    // Add to start

fruits.forEach(f => console.log(f));
let mapped = fruits.map(f => f.toUpperCase());
let filtered = fruits.filter(f => f.startsWith("a"));

---

9. ES6+ Features

// Destructuring
const [first, second] = [1, 2];
const {name, age} = person;

// Template literals
let message = `Hello, ${name}`;

// Spread operator
let newArr = [...fruits, "kiwi"];

// Optional chaining
let city = person?.address?.city;

// Nullish coalescing
let value = input ?? "default";

---

10. DOM Manipulation (Browser)

const btn = document.getElementById("myBtn");
btn.addEventListener("click", () => alert("Clicked!"));

document.querySelector("h1").textContent = "Hello DOM!";

---

11. Error Handling

try {
  throw new Error("Something went wrong");
} catch (e) {
  console.error(e.message);
} finally {
  console.log("Done");
}

---

12. Promises & Async/Await

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

// Async/Await
async function loadData() {
  try {
    const res = await fetch("https://api.example.com");
    const data = await res.json();
    console.log(data);
  } catch (e) {
    console.error(e);
  }
}

Conclusion

JavaScript is a powerful and versatile language that continues to evolve with each new ECMAScript release. Whether you're just starting or brushing up on your skills, having a solid grasp of the core syntax and functions is essential to building reliable and maintainable web applications.

This cheat sheet covered the most important features of modern JavaScript — from variables and data types to functions, loops, conditionals, and async programming. Bookmark it, revisit it, and use it as your go-to reference while coding.

You can find the full source code on our GitHub.

That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related, you can take the following cheap course:

• HTML & HTML5 For Beginners (A Practical Guide)
• Web - HTML
• Learn HTML, CSS, JAVASCRIPT
• JavaScript:
• Learn JavaScript Fundamentals
• Learning JavaScript Shell Scripting

Thanks!