Ultimate JavaScript Cheatsheet (2025)

Hey guys, welcome back to another resource post here on Van Marciano Pro. Below you will find a list of JS element shortcuts you can use in your projects.

I hope you find this list useful, I’ll be sure to update it when I can. I’ve included a short description below each snippet to help you understand, if you are just getting to grips with JS. Even though I’ve been working with JS for a few years, I’m still learning.

Let’s begin with the basics.

// On-page scripts
<script type="text/javascript"></script>

//Include external JavaScript file
<script src="filename.js"></script>

// Functions
function addNumbers( a, b) {
   return a + b;
}

// Comments
/*
   Multiline comment. You can add as many
   lines as you like.
*/
// Single line comment

//logging/print
console.log(a);
document.write(a);
alert(a);
confirm("what?");
prompt("Your age", "100");

Now let’s dive in a little deeper –

1. Variables and constants

In JS programming, variables and constants are used to store data values.

A variable is a storage location in memory that holds a value, which can change during program execution. A constant is a storage location that holds a value that does not change during program execution.

var name = "Fabrizio"; // Function-scoped
let age = 48; // Block-scoped
const PI = 3.14; // Block-scoped & cannot be reassigned

2. Data Types

A data type in JavaScript defines the kind of value a variable can hold. It determines how the value is stored in memory and what operations can be performed on it.

let str = "Hello";   // String
let num = 10;         // Number
let bool = true;      // Boolean
let arr = [1, 2, 3];  // Array
let obj = {name: "Lily", age: 21}; // Object
let und;              // Undefined
let nul = null;       // Null

3. Operators

An operator in JavaScript is a symbol used to perform operations on values or variables. Operators allow you to manipulate data and perform calculations.

// Arithmetic
let add = 5 + 3;  // 8
let sub = 5 - 3; // 2
let mul = 5 * 3; // 15
let div = 5 / 3;  // 1.666
let mod = 5 % 3;  // 2

// Comparison (==, ===, !=, !==, >, <, >=, <=)
console.log(5 == "5");  // true (loose equality)
console.log(5 === "5"); // false (strict equality)
console.log(5 !== "5"); // true
console.log(5 > 3);      // true

// Logical
console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false

4. Functions

A function in JavaScript is a reusable block of code designed to perform a specific task. Functions allow us to write cleaner, modular, and maintainable code.

// Function Declaration
function greet(name) {
    return "Hello " + name;
}

// Function Expression
const greet = function(name) {
    return "Hello " + name;
};

// Arrow Function
const greet = (name) => "Hello " + name;

5. Control flow

Control flow in JavaScript refers to the order in which statements are executed in a program. By default, JavaScript code runs from top to bottom, but we can alter this flow using conditional statements, loops, and functions.

// If-Else
if (age > 18) {
    console.log("Adult");
} else {
    console.log("Child");
}

// Switch
switch (day) {
    case "Monday":
        console.log("Start of the week");
        break;
    case "Friday":
        console.log("Weekend is near");
        break;
    default:
        console.log("Regular day");
}

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

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

6. Arrays

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.length);  // 3
console.log(fruits[1]);      // Banana

// Array Methods
fruits.push("Orange");  // Add to end
fruits.pop();            // Remove from end
fruits.shift();          // Remove from start
fruits.unshift("Grapes"); // Add to start
fruits.forEach(fruit => console.log(fruit));

7. Objects

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("Hello " + this.name);
    }
};
console.log(person.name); // Alice
person.greet(); // Hello Alice

8. DOM Manipulation

let elem = document.getElementById("myId");
let elems = document.querySelectorAll(".myClass");

elem.textContent = "New Text";
elem.style.color = "red";
elem.addEventListener("click", () => alert("Clicked!"));

9. Fetch API (AJAX)

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error:", error));

10. ES6 Features

// Template Literals
let name = "Fabrizio";
console.log(`Hello, ${name}`);

// Destructuring
let [a, b] = [1, 2];
let {name, age} = person;

// Spread & Rest Operator
let nums = [1, 2, 3];
let newNums = [...nums, 4, 5];

function sum(...args) {
    return args.reduce((acc, val) => acc + val, 0);
}

// Promises & Async/Await
async function fetchData() {
    try {
        let response = await fetch("https://api.example.com/data");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error:", error);
    }
}

If I’ve missed anything out or made a mistake somewhere, please let me know. Feel free to get in touch with me here.